From e3ef6d35ab0f4b36e61551d9c047f8d6a55d10a7 Mon Sep 17 00:00:00 2001 From: Nate Butler Date: Thu, 20 Oct 2022 15:32:56 -0400 Subject: [PATCH] Add a range of new themes as internal themes for testing --- styles/src/themes/internal/ayu-mirage.ts | 31 +++++++++++ styles/src/themes/internal/ayu.ts | 7 ++- styles/src/themes/internal/dracula.ts | 46 ++++++++-------- styles/src/themes/internal/embers.ts | 30 ----------- .../{gruvbox.ts => gruvbox-medium.ts} | 54 ++++++++++--------- styles/src/themes/internal/heath.ts | 48 ++++++++++++----- styles/src/themes/internal/monokai.ts | 23 ++++---- styles/src/themes/internal/nord.ts | 25 +++++---- styles/src/themes/internal/seaside.ts | 30 +++++++++++ styles/src/themes/internal/seti-ui.ts | 28 ++++++++++ .../src/themes/internal/tokyo-night-storm.ts | 28 ++++++++++ styles/src/themes/internal/tokyo-night.ts | 49 +++++++++++++++++ styles/src/themes/internal/twilight.ts | 28 ++++++++++ styles/src/themes/internal/zed-pro.ts | 8 +-- styles/src/themes/internal/zenburn.ts | 28 ++++++++++ 15 files changed, 342 insertions(+), 121 deletions(-) create mode 100644 styles/src/themes/internal/ayu-mirage.ts delete mode 100644 styles/src/themes/internal/embers.ts rename styles/src/themes/internal/{gruvbox.ts => gruvbox-medium.ts} (59%) create mode 100644 styles/src/themes/internal/seaside.ts create mode 100644 styles/src/themes/internal/seti-ui.ts create mode 100644 styles/src/themes/internal/tokyo-night-storm.ts create mode 100644 styles/src/themes/internal/tokyo-night.ts create mode 100644 styles/src/themes/internal/twilight.ts create mode 100644 styles/src/themes/internal/zenburn.ts diff --git a/styles/src/themes/internal/ayu-mirage.ts b/styles/src/themes/internal/ayu-mirage.ts new file mode 100644 index 0000000000..9294a9af64 --- /dev/null +++ b/styles/src/themes/internal/ayu-mirage.ts @@ -0,0 +1,31 @@ +import chroma from "chroma-js"; +import { colorRamp, createColorScheme } from "../common/ramps"; + +const name = "Ayu"; +const author = "Konstantin Pschera "; +const url = "https://github.com/ayu-theme/ayu-colors"; +const license = { + type: "MIT", + url: "https://github.com/ayu-theme/ayu-colors/blob/master/license" +} + +export const dark = createColorScheme(`${name} Mirage`, false, { + neutral: chroma.scale([ + "#171B24", + "#1F2430", + "#242936", + "#707A8C", + "#8A9199", + "#CCCAC2", + "#D9D7CE", + "#F3F4F5", + ]), + red: colorRamp(chroma("#F28779")), + orange: colorRamp(chroma("#FFAD66")), + yellow: colorRamp(chroma("#FFD173")), + green: colorRamp(chroma("#D5FF80")), + cyan: colorRamp(chroma("#95E6CB")), + blue: colorRamp(chroma("#5CCFE6")), + violet: colorRamp(chroma("#D4BFFF")), + magenta: colorRamp(chroma("#F29E74")), +}); diff --git a/styles/src/themes/internal/ayu.ts b/styles/src/themes/internal/ayu.ts index 71968cd55b..c5a526d8ce 100644 --- a/styles/src/themes/internal/ayu.ts +++ b/styles/src/themes/internal/ayu.ts @@ -2,7 +2,12 @@ import chroma from "chroma-js"; import { colorRamp, createColorScheme } from "../common/ramps"; const name = "Ayu"; -const author = "Khue Nguyen "; +const author = "Konstantin Pschera "; +const url = "https://github.com/ayu-theme/ayu-colors"; +const license = { + type: "MIT", + url: "https://github.com/ayu-theme/ayu-colors/blob/master/license" +} export const dark = createColorScheme(`${name} Dark`, false, { neutral: chroma.scale([ diff --git a/styles/src/themes/internal/dracula.ts b/styles/src/themes/internal/dracula.ts index 2994996338..0571574049 100644 --- a/styles/src/themes/internal/dracula.ts +++ b/styles/src/themes/internal/dracula.ts @@ -2,28 +2,30 @@ import chroma from "chroma-js"; import { colorRamp, createColorScheme } from "../common/ramps"; const name = "Dracula"; -const author = "Base16 port by Mike Barkmin (http://github.com/mikebarkmin)"; -const url = "http://github.com/dracula" +const author = "zenorocha"; +const url = "https://github.com/dracula/dracula-theme"; +const license = { + type: "MIT", + url: "https://github.com/dracula/dracula-theme/blob/master/LICENSE", +}; -// `name-[light|dark]`, isLight, color ramps export const dark = createColorScheme(`${name}`, false, { - neutral: chroma - .scale([ - "#282936", - "#3a3c4e", - "#4d4f68", - "#626483", - "#62d6e8", - "#e9e9f4", - "#f1f2f8", - "#f7f7fb", - ]), - red: colorRamp(chroma("#ea51b2")), - orange: colorRamp(chroma("#b45bcf")), - yellow: colorRamp(chroma("#ebff87")), - green: colorRamp(chroma("#00f769")), - cyan: colorRamp(chroma("#a1efe4")), - blue: colorRamp(chroma("#62d6e8")), - violet: colorRamp(chroma("#b45bcf")), + neutral: chroma.scale([ + "#282A36", + "#3a3c4e", + "#4d4f68", + "#626483", + "#62d6e8", + "#e9e9f4", + "#f1f2f8", + "#f8f8f2", + ]), + red: colorRamp(chroma("#ff5555")), + orange: colorRamp(chroma("#ffb86c")), + yellow: colorRamp(chroma("#f1fa8c")), + green: colorRamp(chroma("#50fa7b")), + cyan: colorRamp(chroma("#8be9fd")), + blue: colorRamp(chroma("#6272a4")), + violet: colorRamp(chroma("#bd93f9")), magenta: colorRamp(chroma("#00f769")), -}); \ No newline at end of file +}); diff --git a/styles/src/themes/internal/embers.ts b/styles/src/themes/internal/embers.ts deleted file mode 100644 index 8e11f4e7f0..0000000000 --- a/styles/src/themes/internal/embers.ts +++ /dev/null @@ -1,30 +0,0 @@ -import chroma from "chroma-js"; -import { colorRamp, createColorScheme } from "../common/ramps"; - -// Ashes scheme for the Base16 Builder (https://github.com/chriskempson/base16-builder) -const name = "Embers"; -const author = "Jannik Siebert (https://github.com/janniks)"; -const url = "" - -// `name-[light|dark]`, isLight, color ramps -export const dark = createColorScheme(`${name}`, false, { - neutral: chroma - .scale([ - "#16130F", - "#2C2620", - "#433B32", - "#5A5047", - "#8A8075", - "#A39A90", - "#BEB6AE", - "#DBD6D1", - ]), - red: colorRamp(chroma("#826D57")), - orange: colorRamp(chroma("#828257")), - yellow: colorRamp(chroma("#6D8257")), - green: colorRamp(chroma("#57826D")), - cyan: colorRamp(chroma("#576D82")), - blue: colorRamp(chroma("#6D5782")), - violet: colorRamp(chroma("#82576D")), - magenta: colorRamp(chroma("#825757")), -}); \ No newline at end of file diff --git a/styles/src/themes/internal/gruvbox.ts b/styles/src/themes/internal/gruvbox-medium.ts similarity index 59% rename from styles/src/themes/internal/gruvbox.ts rename to styles/src/themes/internal/gruvbox-medium.ts index 42caf53623..888c15e46c 100644 --- a/styles/src/themes/internal/gruvbox.ts +++ b/styles/src/themes/internal/gruvbox-medium.ts @@ -3,21 +3,24 @@ import { colorRamp, createColorScheme } from "../common/ramps"; const name = "Gruvbox"; const author = "Dawid Kurek (dawikur@gmail.com)"; -const url = "https://github.com/morhetz/gruvbox" +const url = "https://github.com/morhetz/gruvbox"; +const license = { + type: "MIT/X11", + url: "https://en.wikipedia.org/wiki/MIT_License", +}; // `name-[light|dark]`, isLight, color ramps -export const dark = createColorScheme(`${name}-dark-medium`, false, { - neutral: chroma - .scale([ - "#282828", - "#3c3836", - "#504945", - "#665c54", - "#bdae93", - "#d5c4a1", - "#ebdbb2", - "#fbf1c7", - ]), +export const dark = createColorScheme(`${name} Dark Medium`, false, { + neutral: chroma.scale([ + "#282828", + "#3c3836", + "#504945", + "#665c54", + "#bdae93", + "#d5c4a1", + "#ebdbb2", + "#fbf1c7", + ]), red: colorRamp(chroma("#fb4934")), orange: colorRamp(chroma("#fe8019")), yellow: colorRamp(chroma("#fabd2f")), @@ -28,18 +31,17 @@ export const dark = createColorScheme(`${name}-dark-medium`, false, { magenta: colorRamp(chroma("#d65d0e")), }); -export const light = createColorScheme(`${name}-light-medium`, true, { - neutral: chroma - .scale([ - "#282828", - "#3c3836", - "#504945", - "#665c54", - "#bdae93", - "#d5c4a1", - "#ebdbb2", - "#fbf1c7", - ]), +export const light = createColorScheme(`${name} Light Medium`, true, { + neutral: chroma.scale([ + "#282828", + "#3c3836", + "#504945", + "#665c54", + "#bdae93", + "#d5c4a1", + "#ebdbb2", + "#fbf1c7", + ]), red: colorRamp(chroma("#9d0006")), orange: colorRamp(chroma("#af3a03")), yellow: colorRamp(chroma("#b57614")), @@ -48,4 +50,4 @@ export const light = createColorScheme(`${name}-light-medium`, true, { blue: colorRamp(chroma("#076678")), violet: colorRamp(chroma("#8f3f71")), magenta: colorRamp(chroma("#d65d0e")), -}); \ No newline at end of file +}); diff --git a/styles/src/themes/internal/heath.ts b/styles/src/themes/internal/heath.ts index 14b0e9683f..b1bbf7544e 100644 --- a/styles/src/themes/internal/heath.ts +++ b/styles/src/themes/internal/heath.ts @@ -3,21 +3,20 @@ import { colorRamp, createColorScheme } from "../common/ramps"; const name = "Atelier Heath"; const author = "Bram de Haan (http://atelierbramdehaan.nl)"; -const url = "" +const url = ""; // `name-[light|dark]`, isLight, color ramps -export const dark = createColorScheme(`${name}`, false, { - neutral: chroma - .scale([ - "#1b181b", - "#292329", - "#695d69", - "#776977", - "#9e8f9e", - "#ab9bab", - "#d8cad8", - "#f7f3f7", - ]), +export const dark = createColorScheme(`${name} Dark`, false, { + neutral: chroma.scale([ + "#1b181b", + "#292329", + "#695d69", + "#776977", + "#9e8f9e", + "#ab9bab", + "#d8cad8", + "#f7f3f7", + ]), red: colorRamp(chroma("#ca402b")), orange: colorRamp(chroma("#a65926")), yellow: colorRamp(chroma("#bb8a35")), @@ -26,4 +25,25 @@ export const dark = createColorScheme(`${name}`, false, { blue: colorRamp(chroma("#516aec")), violet: colorRamp(chroma("#7b59c0")), magenta: colorRamp(chroma("#cc33cc")), -}); \ No newline at end of file +}); + +export const light = createColorScheme(`${name} Light`, true, { + neutral: chroma.scale([ + "#161b1d", + "#1f292e", + "#516d7b", + "#5a7b8c", + "#7195a8", + "#7ea2b4", + "#c1e4f6", + "#ebf8ff", + ]), + red: colorRamp(chroma("#d22d72")), + orange: colorRamp(chroma("#935c25")), + yellow: colorRamp(chroma("#8a8a0f")), + green: colorRamp(chroma("#568c3b")), + cyan: colorRamp(chroma("#2d8f6f")), + blue: colorRamp(chroma("#257fad")), + violet: colorRamp(chroma("#6b6bb8")), + magenta: colorRamp(chroma("#b72dd2")), +}); diff --git a/styles/src/themes/internal/monokai.ts b/styles/src/themes/internal/monokai.ts index 0f5f0b8863..8e6df116d5 100644 --- a/styles/src/themes/internal/monokai.ts +++ b/styles/src/themes/internal/monokai.ts @@ -3,21 +3,20 @@ import { colorRamp, createColorScheme } from "../common/ramps"; const name = "Monokai"; const author = "Wimer Hazenberg (http://www.monokai.nl)"; -const url = "" +const url = ""; // `name-[light|dark]`, isLight, color ramps export const dark = createColorScheme(`${name}`, false, { - neutral: chroma - .scale([ - "#272822", - "#383830", - "#49483e", - "#75715e", - "#a59f85", - "#f8f8f2", - "#f5f4f1", - "#f9f8f5", - ]), + neutral: chroma.scale([ + "#272822", + "#383830", + "#49483e", + "#75715e", + "#a59f85", + "#f8f8f2", + "#f5f4f1", + "#f9f8f5", + ]), red: colorRamp(chroma("#f92672")), orange: colorRamp(chroma("#fd971f")), yellow: colorRamp(chroma("#f4bf75")), diff --git a/styles/src/themes/internal/nord.ts b/styles/src/themes/internal/nord.ts index 51adb5def7..00902e60fa 100644 --- a/styles/src/themes/internal/nord.ts +++ b/styles/src/themes/internal/nord.ts @@ -3,21 +3,20 @@ import { colorRamp, createColorScheme } from "../common/ramps"; const name = "Nord"; const author = "arcticicestudio"; -const url = "" +const url = ""; // `name-[light|dark]`, isLight, color ramps export const dark = createColorScheme(`${name}`, false, { - neutral: chroma - .scale([ - "#2E3440", - "#3B4252", - "#434C5E", - "#4C566A", - "#D8DEE9", - "#E5E9F0", - "#ECEFF4", - "#8FBCBB", - ]), + neutral: chroma.scale([ + "#2E3440", + "#3B4252", + "#434C5E", + "#4C566A", + "#D8DEE9", + "#E5E9F0", + "#ECEFF4", + "#8FBCBB", + ]), red: colorRamp(chroma("#88C0D0")), orange: colorRamp(chroma("#81A1C1")), yellow: colorRamp(chroma("#5E81AC")), @@ -26,4 +25,4 @@ export const dark = createColorScheme(`${name}`, false, { blue: colorRamp(chroma("#EBCB8B")), violet: colorRamp(chroma("#A3BE8C")), magenta: colorRamp(chroma("#B48EAD")), -}); \ No newline at end of file +}); diff --git a/styles/src/themes/internal/seaside.ts b/styles/src/themes/internal/seaside.ts new file mode 100644 index 0000000000..b114c8cd6f --- /dev/null +++ b/styles/src/themes/internal/seaside.ts @@ -0,0 +1,30 @@ +import chroma from "chroma-js"; +import { colorRamp, createColorScheme } from "../common/ramps"; + +const name = "Atelier Seaside"; +const author = "Bram de Haan (http://atelierbramdehaan.nl)"; +const url = ""; + +const ramps = { + neutral: chroma.scale([ + "#131513", + "#242924", + "#5e6e5e", + "#687d68", + "#809980", + "#8ca68c", + "#cfe8cf", + "#f4fbf4", + ]), + red: colorRamp(chroma("#e6193c")), + orange: colorRamp(chroma("#87711d")), + yellow: colorRamp(chroma("#98981b")), + green: colorRamp(chroma("#29a329")), + cyan: colorRamp(chroma("#1999b3")), + blue: colorRamp(chroma("#3d62f5")), + violet: colorRamp(chroma("#ad2bee")), + magenta: colorRamp(chroma("#e619c3")), +}; + +export const dark = createColorScheme(`${name} Dark`, false, ramps); +export const light = createColorScheme(`${name} Light`, true, ramps); diff --git a/styles/src/themes/internal/seti-ui.ts b/styles/src/themes/internal/seti-ui.ts new file mode 100644 index 0000000000..29b25500cd --- /dev/null +++ b/styles/src/themes/internal/seti-ui.ts @@ -0,0 +1,28 @@ +import chroma from "chroma-js"; +import { colorRamp, createColorScheme } from "../common/ramps"; + +const name = "Seti UI"; +const author = "jesseweed"; +const url = ""; + +// `name-[light|dark]`, isLight, color ramps +export const dark = createColorScheme(`${name}`, false, { + neutral: chroma.scale([ + "#151718", + "#262B30", + "#1E2326", + "#41535B", + "#43a5d5", + "#d6d6d6", + "#eeeeee", + "#ffffff", + ]), + red: colorRamp(chroma("#Cd3f45")), + orange: colorRamp(chroma("#db7b55")), + yellow: colorRamp(chroma("#e6cd69")), + green: colorRamp(chroma("#9fca56")), + cyan: colorRamp(chroma("#55dbbe")), + blue: colorRamp(chroma("#55b5db")), + violet: colorRamp(chroma("#a074c4")), + magenta: colorRamp(chroma("#8a553f")), +}); diff --git a/styles/src/themes/internal/tokyo-night-storm.ts b/styles/src/themes/internal/tokyo-night-storm.ts new file mode 100644 index 0000000000..2aa08f8cec --- /dev/null +++ b/styles/src/themes/internal/tokyo-night-storm.ts @@ -0,0 +1,28 @@ +import chroma from "chroma-js"; +import { colorRamp, createColorScheme } from "../common/ramps"; + +const name = "Tokyo Night Storm"; +const author = "ghifarit53"; +const url = "https://github.com/ghifarit53/tokyonight-vim"; + +// `name-[light|dark]`, isLight, color ramps +export const dark = createColorScheme(`${name}`, false, { + neutral: chroma.scale([ + "#24283B", + "#16161E", + "#343A52", + "#444B6A", + "#787C99", + "#A9B1D6", + "#CBCCD1", + "#D5D6DB", + ]), + red: colorRamp(chroma("#C0CAF5")), + orange: colorRamp(chroma("#A9B1D6")), + yellow: colorRamp(chroma("#0DB9D7")), + green: colorRamp(chroma("#9ECE6A")), + cyan: colorRamp(chroma("#B4F9F8")), + blue: colorRamp(chroma("#2AC3DE")), + violet: colorRamp(chroma("#BB9AF7")), + magenta: colorRamp(chroma("#F7768E")), +}); diff --git a/styles/src/themes/internal/tokyo-night.ts b/styles/src/themes/internal/tokyo-night.ts new file mode 100644 index 0000000000..23805daf46 --- /dev/null +++ b/styles/src/themes/internal/tokyo-night.ts @@ -0,0 +1,49 @@ +import chroma from "chroma-js"; +import { colorRamp, createColorScheme } from "../common/ramps"; + +const name = "Tokyo"; +const author = "Michaël Ball"; +const url = "https://github.com/folke/tokyonight.nvim"; + +// `name-[light|dark]`, isLight, color ramps +export const dark = createColorScheme(`${name} Night`, false, { + neutral: chroma.scale([ + "#1A1B26", + "#16161E", + "#2F3549", + "#444B6A", + "#787C99", + "#A9B1D6", + "#CBCCD1", + "#D5D6DB", + ]), + red: colorRamp(chroma("#C0CAF5")), + orange: colorRamp(chroma("#A9B1D6")), + yellow: colorRamp(chroma("#0DB9D7")), + green: colorRamp(chroma("#9ECE6A")), + cyan: colorRamp(chroma("#B4F9F8")), + blue: colorRamp(chroma("#2AC3DE")), + violet: colorRamp(chroma("#BB9AF7")), + magenta: colorRamp(chroma("#F7768E")), +}); + +export const light = createColorScheme(`${name} Day`, true, { + neutral: chroma.scale([ + "#1A1B26", + "#1A1B26", + "#343B59", + "#4C505E", + "#9699A3", + "#DFE0E5", + "#CBCCD1", + "#D5D6DB", + ]), + red: colorRamp(chroma("#343B58")), + orange: colorRamp(chroma("#965027")), + yellow: colorRamp(chroma("#166775")), + green: colorRamp(chroma("#485E30")), + cyan: colorRamp(chroma("#3E6968")), + blue: colorRamp(chroma("#34548A")), + violet: colorRamp(chroma("#5A4A78")), + magenta: colorRamp(chroma("#8C4351")), +}); diff --git a/styles/src/themes/internal/twilight.ts b/styles/src/themes/internal/twilight.ts new file mode 100644 index 0000000000..98e83588ac --- /dev/null +++ b/styles/src/themes/internal/twilight.ts @@ -0,0 +1,28 @@ +import chroma from "chroma-js"; +import { colorRamp, createColorScheme } from "../common/ramps"; + +const name = "Twilight"; +const author = "David Hart (https://github.com/hartbit)"; +const url = ""; + +// `name-[light|dark]`, isLight, color ramps +export const dark = createColorScheme(`${name}`, false, { + neutral: chroma.scale([ + "#1e1e1e", + "#323537", + "#464b50", + "#5f5a60", + "#838184", + "#a7a7a7", + "#c3c3c3", + "#ffffff", + ]), + red: colorRamp(chroma("#cf6a4c")), + orange: colorRamp(chroma("#cda869")), + yellow: colorRamp(chroma("#f9ee98")), + green: colorRamp(chroma("#8f9d6a")), + cyan: colorRamp(chroma("#afc4db")), + blue: colorRamp(chroma("#7587a6")), + violet: colorRamp(chroma("#9b859d")), + magenta: colorRamp(chroma("#9b703f")), +}); diff --git a/styles/src/themes/internal/zed-pro.ts b/styles/src/themes/internal/zed-pro.ts index 466db7a03d..aa91f76c22 100644 --- a/styles/src/themes/internal/zed-pro.ts +++ b/styles/src/themes/internal/zed-pro.ts @@ -1,7 +1,9 @@ import chroma from "chroma-js"; import { colorRamp, createColorScheme } from "../common/ramps"; -const name = "zed-pro"; +const name = "Zed Pro"; +const author = "Nate Butler" +const url = "https://github.com/iamnbutler" const ramps = { neutral: chroma @@ -26,5 +28,5 @@ const ramps = { magenta: colorRamp(chroma("#DE9AB8")), }; -export const dark = createColorScheme(`${name}-dark`, false, ramps); -export const light = createColorScheme(`${name}-light`, true, ramps); +export const dark = createColorScheme(`${name} Dark`, false, ramps); +export const light = createColorScheme(`${name} Light`, true, ramps); diff --git a/styles/src/themes/internal/zenburn.ts b/styles/src/themes/internal/zenburn.ts new file mode 100644 index 0000000000..76692be270 --- /dev/null +++ b/styles/src/themes/internal/zenburn.ts @@ -0,0 +1,28 @@ +import chroma from "chroma-js"; +import { colorRamp, createColorScheme } from "../common/ramps"; + +const name = "Zenburn"; +const author = "elnawe"; +const url = ""; + +// `name-[light|dark]`, isLight, color ramps +export const dark = createColorScheme(`${name}`, false, { + neutral: chroma.scale([ + "#383838", + "#404040", + "#606060", + "#6f6f6f", + "#808080", + "#dcdccc", + "#c0c0c0", + "#ffffff", + ]), + red: colorRamp(chroma("#dca3a3")), + orange: colorRamp(chroma("#dfaf8f")), + yellow: colorRamp(chroma("#e0cf9f")), + green: colorRamp(chroma("#5f7f5f")), + cyan: colorRamp(chroma("#93e0e3")), + blue: colorRamp(chroma("#7cb8bb")), + violet: colorRamp(chroma("#dc8cc3")), + magenta: colorRamp(chroma("#000000")), +});