@hex-core/themes

import { premiumThemes } from "@hex-core/themes";
import type { Theme } from "@hex-core/registry";

declare const premiumThemes: Record<string, Theme>;

import { premiumThemes } from "@hex-core/themes";

console.log(Object.keys(premiumThemes).length); // 73
console.log(Object.keys(premiumThemes).slice(0, 6));
// → ["midnight", "ember", "airbnb", "airtable", "apple", "binance"]

function listPremiumThemes(): Array<{
	name: string;
	displayName: string;
	description: string;
	category?: ThemeCategory;
	tags?: string[];
	brand?: string;
}>;

import { listPremiumThemes } from "@hex-core/themes";

const all = listPremiumThemes();
console.log(all.length); // 73

for (const t of all.filter((x) => x.category === "fintech")) {
	console.log(t.name, "—", t.brand ?? "(no brand)");
}
// → binance — Binance
// → coinbase — Coinbase
// → ...

function getPremiumTheme(name: string): Theme | undefined;

import { getPremiumTheme } from "@hex-core/themes";
import { defaultTheme } from "@hex-core/tokens";

const theme = getPremiumTheme(slug) ?? defaultTheme;

import {
	// AI (12)
	claudeTheme, cohereTheme, elevenlabsTheme, minimaxTheme,
	mistralTheme, ollamaTheme, opencodeTheme, replicateTheme,
	runwaymlTheme, togetherTheme, voltagentTheme, xTheme,
	// dev-tools (7)
	cursorTheme, expoTheme, lovableTheme, raycastTheme,
	superhumanTheme, vercelTheme, warpTheme,
	// backend (8)
	clickhouseTheme, composioTheme, hashicorpTheme, mongodbTheme,
	posthogTheme, sanityTheme, sentryTheme, supabaseTheme,
	// productivity (8)
	calTheme, intercomTheme, linearTheme, mintlifyTheme,
	notionTheme, resendTheme, slackTheme, zapierTheme,
	// design (6)
	airtableTheme, clayTheme, figmaTheme, framerTheme, miroTheme, webflowTheme,
	// fintech (7)
	binanceTheme, coinbaseTheme, krakenTheme, mastercardTheme,
	revolutTheme, stripeTheme, wiseTheme,
	// ecommerce (5)
	airbnbTheme, metaTheme, nikeTheme, shopifyTheme, starbucksTheme,
	// media (11)
	appleTheme, ibmTheme, nvidiaTheme, pinterestTheme, playstationTheme,
	spacexTheme, spotifyTheme, thevergeTheme, uberTheme, vodafoneTheme, wiredTheme,
	// automotive (7)
	bmwTheme, bmwMTheme, bugattiTheme, ferrariTheme, lamborghiniTheme,
	renaultTheme, teslaTheme,
} from "@hex-core/themes";

// Each export is a fully-validated Theme — same shape as defaultTheme.
import { themeToScopedRuntimeCss } from "@hex-core/tokens";
const css = themeToScopedRuntimeCss(teslaTheme, { mode: "dark" });

import { stripeTheme } from "@hex-core/themes";
import { themeToScopedRuntimeCss } from "@hex-core/tokens";

// Apply the Stripe palette inside one section without rebuilding Tailwind.
export function StripeSection({ children }: { children: React.ReactNode }) {
	const css = themeToScopedRuntimeCss(stripeTheme, {
		scope: "[data-theme=stripe]",
		mode: "light",
	});
	return (
		<>
			<style>{css}</style>
			<section data-theme="stripe">{children}</section>
		</>
	);
}

interface SearchThemesInput {
	query?: string;            // case-insensitive substring on name / displayName / description
	category?: ThemeCategory;  // one of "ai" | "dev-tools" | "backend" | ...
	tags?: string[];           // intersection match (all tags must be present)
}

function searchThemes(input?: SearchThemesInput): Theme[];

import { searchThemes } from "@hex-core/themes";

const fintech = searchThemes({ category: "fintech" });
// → [binanceTheme, coinbaseTheme, krakenTheme, mastercardTheme, ...]

const dark = searchThemes({ query: "dark", tags: ["minimal"] });

interface ThemeOverrides {
	name?: string; displayName?: string; description?: string;
	brand?: string; category?: Theme["category"]; tags?: string[];
	designBrief?: string;
	attribution?: Theme["attribution"]; // FULL replacement, not deep-merged
	tokens?: { light?: Theme["tokens"]["light"]; dark?: Theme["tokens"]["dark"]; };
}

function extendTheme(base: Theme, overrides?: ThemeOverrides): Theme;

import { teslaTheme, extendTheme } from "@hex-core/themes";

const myTesla = extendTheme(teslaTheme, {
	name: "my-tesla",
	displayName: "My Tesla",
	tokens: {
		light: { primary: { value: "0 100% 50%", type: "color" } },
	},
});

function loadThemeBrief(slug: string): Promise<string | undefined>;

import { loadThemeBrief } from "@hex-core/themes";

const brief = await loadThemeBrief("stripe");
if (brief) {
	console.log(brief.slice(0, 200) + "…");
	// "# Design System Inspired by Stripe\n\n## 1. Visual Theme & Atmosphere\n\nStripe's website is the gold standard of fintech design …"
}

import type { ThemeCategory, Theme } from "@hex-core/registry";

declare const presetsByCategory: Record<ThemeCategory, readonly Theme[]>;
declare const presetSlugs: readonly string[];        // 71 brand-derived slugs
declare const allThemeSlugs: readonly string[];      // 73: midnight + ember + 71 brands
declare const voltagentPresets: Record<string, Theme>; // slug → preset

import { presetsByCategory } from "@hex-core/themes";

for (const [category, themes] of Object.entries(presetsByCategory)) {
	console.log(category, themes.map((t) => t.name).join(", "));
}
// → ai claude, cohere, elevenlabs, …
// → fintech binance, coinbase, kraken, mastercard, revolut, stripe, wise
// → automotive bmw, bmw-m, bugatti, ferrari, lamborghini, renault, tesla

import type { ThemeOverrides } from "@hex-core/themes";

interface ThemeOverrides {
	name?: string;
	displayName?: string;
	description?: string;
	brand?: string;
	category?: Theme["category"];
	tags?: string[];
	designBrief?: string;
	attribution?: Theme["attribution"];
	tokens?: {
		light?: Theme["tokens"]["light"];
		dark?: Theme["tokens"]["dark"];
	};
}

import type { ThemeOverrides } from "@hex-core/themes";

const overrides: ThemeOverrides = {
	name: "brand",
	displayName: "Brand",
	tokens: { light: { primary: { value: "12 100% 50%", type: "color" } } },
};

import { listThemes } from "@hex-core/tokens";
import { listPremiumThemes } from "@hex-core/themes";

const all = [...listThemes(), ...listPremiumThemes()];
const byName = new Map(all.map((entry) => [entry.name, entry]));

export function ThemePicker({ value, onChange }: { value: string; onChange: (n: string) => void }) {
	return (
		<select value={value} onChange={(e) => onChange(e.target.value)}>
			{[...byName.keys()].map((n) => (
				<option key={n} value={n}>{n}</option>
			))}
		</select>
	);
}

import { defaultTheme, getTheme } from "@hex-core/tokens";
import { getPremiumTheme } from "@hex-core/themes";
import type { Theme } from "@hex-core/registry";

export function resolveTheme(name: string): Theme {
	const builtIn = getTheme(name);
	if (builtIn) return builtIn;
	return getPremiumTheme(name) ?? defaultTheme;
}