add more themes

willpinha · Oct 16, 2024 · 632edbd · 632edbd
1 parent 18ef81e
commit 632edbd
Show file tree

Hide file tree

Showing 5 changed files with 197 additions and 1 deletion.
diff --git a/app/themes/blue.ts b/app/themes/blue.ts
@@ -0,0 +1,48 @@
+import { createMantineTheme } from "~/lib/create-mantine-theme";
+import { Theme } from "~/lib/theme";
+
+export const blue: Theme = {
+	label: "🌊 Blue",
+	mantineTheme: createMantineTheme({
+		baseHue: 250,
+		baseSaturation: 30,
+		colors: {
+			primary: [
+				"#ecefff",
+				"#d5dafb",
+				"#a9b1f1",
+				"#7a87e9",
+				"#5362e1",
+				"#3a4bdd",
+				"#2c40dc",
+				"#1f32c4",
+				"#182cb0",
+				"#0a259c",
+			],
+			secondary: [
+				"#e1f8ff",
+				"#cbedff",
+				"#9ad7ff",
+				"#64c1ff",
+				"#3aaefe",
+				"#20a2fe",
+				"#099cff",
+				"#0088e4",
+				"#0079cd",
+				"#0068b6",
+			],
+			tertiary: [
+				"#ecf4ff",
+				"#dce4f5",
+				"#b9c7e2",
+				"#94a8d0",
+				"#748dc0",
+				"#5f7cb7",
+				"#5474b4",
+				"#44639f",
+				"#3a5890",
+				"#2c4b80",
+			],
+		},
+	}),
+};
diff --git a/app/themes/index.ts b/app/themes/index.ts
@@ -1,9 +1,13 @@
 import { ThemeName } from "~/lib/theme";
+import { blue } from "./blue";
 import { christmas } from "./christmas";
 import { dracula } from "./dracula";
 import { forest } from "./forest";
+import { pink } from "./pink";
+import { red } from "./red";
+import { yellow } from "./yellow";
 
-export const themes = { christmas, dracula, forest };
+export const themes = { christmas, dracula, forest, pink, yellow, red, blue };
 
 export const sortedThemeNames = Object.keys(themes)
 	.map((key) => key as ThemeName)

diff --git a/app/themes/pink.ts b/app/themes/pink.ts
@@ -0,0 +1,48 @@
+import { createMantineTheme } from "~/lib/create-mantine-theme";
+import { Theme } from "~/lib/theme";
+
+export const pink: Theme = {
+	label: "🌸 Pink",
+	mantineTheme: createMantineTheme({
+		baseHue: 300,
+		baseSaturation: 30,
+		colors: {
+			primary: [
+				"#ffe9ff",
+				"#fed1fd",
+				"#faa1f6",
+				"#f66ef1",
+				"#f243eb",
+				"#f028e9",
+				"#f018e8",
+				"#d609ce",
+				"#bf00b9",
+				"#a700a1",
+			],
+			secondary: [
+				"#ffe9f6",
+				"#ffd1e6",
+				"#faa1c9",
+				"#f66eab",
+				"#f24391",
+				"#f02981",
+				"#f01879",
+				"#d60867",
+				"#c0005c",
+				"#a9004f",
+			],
+			tertiary: [
+				"#faedff",
+				"#edd9f7",
+				"#d8b1ea",
+				"#c186dd",
+				"#ae62d2",
+				"#a34bcb",
+				"#9d3fc9",
+				"#8931b2",
+				"#7a2aa0",
+				"#6b218d",
+			],
+		},
+	}),
+};
diff --git a/app/themes/red.ts b/app/themes/red.ts
@@ -0,0 +1,48 @@
+import { createMantineTheme } from "~/lib/create-mantine-theme";
+import { Theme } from "~/lib/theme";
+
+export const red: Theme = {
+	label: "🌹 Red",
+	mantineTheme: createMantineTheme({
+		baseHue: 0,
+		baseSaturation: 30,
+		colors: {
+			primary: [
+				"#ffe8e9",
+				"#ffd1d1",
+				"#fba0a0",
+				"#f76d6d",
+				"#f44141",
+				"#f22625",
+				"#f21616",
+				"#d8070b",
+				"#c10007",
+				"#a90003",
+			],
+			secondary: [
+				"#fff0e4",
+				"#ffe0cf",
+				"#fac0a1",
+				"#f69e6e",
+				"#f28043",
+				"#f06e27",
+				"#f06418",
+				"#d6530c",
+				"#bf4906",
+				"#a73c00",
+			],
+			tertiary: [
+				"#ffeaec",
+				"#fcd4d7",
+				"#f4a7ac",
+				"#ec777e",
+				"#e64f57",
+				"#e3353f",
+				"#e22732",
+				"#c91a25",
+				"#b41220",
+				"#9e0419",
+			],
+		},
+	}),
+};
diff --git a/app/themes/yellow.ts b/app/themes/yellow.ts
@@ -0,0 +1,48 @@
+import { createMantineTheme } from "~/lib/create-mantine-theme";
+import { Theme } from "~/lib/theme";
+
+export const yellow: Theme = {
+	label: "🌻 Yellow",
+	mantineTheme: createMantineTheme({
+		baseHue: 60,
+		baseSaturation: 30,
+		colors: {
+			primary: [
+				"#fdfce4",
+				"#f8f6d3",
+				"#f0ecaa",
+				"#e7e17c",
+				"#e0d856",
+				"#dbd33e",
+				"#d9d02f",
+				"#c0b820",
+				"#aaa317",
+				"#928d03",
+			],
+			secondary: [
+				"#fff8e1",
+				"#ffefcb",
+				"#ffdd9a",
+				"#ffca64",
+				"#ffba38",
+				"#ffb01b",
+				"#ffab09",
+				"#e39500",
+				"#cb8400",
+				"#b07100",
+			],
+			tertiary: [
+				"#fff0e4",
+				"#ffe0cf",
+				"#fac0a1",
+				"#f69e6e",
+				"#f28043",
+				"#f06e27",
+				"#f06418",
+				"#d6530c",
+				"#bf4906",
+				"#a73c00",
+			],
+		},
+	}),
+};