@valancex/style 0.0.0-stage → 0.14.0

package/dist/primitives.js

@@ -0,0 +1,364 @@
+export const primitives = {
+    "a": {
+        "status": "web-only",
+        "interactive": false,
+        "states": [],
+        "variants": [],
+        "stateSelectors": {}
+    },
+    "alert": {
+        "status": "portable",
+        "interactive": false,
+        "states": [],
+        "variants": [],
+        "stateSelectors": {}
+    },
+    "article": {
+        "status": "web-only",
+        "interactive": false,
+        "states": [],
+        "variants": [],
+        "stateSelectors": {}
+    },
+    "aside": {
+        "status": "web-only",
+        "interactive": false,
+        "states": [],
+        "variants": [],
+        "stateSelectors": {}
+    },
+    "blockquote": {
+        "status": "portable",
+        "interactive": false,
+        "states": [],
+        "variants": [],
+        "stateSelectors": {}
+    },
+    "button": {
+        "status": "portable",
+        "interactive": true,
+        "states": [
+            "disabled"
+        ],
+        "variants": [
+            {
+                "name": "intent",
+                "attribute": "data-intent"
+            },
+            {
+                "name": "size",
+                "attribute": "data-size"
+            }
+        ],
+        "hook": "button",
+        "stateSelectors": {
+            "disabled": ":disabled"
+        }
+    },
+    "cell": {
+        "status": "desktop-only",
+        "interactive": false,
+        "states": [],
+        "variants": [],
+        "stateSelectors": {}
+    },
+    "checkbox": {
+        "status": "portable",
+        "interactive": true,
+        "states": [
+            "checked",
+            "invalid"
+        ],
+        "variants": [],
+        "hook": "checkbox",
+        "stateSelectors": {
+            "checked": ":checked",
+            "invalid": "[aria-invalid=\"true\"]"
+        }
+    },
+    "code": {
+        "status": "portable",
+        "interactive": false,
+        "states": [],
+        "variants": [],
+        "stateSelectors": {}
+    },
+    "column": {
+        "status": "portable",
+        "interactive": false,
+        "states": [],
+        "variants": [],
+        "hook": "column",
+        "stateSelectors": {}
+    },
+    "columnheader": {
+        "status": "desktop-only",
+        "interactive": false,
+        "states": [],
+        "variants": [],
+        "stateSelectors": {}
+    },
+    "dialog": {
+        "status": "portable",
+        "interactive": true,
+        "states": [],
+        "variants": [],
+        "stateSelectors": {}
+    },
+    "div": {
+        "status": "web-only",
+        "interactive": false,
+        "states": [],
+        "variants": [],
+        "stateSelectors": {}
+    },
+    "emphasis": {
+        "status": "portable",
+        "interactive": false,
+        "states": [],
+        "variants": [],
+        "stateSelectors": {}
+    },
+    "footer": {
+        "status": "web-only",
+        "interactive": false,
+        "states": [],
+        "variants": [],
+        "stateSelectors": {}
+    },
+    "h1": {
+        "status": "web-only",
+        "interactive": false,
+        "states": [],
+        "variants": [],
+        "stateSelectors": {}
+    },
+    "h2": {
+        "status": "web-only",
+        "interactive": false,
+        "states": [],
+        "variants": [],
+        "stateSelectors": {}
+    },
+    "h3": {
+        "status": "web-only",
+        "interactive": false,
+        "states": [],
+        "variants": [],
+        "stateSelectors": {}
+    },
+    "header": {
+        "status": "web-only",
+        "interactive": false,
+        "states": [],
+        "variants": [],
+        "stateSelectors": {}
+    },
+    "heading": {
+        "status": "portable",
+        "interactive": false,
+        "states": [
+            "level"
+        ],
+        "variants": [],
+        "hook": "heading",
+        "stateSelectors": {}
+    },
+    "image": {
+        "status": "portable",
+        "interactive": false,
+        "states": [],
+        "variants": [],
+        "stateSelectors": {}
+    },
+    "label": {
+        "status": "portable",
+        "interactive": false,
+        "states": [],
+        "variants": [],
+        "stateSelectors": {}
+    },
+    "link": {
+        "status": "portable",
+        "interactive": true,
+        "states": [],
+        "variants": [],
+        "stateSelectors": {}
+    },
+    "list": {
+        "status": "portable",
+        "interactive": false,
+        "states": [],
+        "variants": [],
+        "stateSelectors": {}
+    },
+    "listitem": {
+        "status": "portable",
+        "interactive": false,
+        "states": [],
+        "variants": [],
+        "stateSelectors": {}
+    },
+    "main": {
+        "status": "web-only",
+        "interactive": false,
+        "states": [],
+        "variants": [],
+        "stateSelectors": {}
+    },
+    "nav": {
+        "status": "web-only",
+        "interactive": false,
+        "states": [],
+        "variants": [],
+        "stateSelectors": {}
+    },
+    "paragraph": {
+        "status": "portable",
+        "interactive": false,
+        "states": [],
+        "variants": [],
+        "stateSelectors": {}
+    },
+    "popover": {
+        "status": "portable",
+        "interactive": true,
+        "states": [],
+        "variants": [],
+        "stateSelectors": {}
+    },
+    "pre": {
+        "status": "web-only",
+        "interactive": false,
+        "states": [],
+        "variants": [],
+        "stateSelectors": {}
+    },
+    "radio": {
+        "status": "portable",
+        "interactive": true,
+        "states": [
+            "checked",
+            "disabled"
+        ],
+        "variants": [],
+        "stateSelectors": {}
+    },
+    "radiogroup": {
+        "status": "portable",
+        "interactive": false,
+        "states": [
+            "invalid"
+        ],
+        "variants": [],
+        "stateSelectors": {}
+    },
+    "row": {
+        "status": "portable",
+        "interactive": false,
+        "states": [],
+        "variants": [],
+        "hook": "row",
+        "stateSelectors": {}
+    },
+    "rowheader": {
+        "status": "desktop-only",
+        "interactive": false,
+        "states": [],
+        "variants": [],
+        "stateSelectors": {}
+    },
+    "section": {
+        "status": "web-only",
+        "interactive": false,
+        "states": [],
+        "variants": [],
+        "stateSelectors": {}
+    },
+    "shell": {
+        "status": "web-only",
+        "interactive": false,
+        "states": [],
+        "variants": [],
+        "stateSelectors": {}
+    },
+    "span": {
+        "status": "web-only",
+        "interactive": false,
+        "states": [],
+        "variants": [],
+        "stateSelectors": {}
+    },
+    "status": {
+        "status": "portable",
+        "interactive": false,
+        "states": [],
+        "variants": [],
+        "stateSelectors": {}
+    },
+    "strong": {
+        "status": "portable",
+        "interactive": false,
+        "states": [],
+        "variants": [],
+        "stateSelectors": {}
+    },
+    "table": {
+        "status": "desktop-only",
+        "interactive": false,
+        "states": [],
+        "variants": [],
+        "stateSelectors": {}
+    },
+    "tablebody": {
+        "status": "desktop-only",
+        "interactive": false,
+        "states": [],
+        "variants": [],
+        "stateSelectors": {}
+    },
+    "tablehead": {
+        "status": "desktop-only",
+        "interactive": false,
+        "states": [],
+        "variants": [],
+        "stateSelectors": {}
+    },
+    "tablerow": {
+        "status": "desktop-only",
+        "interactive": false,
+        "states": [],
+        "variants": [],
+        "stateSelectors": {}
+    },
+    "text": {
+        "status": "portable",
+        "interactive": false,
+        "states": [],
+        "variants": [],
+        "hook": "text",
+        "stateSelectors": {}
+    },
+    "textfield": {
+        "status": "portable",
+        "interactive": true,
+        "states": [
+            "invalid"
+        ],
+        "variants": [],
+        "hook": "textfield",
+        "stateSelectors": {
+            "invalid": "[aria-invalid=\"true\"]"
+        }
+    },
+    "toggle": {
+        "status": "portable",
+        "interactive": true,
+        "states": [
+            "pressed",
+            "disabled"
+        ],
+        "variants": [],
+        "stateSelectors": {}
+    }
+};

package/dist/suggest.d.ts

@@ -0,0 +1,2 @@
+export declare const nearest: (word: string, names: ReadonlyArray<string>) => string | undefined;
+export declare const didYouMean: (word: string, names: ReadonlyArray<string>) => string;

package/dist/suggest.js

@@ -0,0 +1,22 @@
+// "Did you mean": the nearest of some names to a word, when one is near enough to be a slip of the keyboard.
+const distance = (a, b) => {
+    const row = Array.from({ length: b.length + 1 }, (_, index) => index);
+    for (let i = 1; i <= a.length; i += 1) {
+        let diagonal = row[0];
+        row[0] = i;
+        for (let j = 1; j <= b.length; j += 1) {
+            const above = row[j];
+            row[j] = Math.min(row[j] + 1, row[j - 1] + 1, diagonal + (a[i - 1] === b[j - 1] ? 0 : 1));
+            diagonal = above;
+        }
+    }
+    return row[b.length];
+};
+export const nearest = (word, names) => {
+    const ranked = names.map((name) => ({ name, d: distance(word, name) })).sort((x, y) => x.d - y.d)[0];
+    return ranked !== undefined && ranked.d <= Math.max(2, Math.floor(word.length / 3)) ? ranked.name : undefined;
+};
+export const didYouMean = (word, names) => {
+    const found = nearest(word, names);
+    return found === undefined ? "" : ` (did you mean "${found}"?)`;
+};

package/dist/theme.d.ts

@@ -0,0 +1,5 @@
+import Ajv from "ajv";
+import type { LoadedTheme } from "./types.js";
+export declare const validateRecipe: Ajv.ValidateFunction<unknown>;
+/** Reads the theme at `themeFile`. Never throws for a mistake in the theme: that is what `problems` is for. */
+export declare const loadTheme: (themeFile: string, display?: (path: string) => string) => LoadedTheme;

package/dist/theme.js

@@ -0,0 +1,129 @@
+// A theme on disk: `theme.json`, its token documents by mode and its recipes. Loading reads and checks everything that can be checked from the files alone (the schemas, the Design Tokens format, the
+// graph pass, that every mode defines the same tokens); `check.ts` then checks the recipes against the primitives' specifications.
+import Ajv from "ajv";
+import { readFileSync } from "node:fs";
+import { dirname, join, relative } from "node:path";
+import { loadSchema } from "./load.js";
+import { resolveDocument, validateDocument } from "./tokens.js";
+const ajv = new Ajv.default({ strict: false, allErrors: true });
+const validateTheme = ajv.compile(loadSchema("theme-v1.schema.json"));
+export const validateRecipe = ajv.compile(loadSchema("recipe-v1.schema.json"));
+const read = (path) => {
+    try {
+        return { value: JSON.parse(readFileSync(path, "utf8")) };
+    }
+    catch (error) {
+        return { problem: error instanceof Error ? error.message : String(error) };
+    }
+};
+const isObject = (value) => typeof value === "object" && value !== null && !Array.isArray(value);
+/** `over` laid on `base`, group by group (a token of `over` replaces the token of `base`). */
+const lay = (base, over) => {
+    const out = { ...base };
+    for (const [key, value] of Object.entries(over)) {
+        const was = out[key];
+        out[key] = isObject(value) && isObject(was) && !("$value" in value) && !("$value" in was) ? lay(was, value) : value;
+    }
+    return out;
+};
+const schemaProblems = (file, errors) => (errors ?? [])
+    .slice(0, 5)
+    .map((each) => ({ file, path: each.instancePath, code: "schema", message: `${each.instancePath === "" ? "(document)" : each.instancePath} ${each.message ?? "is invalid"}` }));
+/** Reads the theme at `themeFile`. Never throws for a mistake in the theme: that is what `problems` is for. */
+export const loadTheme = (themeFile, display = (path) => relative(process.cwd(), path)) => {
+    const directory = dirname(themeFile);
+    const problems = [];
+    const shown = display(themeFile);
+    const parsed = read(themeFile);
+    if (parsed.problem !== undefined) {
+        return {
+            theme: { version: 1, name: "unreadable", modes: { light: "" }, recipes: [] },
+            directory,
+            modes: {},
+            recipes: [],
+            problems: [{ file: shown, code: "theme-unreadable", message: parsed.problem }],
+        };
+    }
+    if (!validateTheme(parsed.value)) {
+        problems.push(...schemaProblems(shown, validateTheme.errors));
+        return { theme: { version: 1, name: "invalid", modes: { light: "" }, recipes: [] }, directory, modes: {}, recipes: [], problems };
+    }
+    const theme = parsed.value;
+    // the tokens, by mode: the base document laid under each mode's own
+    const documents = {};
+    const baseFile = theme.base === undefined ? undefined : join(directory, theme.base);
+    const base = baseFile === undefined ? undefined : read(baseFile);
+    if (base?.problem !== undefined) {
+        problems.push({ file: display(baseFile), code: "tokens-unreadable", message: base.problem });
+    }
+    for (const [mode, relativeFile] of Object.entries(theme.modes)) {
+        const file = join(directory, relativeFile);
+        const own = read(file);
+        if (own.problem !== undefined) {
+            problems.push({ file: display(file), code: "tokens-unreadable", message: own.problem });
+            continue;
+        }
+        for (const [name, document] of [[display(file), own.value], ...(base?.value === undefined ? [] : [[display(baseFile), base.value]])]) {
+            const checked = validateDocument(document);
+            if (!checked.valid && !problems.some((each) => each.file === name && each.code === "tokens-format")) {
+                problems.push({ file: name, code: "tokens-format", message: `not a Design Tokens (2025.10) document: ${checked.error}` });
+            }
+        }
+        documents[mode] = lay(isObject(base?.value) ? base.value : {}, isObject(own.value) ? own.value : {});
+    }
+    const modes = {};
+    for (const [mode, document] of Object.entries(documents)) {
+        const file = display(join(directory, theme.modes[mode]));
+        const resolved = resolveDocument(document, file);
+        problems.push(...resolved.problems);
+        // an alias can put a value where its type is wrong: the resolved document is judged by the schemas again
+        if (resolved.problems.length === 0) {
+            const again = validateDocument(resolved.resolved);
+            if (!again.valid) {
+                problems.push({ file, code: "tokens-format", message: `after its references are followed the ${mode} mode is not a Design Tokens document: ${again.error}` });
+            }
+        }
+        modes[mode] = resolved.tokens;
+    }
+    // every mode defines the same tokens as `light`
+    const light = modes["light"];
+    if (light !== undefined) {
+        for (const [mode, tokens] of Object.entries(modes)) {
+            for (const path of light.keys()) {
+                if (!tokens.has(path)) {
+                    problems.push({
+                        file: display(join(directory, theme.modes[mode])),
+                        path,
+                        code: "mode-missing-token",
+                        message: `the ${mode} mode does not define ${path}, which the light mode does`,
+                    });
+                }
+            }
+            for (const path of tokens.keys()) {
+                if (!light.has(path)) {
+                    problems.push({
+                        file: display(join(directory, theme.modes[mode])),
+                        path,
+                        code: "mode-extra-token",
+                        message: `the ${mode} mode defines ${path}, which the light mode does not`,
+                    });
+                }
+            }
+        }
+    }
+    const recipes = [];
+    for (const relativeFile of theme.recipes) {
+        const file = join(directory, relativeFile);
+        const own = read(file);
+        if (own.problem !== undefined) {
+            problems.push({ file: display(file), code: "recipe-unreadable", message: own.problem });
+        }
+        else if (!validateRecipe(own.value)) {
+            problems.push(...schemaProblems(display(file), validateRecipe.errors).map((each) => ({ ...each, code: "recipe-schema" })));
+        }
+        else {
+            recipes.push({ file: display(file), recipe: own.value });
+        }
+    }
+    return { theme, directory, modes, recipes, problems };
+};

package/dist/tokens.d.ts

@@ -0,0 +1,21 @@
+import { type ValidateFunction } from "ajv";
+import type { Problem, ResolvedToken } from "./types.js";
+/** The validator for a whole token document: the group's `format.json` with every schema it references. */
+export declare const dtcgValidator: () => ValidateFunction;
+/** Whether `document` is a valid token document, and the first error if not. */
+export declare const validateDocument: (document: unknown) => {
+    readonly valid: boolean;
+    readonly error?: string;
+};
+type Json = null | boolean | number | string | ReadonlyArray<Json> | {
+    readonly [key: string]: Json;
+};
+export interface Resolved {
+    readonly tokens: ReadonlyMap<string, ResolvedToken>;
+    readonly problems: ReadonlyArray<Problem>;
+    /** The document with every `$extends`, alias and pointer replaced by what it stands for, and a `$type` on every token: what the schemas judge a second time, because an alias can put a value where its type is wrong. */
+    readonly resolved: Json;
+}
+/** The pass over one document that has already been checked against the schemas: follows `$extends`, curly-brace aliases and JSON Pointer `$ref`s to their ends. */
+export declare const resolveDocument: (document: unknown, file: string) => Resolved;
+export {};