138 lines
2.5 KiB
TypeScript
138 lines
2.5 KiB
TypeScript
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;
|