7a68cafe35
This commit includes the temporary Next.js build cache files, public brand logos, and project configuration added in this change.
321 lines
No EOL
10 KiB
TypeScript
321 lines
No EOL
10 KiB
TypeScript
/**
|
|
* WFDASH theme registry.
|
|
*
|
|
* Base themes inspired by real product surfaces. Each theme is just a
|
|
* set of OKLCH tokens (already defined in src/styles/themes.css via the
|
|
* `data-theme="<id>"` selector) and a pair of font CSS-var names.
|
|
*
|
|
* The picker just flips `data-theme` on <html> and `class` (`.dark` for dark
|
|
* mode). No inline-style overrides, no custom-theme builder, no
|
|
* `!important` theme-specific component rules.
|
|
*
|
|
* If a theme doesn't define a `.dark` variant, it falls back to the
|
|
* `data-theme="<id>"` light block — light mode is the default.
|
|
*/
|
|
|
|
import type { ThemeDefinition } from "@/lib/theme-types";
|
|
|
|
export const THEMES: ThemeDefinition[] = [
|
|
{
|
|
id: "crisp",
|
|
label: "Crisp",
|
|
tagline: "Calm, neutral, default. Easiest to ship.",
|
|
accent: "#4C96D7",
|
|
accentSoft: "#DCE9F6",
|
|
accentOnDark: "#7AB7E8",
|
|
surface: "#F8FAFC",
|
|
surfaceDark: "#0B1220",
|
|
ink: "#0F172A",
|
|
inkDark: "#E6ECF5",
|
|
fontHeading: "var(--font-inter)",
|
|
fontBody: "var(--font-inter)",
|
|
radius: "0.625rem",
|
|
reference: "Default",
|
|
category: "standard",
|
|
},
|
|
{
|
|
id: "airbnb",
|
|
label: "Airbnb",
|
|
tagline: "Warm white + Rausch. Photography-led, restrained copy.",
|
|
accent: "#FF385C",
|
|
accentSoft: "#FFE3E8",
|
|
accentOnDark: "#FF6B82",
|
|
surface: "#FFFFFF",
|
|
surfaceDark: "#161617",
|
|
ink: "#222222",
|
|
inkDark: "#F7F7F7",
|
|
fontHeading: "var(--font-inter)",
|
|
fontBody: "var(--font-inter)",
|
|
radius: "0.5rem",
|
|
reference: "Airbnb",
|
|
category: "standard",
|
|
},
|
|
{
|
|
id: "airtable",
|
|
label: "Airtable",
|
|
tagline: "Soft blue + cream. Spreadsheet-friendly, calm density.",
|
|
accent: "#3B82F6",
|
|
accentSoft: "#DBEAFE",
|
|
accentOnDark: "#60A5FA",
|
|
surface: "#FAF8F2",
|
|
surfaceDark: "#1B1D1F",
|
|
ink: "#1F2937",
|
|
inkDark: "#E5E7EB",
|
|
fontHeading: "var(--font-inter)",
|
|
fontBody: "var(--font-inter)",
|
|
radius: "0.375rem",
|
|
reference: "Airtable",
|
|
category: "standard",
|
|
},
|
|
{
|
|
id: "cursor",
|
|
label: "Cursor",
|
|
tagline: "Deep dark + violet. Editor at night, dev-tool energy.",
|
|
accent: "#A78BFA",
|
|
accentSoft: "#2D2640",
|
|
accentOnDark: "#C4B5FD",
|
|
surface: "#0E0E12",
|
|
surfaceDark: "#0E0E12",
|
|
ink: "#E7E7EA",
|
|
inkDark: "#E7E7EA",
|
|
fontHeading: "var(--font-inter)",
|
|
fontBody: "var(--font-inter)",
|
|
radius: "0.5rem",
|
|
reference: "Cursor",
|
|
category: "dark",
|
|
},
|
|
{
|
|
id: "supabase",
|
|
label: "Supabase",
|
|
tagline: "Deep green-black. Dense panels, generous data surface.",
|
|
accent: "#3ECF8E",
|
|
accentSoft: "#0E2A1D",
|
|
accentOnDark: "#3ECF8E",
|
|
surface: "#1C1C1C",
|
|
surfaceDark: "#1C1C1C",
|
|
ink: "#EDEDED",
|
|
inkDark: "#EDEDED",
|
|
fontHeading: "var(--font-inter)",
|
|
fontBody: "var(--font-inter)",
|
|
radius: "0.5rem",
|
|
reference: "Supabase",
|
|
category: "dark",
|
|
},
|
|
/* ─────────────────────────────────────────────────────────────────────
|
|
* Brand-inspired themes (added 2026-07)
|
|
* Revolut / NVIDIA / Ant / Energetic / Artistic / MiniMax /
|
|
* Cosmic / Neon — all token-driven, no inline-style fights.
|
|
* ─────────────────────────────────────────────────────────────────── */
|
|
{
|
|
id: "revolut",
|
|
label: "Revolut",
|
|
tagline: "Soft off-black canvas + electric mint. Premium fintech.",
|
|
accent: "#0AE2A2",
|
|
accentSoft: "#0D2B22",
|
|
accentOnDark: "#3FF1B9",
|
|
surface: "#0E0F12",
|
|
surfaceDark: "#0E0F12",
|
|
ink: "#F5F6F8",
|
|
inkDark: "#F5F6F8",
|
|
fontHeading: "var(--font-inter)",
|
|
fontBody: "var(--font-inter)",
|
|
radius: "0.75rem",
|
|
reference: "Revolut",
|
|
category: "dark",
|
|
},
|
|
{
|
|
id: "nvidia",
|
|
label: "NVIDIA",
|
|
tagline: "Pure black + signature green. Engineering precision.",
|
|
accent: "#76B900",
|
|
accentSoft: "#0E1A06",
|
|
accentOnDark: "#9CE02A",
|
|
surface: "#0A0A0A",
|
|
surfaceDark: "#0A0A0A",
|
|
ink: "#EDEDED",
|
|
inkDark: "#EDEDED",
|
|
fontHeading: "var(--font-inter)",
|
|
fontBody: "var(--font-inter)",
|
|
radius: "0.375rem",
|
|
reference: "NVIDIA",
|
|
category: "dark",
|
|
},
|
|
{
|
|
id: "ant",
|
|
label: "Ant",
|
|
tagline: "Cool grey + Ant blue. Calm enterprise density.",
|
|
accent: "#1677FF",
|
|
accentSoft: "#E6F0FF",
|
|
accentOnDark: "#4096FF",
|
|
surface: "#F5F7FA",
|
|
surfaceDark: "#1A1D23",
|
|
ink: "#1F2329",
|
|
inkDark: "#E8EAED",
|
|
fontHeading: "var(--font-inter)",
|
|
fontBody: "var(--font-inter)",
|
|
radius: "0.375rem",
|
|
reference: "Ant Group",
|
|
category: "standard",
|
|
},
|
|
{
|
|
id: "energetic",
|
|
label: "Energetic",
|
|
tagline: "Bone-white + atomic orange. Sports broadcast energy.",
|
|
accent: "#FF4D2E",
|
|
accentSoft: "#FFE4DE",
|
|
accentOnDark: "#FF7A5C",
|
|
surface: "#FAFAF7",
|
|
surfaceDark: "#13110E",
|
|
ink: "#161514",
|
|
inkDark: "#F2EFE9",
|
|
fontHeading: "var(--font-inter)",
|
|
fontBody: "var(--font-inter)",
|
|
radius: "0.5rem",
|
|
reference: "Custom",
|
|
category: "standard",
|
|
},
|
|
{
|
|
id: "artistic",
|
|
label: "Artistic",
|
|
tagline: "Warm cream + ink + magenta. Editorial gallery feel.",
|
|
accent: "#E63A8E",
|
|
accentSoft: "#FCE4F0",
|
|
accentOnDark: "#F269AE",
|
|
surface: "#F7F2E9",
|
|
surfaceDark: "#1A1714",
|
|
ink: "#1B1815",
|
|
inkDark: "#F2EDE3",
|
|
fontHeading: "var(--font-inter)",
|
|
fontBody: "var(--font-inter)",
|
|
radius: "0.5rem",
|
|
reference: "Custom",
|
|
category: "standard",
|
|
},
|
|
{
|
|
id: "MiniMax",
|
|
label: "MiniMax",
|
|
tagline: "Cool charcoal + electric violet. Modern AI product surface.",
|
|
accent: "#7C5CFF",
|
|
accentSoft: "#1F1A33",
|
|
accentOnDark: "#A48BFF",
|
|
surface: "#111114",
|
|
surfaceDark: "#111114",
|
|
ink: "#ECECF1",
|
|
inkDark: "#ECECF1",
|
|
fontHeading: "var(--font-inter)",
|
|
fontBody: "var(--font-inter)",
|
|
radius: "0.625rem",
|
|
reference: "MiniMax",
|
|
category: "dark",
|
|
},
|
|
{
|
|
id: "cosmic",
|
|
label: "Cosmic",
|
|
tagline: "Deep indigo + electric cyan. Futuristic, immersive.",
|
|
accent: "#22D3EE",
|
|
accentSoft: "#0E2236",
|
|
accentOnDark: "#5AE8F7",
|
|
surface: "#0B1023",
|
|
surfaceDark: "#0B1023",
|
|
ink: "#E2E8F0",
|
|
inkDark: "#E2E8F0",
|
|
fontHeading: "var(--font-inter)",
|
|
fontBody: "var(--font-inter)",
|
|
radius: "0.75rem",
|
|
reference: "Custom",
|
|
category: "dark",
|
|
},
|
|
{
|
|
id: "neon",
|
|
label: "Neon",
|
|
tagline: "Pure black + magenta / cyan double-flourish. Synthwave.",
|
|
accent: "#FF2D92",
|
|
accentSoft: "#1A0612",
|
|
accentOnDark: "#FF5DAB",
|
|
surface: "#07030C",
|
|
surfaceDark: "#07030C",
|
|
ink: "#F2EFFF",
|
|
inkDark: "#F2EFFF",
|
|
fontHeading: "var(--font-inter)",
|
|
fontBody: "var(--font-inter)",
|
|
radius: "0.5rem",
|
|
reference: "Custom",
|
|
category: "dark",
|
|
},
|
|
/* ─────────────────────────────────────────────────────────────────────
|
|
* Brand theme added 2026-07 — Tangerine. Vendor-supplied OKLCH tokens
|
|
* mapped onto the standard WFDash picker-card hex shape. Hex values
|
|
* here are picker-only (chip + chip-soft + dark-mode preview). The
|
|
* actual on-screen colours come from themes.css via data-theme="tangerine".
|
|
* ─────────────────────────────────────────────────────────────────── */
|
|
{
|
|
id: "tangerine",
|
|
label: "Tangerine",
|
|
tagline: "Warm tangerine + cool neutral. Friendly operator surface.",
|
|
accent: "#D26A2A",
|
|
accentSoft: "#FBE6D6",
|
|
accentOnDark: "#F4A465",
|
|
surface: "#ECEEF0",
|
|
surfaceDark: "#20222E",
|
|
ink: "#525252",
|
|
inkDark: "#EBEBEB",
|
|
fontHeading: "var(--font-inter)",
|
|
fontBody: "var(--font-inter)",
|
|
radius: "0.75rem",
|
|
reference: "Custom",
|
|
category: "standard",
|
|
},
|
|
/* ─────────────────────────────────────────────────────────────────────
|
|
* Lime — added 2026-07-21. Bright lime primary (#aff33e) on bone-white
|
|
* (light) / near-black slate (dark). Hex values here are picker-only;
|
|
* the on-screen tokens come from themes.css via data-theme="lime".
|
|
* ─────────────────────────────────────────────────────────────────── */
|
|
{
|
|
id: "lime",
|
|
label: "Lime",
|
|
tagline: "Fresh lime + clean neutrals. Bright, energetic surface.",
|
|
accent: "#aff33e",
|
|
accentSoft: "#E4FAB5",
|
|
accentOnDark: "#aff33e",
|
|
surface: "#fbfcf8",
|
|
surfaceDark: "#020617",
|
|
ink: "#0f172a",
|
|
inkDark: "#f8fafc",
|
|
fontHeading: "var(--font-inter)",
|
|
fontBody: "var(--font-inter)",
|
|
radius: "1rem",
|
|
reference: "Custom",
|
|
category: "standard",
|
|
},
|
|
/* ─────────────────────────────────────────────────────────────────────
|
|
* WFDASH — brand theme added 2026-07-26. Palette sampled directly from
|
|
* /public/wfdash-logo.png so the in-app shell reads as the same brand
|
|
* surface as the logo. Defined in src/styles/themes.css via
|
|
* `data-theme="wfdash"` (light + dark variants — dark mode matches the
|
|
* logo canvas exactly). Hex values here are picker-only; the on-screen
|
|
* tokens come from themes.css.
|
|
* ─────────────────────────────────────────────────────────────────── */
|
|
{
|
|
id: "wfdash",
|
|
label: "WFDASH",
|
|
tagline: "Brand theme. Logo navy + brand blue. The new default.",
|
|
accent: "#377DCF",
|
|
accentSoft: "#DDE9F7",
|
|
accentOnDark: "#7AB7E8",
|
|
surface: "#F2F5FB",
|
|
surfaceDark: "#080E1D",
|
|
ink: "#0F1A2E",
|
|
inkDark: "#E8EEF7",
|
|
fontHeading: "var(--font-inter)",
|
|
fontBody: "var(--font-inter)",
|
|
radius: "0.625rem",
|
|
reference: "WFDASH",
|
|
category: "standard",
|
|
},
|
|
];
|
|
|
|
export const DEFAULT_THEME_ID = "wfdash";
|
|
|
|
export function getThemeById(id: string | null | undefined): ThemeDefinition {
|
|
return THEMES.find((t) => t.id === id) ?? THEMES[0];
|
|
} |