themes lol

2026-08-23 17:17:04 -07:00
parent 0a7b5fa00f
commit 6f575d6a23
79 changed files with 13108 additions and 278 deletions
@@ -0,0 +1,137 @@
+import { msg } from "@lingui/core/macro";
+import type { ThemeManifest } from "../types";
+
+/* Bioluminescent sea ramps for all eight accents. Declared in JS (not
+   theme.css) so Mantine regenerates every derived variant var (-light rgba,
+   -outline, autoContrast picks) from the retuned shades, whichever accent
+   the user selects. */
+const oceanColors = {
+  // plankton blue
+  blue: [
+    "#e3f7fd",
+    "#c6eefb",
+    "#9ce2f8",
+    "#6dd2f2",
+    "#45c3ec",
+    "#27b3e2",
+    "#1897c7",
+    "#147ba6",
+    "#106284",
+    "#0c4c67",
+  ],
+  // kelp green
+  green: [
+    "#e8f8ee",
+    "#cdefdb",
+    "#a8e3bf",
+    "#80d5a1",
+    "#5cc686",
+    "#3eb56e",
+    "#2f9c5c",
+    "#27814d",
+    "#1f683e",
+    "#185231",
+  ],
+  // sea-sparkle phosphor
+  lime: [
+    "#f2fbe3",
+    "#e2f6c4",
+    "#ccee9d",
+    "#b3e474",
+    "#9cda50",
+    "#86ce32",
+    "#6fb51f",
+    "#5c9718",
+    "#4a7a12",
+    "#3a600e",
+  ],
+  // siphonophore crimson
+  red: [
+    "#fdeef0",
+    "#fad8dc",
+    "#f6b6be",
+    "#f18f9c",
+    "#ec6c7e",
+    "#e54d64",
+    "#d1344e",
+    "#b02840",
+    "#8f2034",
+    "#701929",
+  ],
+  // anglerfish gold
+  yellow: [
+    "#fdf8e2",
+    "#fbefbe",
+    "#f8e392",
+    "#f4d363",
+    "#efc43c",
+    "#e8b31d",
+    "#ce9a10",
+    "#ad800c",
+    "#8c6709",
+    "#6d5007",
+  ],
+  // amber lure
+  orange: [
+    "#fef2e5",
+    "#fce2c6",
+    "#f9cb9c",
+    "#f5b06e",
+    "#f09746",
+    "#ea8127",
+    "#d16a15",
+    "#af5810",
+    "#8d460c",
+    "#6e3709",
+  ],
+  // medusa violet
+  grape: [
+    "#f5f0fd",
+    "#e8dcfa",
+    "#d4c0f5",
+    "#bd9fee",
+    "#a781e6",
+    "#9268dc",
+    "#7e4fca",
+    "#6a3fae",
+    "#56328e",
+    "#43276f",
+  ],
+  // jelly pink
+  pink: [
+    "#fdeef6",
+    "#fbd8ea",
+    "#f7b5d8",
+    "#f28dc2",
+    "#ec69ae",
+    "#e54c9c",
+    "#d13487",
+    "#b02871",
+    "#8f215c",
+    "#701a48",
+  ],
+} as const;
+
+const manifest: ThemeManifest = {
+  id: "ocean",
+  label: msg`Deep Sea`,
+  colorSchemes: "both",
+  fontLinks: [
+    "https://fonts.googleapis.com/css2?family=Comfortaa:wght@500;600;700&family=Figtree:wght@400;500;600;700&display=swap",
+  ],
+  chromeColors: {
+    light: { base: "#eaf6f6", dimmed: "#c3e2df" },
+    dark: { base: "#052430", dimmed: "#03141d" },
+  },
+  mantine: {
+    // Bright bioluminescent fills in the dark (shade 5), deeper sea tones in
+    // the shallows (shade 6); bright fills (gold, phosphor, plankton) take
+    // dark text via autoContrast.
+    primaryShade: { light: 6, dark: 5 },
+    autoContrast: true,
+    luminanceThreshold: 0.3,
+    colors: oceanColors,
+  },
+};
+
+export default manifest;