Add a range of new themes as internal themes for testing

Nate Butler created 3 years ago

Change summary

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 ----------
styles/src/themes/internal/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 +++++++++
styles/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(-)

Detailed changes

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 <me@kons.ch>";
+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")),
+});

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 <Z5483Y@gmail.com>";
+const author = "Konstantin Pschera <me@kons.ch>";
+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([

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

styles/src/themes/internal/embers.ts 🔗

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

styles/src/themes/internal/gruvbox.ts → 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")),
-});
+});

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

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

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

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

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

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

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

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

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

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