@anvpx/motion-themes 0.0.0-stage → 0.1.0

package/dist/resolve.d.ts

@@ -0,0 +1,412 @@
+import type { ResolvedTheme } from "@anvpx/motion-schema";
+declare const TOKEN_FILES: {
+    readonly default: {
+        $description: string;
+        color: {
+            $type: string;
+            bg: {
+                $value: string;
+            };
+            bgEnd: {
+                $value: string;
+            };
+            glow: {
+                $value: string;
+            };
+            glow2: {
+                $value: string;
+            };
+            surface: {
+                $value: string;
+            };
+            card: {
+                $value: string;
+            };
+            divider: {
+                $value: string;
+            };
+            accentSoft: {
+                $value: string;
+            };
+            fg: {
+                $value: string;
+            };
+            muted: {
+                $value: string;
+            };
+            accent: {
+                $value: string;
+            };
+            accent2: {
+                $value: string;
+            };
+            onAccent: {
+                $value: string;
+            };
+            onAccent2: {
+                $value: string;
+            };
+            deep: {
+                $value: string;
+            };
+            deepEnd: {
+                $value: string;
+            };
+            onDeep: {
+                $value: string;
+            };
+            onDeepMuted: {
+                $value: string;
+            };
+        };
+        chart: {
+            $type: string;
+            "1": {
+                $value: string;
+            };
+            "2": {
+                $value: string;
+            };
+            "3": {
+                $value: string;
+            };
+            "4": {
+                $value: string;
+            };
+            "5": {
+                $value: string;
+            };
+            "6": {
+                $value: string;
+            };
+            "7": {
+                $value: string;
+            };
+            "8": {
+                $value: string;
+            };
+        };
+        font: {
+            $type: string;
+            sans: {
+                $value: string[];
+            };
+            mono: {
+                $value: string[];
+            };
+        };
+        fontSize: {
+            $type: string;
+            sm: {
+                $value: string;
+            };
+            md: {
+                $value: string;
+            };
+            lg: {
+                $value: string;
+            };
+            xl: {
+                $value: string;
+            };
+            title: {
+                $value: string;
+            };
+            display: {
+                $value: string;
+            };
+            heroSm: {
+                $value: string;
+            };
+            heroMd: {
+                $value: string;
+            };
+            hero: {
+                $value: string;
+            };
+        };
+        spacing: {
+            $type: string;
+            xs: {
+                $value: string;
+            };
+            sm: {
+                $value: string;
+            };
+            md: {
+                $value: string;
+            };
+            lg: {
+                $value: string;
+            };
+            xl: {
+                $value: string;
+            };
+            xxl: {
+                $value: string;
+            };
+        };
+        radius: {
+            $type: string;
+            sm: {
+                $value: string;
+            };
+            md: {
+                $value: string;
+            };
+            lg: {
+                $value: string;
+            };
+            xl: {
+                $value: string;
+            };
+            full: {
+                $value: string;
+            };
+        };
+        opacity: {
+            $type: string;
+            subtle: {
+                $value: number;
+            };
+            medium: {
+                $value: number;
+            };
+            full: {
+                $value: number;
+            };
+        };
+        duration: {
+            $type: string;
+            fast: {
+                $value: string;
+            };
+            base: {
+                $value: string;
+            };
+            slow: {
+                $value: string;
+            };
+        };
+        $extensions: {
+            "motion-kit": {
+                textPairs: {
+                    fg: string;
+                    bg: string;
+                }[];
+            };
+        };
+    };
+    readonly dark: {
+        $description: string;
+        color: {
+            $type: string;
+            bg: {
+                $value: string;
+            };
+            bgEnd: {
+                $value: string;
+            };
+            glow: {
+                $value: string;
+            };
+            glow2: {
+                $value: string;
+            };
+            surface: {
+                $value: string;
+            };
+            card: {
+                $value: string;
+            };
+            divider: {
+                $value: string;
+            };
+            accentSoft: {
+                $value: string;
+            };
+            fg: {
+                $value: string;
+            };
+            muted: {
+                $value: string;
+            };
+            accent: {
+                $value: string;
+            };
+            accent2: {
+                $value: string;
+            };
+            onAccent: {
+                $value: string;
+            };
+            onAccent2: {
+                $value: string;
+            };
+            deep: {
+                $value: string;
+            };
+            deepEnd: {
+                $value: string;
+            };
+            onDeep: {
+                $value: string;
+            };
+            onDeepMuted: {
+                $value: string;
+            };
+        };
+        chart: {
+            $type: string;
+            "1": {
+                $value: string;
+            };
+            "2": {
+                $value: string;
+            };
+            "3": {
+                $value: string;
+            };
+            "4": {
+                $value: string;
+            };
+            "5": {
+                $value: string;
+            };
+            "6": {
+                $value: string;
+            };
+            "7": {
+                $value: string;
+            };
+            "8": {
+                $value: string;
+            };
+        };
+        font: {
+            $type: string;
+            sans: {
+                $value: string[];
+            };
+            mono: {
+                $value: string[];
+            };
+        };
+        fontSize: {
+            $type: string;
+            sm: {
+                $value: string;
+            };
+            md: {
+                $value: string;
+            };
+            lg: {
+                $value: string;
+            };
+            xl: {
+                $value: string;
+            };
+            title: {
+                $value: string;
+            };
+            display: {
+                $value: string;
+            };
+            heroSm: {
+                $value: string;
+            };
+            heroMd: {
+                $value: string;
+            };
+            hero: {
+                $value: string;
+            };
+        };
+        spacing: {
+            $type: string;
+            xs: {
+                $value: string;
+            };
+            sm: {
+                $value: string;
+            };
+            md: {
+                $value: string;
+            };
+            lg: {
+                $value: string;
+            };
+            xl: {
+                $value: string;
+            };
+            xxl: {
+                $value: string;
+            };
+        };
+        radius: {
+            $type: string;
+            sm: {
+                $value: string;
+            };
+            md: {
+                $value: string;
+            };
+            lg: {
+                $value: string;
+            };
+            xl: {
+                $value: string;
+            };
+            full: {
+                $value: string;
+            };
+        };
+        opacity: {
+            $type: string;
+            subtle: {
+                $value: number;
+            };
+            medium: {
+                $value: number;
+            };
+            full: {
+                $value: number;
+            };
+        };
+        duration: {
+            $type: string;
+            fast: {
+                $value: string;
+            };
+            base: {
+                $value: string;
+            };
+            slow: {
+                $value: string;
+            };
+        };
+        $extensions: {
+            "motion-kit": {
+                textPairs: {
+                    fg: string;
+                    bg: string;
+                }[];
+            };
+        };
+    };
+};
+/**
+ * Shared-library themes resolvable beside the built-ins (byte-identical
+ * copies of the shared token source; single source of truth stays in the
+ * templates package). Callers merge these into extraDocs; they are never
+ * built-ins, so template styles keep their own docs without collision.
+ */
+export declare const bundledThemeDocs: () => Record<string, unknown>;
+export type ThemeName = keyof typeof TOKEN_FILES;
+export declare const THEME_NAMES: ThemeName[];
+/**
+ * Single projection of DTCG JSON into flat JS tokens; the CSS output derives from this.
+ * `extraDocs` maps theme name to a DTCG document supplied by the caller (e.g. vendored project themes).
+ */
+export declare const resolveTheme: (name: string, extraDocs?: Readonly<Record<string, unknown>>) => ResolvedTheme;
+export {};

package/dist/resolve.js

@@ -0,0 +1,71 @@
+import { readGroup, toColours, toFontStacks, toNumbers, toPx, toSeconds } from "./dtcg.js";
+import { optionalVars } from "./optional.js";
+import calmDarkTokens from "./tokens/calm-dark.json" with { type: "json" };
+import darkTokens from "./tokens/dark.json" with { type: "json" };
+import defaultTokens from "./tokens/default.json" with { type: "json" };
+import techDarkTokens from "./tokens/tech-dark.json" with { type: "json" };
+const TOKEN_FILES = { default: defaultTokens, dark: darkTokens };
+/**
+ * Shared-library themes resolvable beside the built-ins (byte-identical
+ * copies of the shared token source; single source of truth stays in the
+ * templates package). Callers merge these into extraDocs; they are never
+ * built-ins, so template styles keep their own docs without collision.
+ */
+export const bundledThemeDocs = () => ({
+    "tech-dark": techDarkTokens,
+    "calm-dark": calmDarkTokens,
+});
+export const THEME_NAMES = Object.keys(TOKEN_FILES);
+const isThemeName = (name) => Object.hasOwn(TOKEN_FILES, name);
+const asRecord = (value) => typeof value === "object" && value !== null && !Array.isArray(value)
+    ? value
+    : undefined;
+const isTextPair = (value) => {
+    const pair = asRecord(value);
+    return typeof pair?.fg === "string" && typeof pair.bg === "string";
+};
+const readTextPairs = (tokens, name) => {
+    const pairs = asRecord(asRecord(tokens.$extensions)?.["motion-kit"])?.textPairs;
+    if (!Array.isArray(pairs) || !pairs.every(isTextPair)) {
+        throw new Error(`theme "${name}" needs $extensions.motion-kit.textPairs: [{fg,bg}]`);
+    }
+    return pairs.map(({ fg, bg }) => ({ fg, bg }));
+};
+const knownNames = (extraDocs) => [
+    ...THEME_NAMES,
+    ...Object.keys(extraDocs),
+];
+const docFor = (name, extraDocs) => {
+    const extras = Object.keys(extraDocs).filter(isThemeName);
+    if (extras.length > 0) {
+        throw new Error(`theme "${extras[0]}" collides with a built-in theme; rename it`);
+    }
+    if (isThemeName(name))
+        return TOKEN_FILES[name];
+    const extra = Object.hasOwn(extraDocs, name) ? asRecord(extraDocs[name]) : undefined;
+    if (extra === undefined) {
+        throw new Error(`unknown theme "${name}"; use one of: ${knownNames(extraDocs).join("|")}`);
+    }
+    return extra;
+};
+/**
+ * Single projection of DTCG JSON into flat JS tokens; the CSS output derives from this.
+ * `extraDocs` maps theme name to a DTCG document supplied by the caller (e.g. vendored project themes).
+ */
+export const resolveTheme = (name, extraDocs = {}) => {
+    const tokens = docFor(name, extraDocs);
+    const base = {
+        name,
+        colors: toColours(readGroup(tokens, "color")),
+        chart: Object.values(toColours(readGroup(tokens, "chart"))),
+        fonts: toFontStacks(readGroup(tokens, "font")),
+        fontSizes: toPx(readGroup(tokens, "fontSize")),
+        spacing: toPx(readGroup(tokens, "spacing")),
+        radii: toPx(readGroup(tokens, "radius")),
+        opacities: toNumbers(readGroup(tokens, "opacity")),
+        durations: toSeconds(readGroup(tokens, "duration")),
+        textPairs: readTextPairs(tokens, name),
+    };
+    const vars = optionalVars(base, tokens);
+    return Object.keys(vars).length > 0 ? { ...base, vars } : base;
+};