@hex-core/tokens

import { defaultTheme, midnightTheme, emberTheme } from "@hex-core/tokens";
import type { Theme } from "@hex-core/registry";

const t: Theme = defaultTheme; // strict; tokens align with @hex-core/registry@^0.3.2

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

console.log(defaultTheme.tokens.light.primary);
// → { value: "222 25% 18%", type: "color" }

function themeToCss(theme: Theme): string;

import { themeToCss, defaultTheme } from "@hex-core/tokens";

const css = themeToCss(defaultTheme);
// → "@layer base { :root { --background: 210 20% 98%; ... } .dark { --background: 240 10% 4%; ... } }"

function themeToScopedRuntimeCss(theme: Theme, options?: {
	mode?: "light" | "dark";
	scope?: string;
}): string;

import { themeToScopedRuntimeCss, defaultTheme } from "@hex-core/tokens";

const css = themeToScopedRuntimeCss(defaultTheme, {
	mode: "dark",
	scope: ".studio-canvas",
});
// → ".studio-canvas.dark { --primary: 0 0% 98%; --color-primary: hsl(0 0% 98%); ... }"

function themeToTailwindConfig(theme: Theme): Record<string, Record<string, string>>;

import { themeToTailwindConfig, defaultTheme } from "@hex-core/tokens";

export default {
	content: ["./src/**/*.{ts,tsx}"],
	theme: { extend: { ...themeToTailwindConfig(defaultTheme) } },
};

function generateGlobalsCss(theme: Theme, options?: {
	target?: "v3" | "v4";  // defaults to "v3"
}): string;

import { generateGlobalsCss, defaultTheme } from "@hex-core/tokens";
import { writeFileSync } from "node:fs";

// Tailwind v4 (recommended for new projects).
writeFileSync("./globals.css", generateGlobalsCss(defaultTheme, { target: "v4" }));

// Tailwind v3 (default — emits @tailwind directives + @layer base).
writeFileSync("./globals.v3.css", generateGlobalsCss(defaultTheme));

function getTheme(name: string): Theme | undefined;
function listThemes(): Array<{ name: string; displayName: string; description: string }>;

import { getTheme, listThemes } from "@hex-core/tokens";

const theme = getTheme("midnight") ?? getTheme("default");
console.log(listThemes().map((t) => t.name));
// → ["default", "midnight", "ember"]

function themeToFlatJson(theme: Theme, mode?: "light" | "dark"): Record<string, string>;

import { themeToFlatJson, defaultTheme } from "@hex-core/tokens";

const flat = themeToFlatJson(defaultTheme, "light");
console.log(flat["--primary"]);    // → "222 25% 18%"
console.log(flat["--radius"]);     // → "0.375rem"

function deriveForegroundFor(bgValue: string, opts?: DeriveForegroundOptions): ColorToken;
function deriveDarkFromLight(light: TokenSet, opts?: DeriveDarkOptions): TokenSet;
function deriveSecondaryFromPrimary(primaryValue: string, opts?: DeriveSecondaryOptions): ColorToken;
function colorInputToTokenValue(input: string): string | null;
function contrastRatio(fgValue: string, bgValue: string): number;
function tokenLuminance(value: string): number;

import {
	defaultTheme,
	deriveDarkFromLight,
	deriveForegroundFor,
	deriveSecondaryFromPrimary,
	colorInputToTokenValue,
} from "@hex-core/tokens";

// User pastes a hex from Figma → snapped to the canonical token shape.
const primary = colorInputToTokenValue("#0F62FE"); // "219 99.2% 52.7%"

// Pair the primary with an AA-contrast foreground.
const fg = deriveForegroundFor(primary!).value;

// Build the secondary fill that lives next to the primary.
const secondary = deriveSecondaryFromPrimary(primary!);

// Ship a coherent dark-mode set without authoring it manually.
const darkTokens = deriveDarkFromLight(defaultTheme.tokens.light);

interface TokenSetSeeds {
	primary: string;        // HSL triplet, brand color
	foreground: string;     // page text default
	background: string;     // page canvas
	destructive: string;    // error / delete CTA
	radius: string;         // rem string, e.g. "0.625rem"
}

function buildTokenSet(seeds: TokenSetSeeds, mode: "light" | "dark"): TokenSet;

import { buildTokenSet } from "@hex-core/tokens";

const lightTokens = buildTokenSet(
	{
		primary: "217 100% 53%",
		foreground: "240 10% 3.9%",
		background: "0 0% 100%",
		destructive: "0 84% 60%",
		radius: "0.625rem",
	},
	"light",
);
console.log(Object.keys(lightTokens).length); // 20 (19 color slots + radius)

import type { SemanticTokenSet } from "@hex-core/registry";

declare const defaultSemanticTokens: SemanticTokenSet;
function resolveSemanticToken(reference: string, tokenSet: TokenSet): TokenValue | null;

import { defaultSemanticTokens, defaultTheme, resolveSemanticToken } from "@hex-core/tokens";

const entry = defaultSemanticTokens["button.destructive.bg"];
console.log(entry.useWhen);
// → "irreversible actions: delete, archive, deactivate, leave, force-quit"

const resolved = resolveSemanticToken(entry.value, defaultTheme.tokens.light);
console.log(resolved?.value); // → "0 65% 43%"

// Six rotating chart-series colors per mode, accessed as CSS variables:
//   var(--chart-1, var(--primary))    // first series, falls back to primary
//   var(--chart-2, var(--primary))    // second series
//   ... through var(--chart-6, var(--primary))
//
// Each entry is a regular ColorToken in defaultTheme.tokens.{light,dark}:
defaultTheme.tokens.light["chart-1"]; // { value: "12 76% 61%", type: "color" }
defaultTheme.tokens.dark["chart-1"];  // dark-mode counterpart

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

// Inspect the six rotating series colors
for (let i = 1; i <= 6; i++) {
	const key = `chart-${i}` as const;
	console.log(key, defaultTheme.tokens.light[key]?.value);
}

// In CSS, prefer the variable form so theme overrides cascade:
// .my-chart-bar:nth-child(1) { fill: var(--chart-1, var(--primary)); }
// .my-chart-bar:nth-child(2) { fill: var(--chart-2, var(--primary)); }

import type { TokenValue } from "@hex-core/registry";

declare const sharedTokens: Record<string, TokenValue>;

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

const myTheme: Theme = {
	...defaultTheme,
	name: "brand",
	tokens: {
		light: { ...sharedTokens, /* color overrides */ },
		dark:  { ...sharedTokens, /* color overrides */ },
	},
};

export const RADIUS_PRESETS = {
	sharp: "0.25rem",
	balanced: "0.625rem",
	soft: "0.875rem",
} as const;
export type RadiusPreset = keyof typeof RADIUS_PRESETS;

export const COLOR_MODE_BANDS = {
	light: { surface: 0.959, framing: 0.9 },
	dark: { surface: 0.159, framing: 0.16 },
} as const;
export type ColorMode = keyof typeof COLOR_MODE_BANDS;

import { RADIUS_PRESETS, COLOR_MODE_BANDS } from "@hex-core/tokens";

console.log(Object.keys(RADIUS_PRESETS)); // ["sharp", "balanced", "soft"]
console.log(COLOR_MODE_BANDS.light.surface); // 0.959

import { themeToScopedRuntimeCss, midnightTheme } from "@hex-core/tokens";

const css = themeToScopedRuntimeCss(midnightTheme, {
	mode: "light",
	scope: "[data-studio-canvas]",
});

// In a Server Component:
return <style>{css}</style>;

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

export const brandTheme: Theme = {
	...defaultTheme,
	name: "brand",
	tokens: {
		...defaultTheme.tokens,
		light: {
			...defaultTheme.tokens.light,
			primary: { value: "12 100% 50%", type: "color" },
		},
	},
};