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;