Add multiple Zed themes

Nate Butler created 3 years ago

Add the following themes:
- Andromeda
- Brushtree Light & Dark
- Rose-pine
- Rose-pine-dawn
- Sandcastle dark
- Summercamp dark
- Summerfruit

Change summary

styles/src/themes/andromeda.ts      | 27 +++++++++++++++++++++++++++
styles/src/themes/brushtrees.ts     | 28 ++++++++++++++++++++++++++++
styles/src/themes/rose-pine-dawn.ts | 27 +++++++++++++++++++++++++++
styles/src/themes/rose-pine.ts      | 27 +++++++++++++++++++++++++++
styles/src/themes/sandcastle.ts     | 27 +++++++++++++++++++++++++++
styles/src/themes/summercamp.ts     | 27 +++++++++++++++++++++++++++
styles/src/themes/summerfruit.ts    | 28 ++++++++++++++++++++++++++++
7 files changed, 191 insertions(+)

Detailed changes

styles/src/themes/andromeda.ts

@@ -0,0 +1,27 @@
+import chroma from "chroma-js";
+import { colorRamp, createTheme } from "./common/base16";
+
+const name = "andromeda";
+
+const ramps = {
+  neutral: chroma.scale([
+    "#1E2025",
+    "#23262E",
+    "#292E38",
+    "#2E323C",
+    "#ACA8AE",
+    "#CBC9CF",
+    "#E1DDE4",
+    "#F7F7F8",
+  ]),
+  red: colorRamp(chroma("#F92672")),
+  orange: colorRamp(chroma("#F39C12")),
+  yellow: colorRamp(chroma("#FFE66D")),
+  green: colorRamp(chroma("#96E072")),
+  cyan: colorRamp(chroma("#00E8C6")),
+  blue: colorRamp(chroma("#0CA793")),
+  violet: colorRamp(chroma("#8A3FA6")),
+  magenta: colorRamp(chroma("#C74DED")),
+};
+
+export const dark = createTheme(`${name}`, false, ramps);

styles/src/themes/brushtrees.ts

@@ -0,0 +1,28 @@
+import chroma from "chroma-js";
+import { colorRamp, createTheme } from "./common/base16";
+
+const name = "brush-tree";
+
+const ramps = {
+  neutral: chroma.scale([
+    "#485867",
+    "#5A6D7A",
+    "#6D828E",
+    "#8299A1",
+    "#98AFB5",
+    "#B0C5C8",
+    "#C9DBDC",
+    "#E3EFEF",
+  ]),
+  red: colorRamp(chroma("#b38686")),
+  orange: colorRamp(chroma("#d8bba2")),
+  yellow: colorRamp(chroma("#aab386")),
+  green: colorRamp(chroma("#87b386")),
+  cyan: colorRamp(chroma("#86b3b3")),
+  blue: colorRamp(chroma("#868cb3")),
+  violet: colorRamp(chroma("#b386b2")),
+  magenta: colorRamp(chroma("#b39f9f")),
+};
+
+export const dark = createTheme(`${name}-dark`, false, ramps);
+export const light = createTheme(`${name}-light`, true, ramps);

styles/src/themes/rose-pine-dawn.ts

@@ -0,0 +1,27 @@
+import chroma from "chroma-js";
+import { colorRamp, createTheme } from "./common/base16";
+
+const name = "rosé-pine-dawn";
+
+const ramps = {
+  neutral: chroma.scale([
+    "#26233a",
+    "#555169",
+    "#575279",
+    "#6e6a86",
+    "#9893a5",
+    "#f2e9de",
+    "#fffaf3",
+    "#faf4ed",
+  ]),
+  red: colorRamp(chroma("#1f1d2e")),
+  orange: colorRamp(chroma("#b4637a")),
+  yellow: colorRamp(chroma("#ea9d34")),
+  green: colorRamp(chroma("#d7827e")),
+  cyan: colorRamp(chroma("#286983")),
+  blue: colorRamp(chroma("#56949f")),
+  violet: colorRamp(chroma("#907aa9")),
+  magenta: colorRamp(chroma("#c5c3ce")),
+};
+
+export const light = createTheme(`${name}`, true, ramps);

styles/src/themes/rose-pine.ts

@@ -0,0 +1,27 @@
+import chroma from "chroma-js";
+import { colorRamp, createTheme } from "./common/base16";
+
+const name = "rosé-pine";
+
+const ramps = {
+  neutral: chroma.scale([
+    "#191724",
+    "#1f1d2e",
+    "#26233a",
+    "#555169",
+    "#6e6a86",
+    "#e0def4",
+    "#f0f0f3",
+    "#c5c3ce",
+  ]),
+  red: colorRamp(chroma("#e2e1e7")),
+  orange: colorRamp(chroma("#eb6f92")),
+  yellow: colorRamp(chroma("#f6c177")),
+  green: colorRamp(chroma("#ebbcba")),
+  cyan: colorRamp(chroma("#31748f")),
+  blue: colorRamp(chroma("#0CA793")),
+  violet: colorRamp(chroma("#8A3FA6")),
+  magenta: colorRamp(chroma("#C74DED")),
+};
+
+export const dark = createTheme(`${name}`, false, ramps);

styles/src/themes/sandcastle.ts

@@ -0,0 +1,27 @@
+import chroma from "chroma-js";
+import { colorRamp, createTheme } from "./common/base16";
+
+const name = "sandcastle";
+
+const ramps = {
+  neutral: chroma.scale([
+    "#282c34",
+    "#2c323b",
+    "#3e4451",
+    "#665c54",
+    "#928374",
+    "#a89984",
+    "#d5c4a1",
+    "#fdf4c1",
+  ]),
+  red: colorRamp(chroma("#83a598")),
+  orange: colorRamp(chroma("#a07e3b")),
+  yellow: colorRamp(chroma("#a07e3b")),
+  green: colorRamp(chroma("#528b8b")),
+  cyan: colorRamp(chroma("#83a598")),
+  blue: colorRamp(chroma("#83a598")),
+  violet: colorRamp(chroma("#d75f5f")),
+  magenta: colorRamp(chroma("#a87322")),
+};
+
+export const dark = createTheme(`${name}`, false, ramps);

styles/src/themes/summercamp.ts

@@ -0,0 +1,27 @@
+import chroma from "chroma-js";
+import { colorRamp, createTheme } from "./common/base16";
+
+const name = "summercamp";
+
+const ramps = {
+  neutral: chroma.scale([
+    "#1c1810",
+    "#2a261c",
+    "#3a3527",
+    "#3a3527",
+    "#5f5b45",
+    "#736e55",
+    "#bab696",
+    "#f8f5de",
+  ]),
+  red: colorRamp(chroma("#e35142")),
+  orange: colorRamp(chroma("#fba11b")),
+  yellow: colorRamp(chroma("#f2ff27")),
+  green: colorRamp(chroma("#5ceb5a")),
+  cyan: colorRamp(chroma("#5aebbc")),
+  blue: colorRamp(chroma("#489bf0")),
+  violet: colorRamp(chroma("#FF8080")),
+  magenta: colorRamp(chroma("#F69BE7")),
+};
+
+export const dark = createTheme(`${name}`, false, ramps);

styles/src/themes/summerfruit.ts

@@ -0,0 +1,28 @@
+import chroma from "chroma-js";
+import { colorRamp, createTheme } from "./common/base16";
+
+const name = "summerfruit";
+
+const ramps = {
+  neutral: chroma.scale([
+    "#151515",
+    "#202020",
+    "#303030",
+    "#505050",
+    "#B0B0B0",
+    "#D0D0D0",
+    "#E0E0E0",
+    "#FFFFFF",
+  ]),
+  red: colorRamp(chroma("#FF0086")),
+  orange: colorRamp(chroma("#FD8900")),
+  yellow: colorRamp(chroma("#ABA800")),
+  green: colorRamp(chroma("#00C918")),
+  cyan: colorRamp(chroma("#1FAAAA")),
+  blue: colorRamp(chroma("#3777E6")),
+  violet: colorRamp(chroma("#AD00A1")),
+  magenta: colorRamp(chroma("#CC6633")),
+};
+
+export const dark = createTheme(`${name}-dark`, false, ramps);
+export const light = createTheme(`${name}-light`, true, ramps);