baseline-foundry 0.1.6 → 0.2.0

package/dist/css.js

@@ -2,6 +2,7 @@ import { gridCss } from "./css-grid.js";
 import { componentsCss } from "./css-components.js";
 import { appTierPresetCss } from "./css-app-tier.js";
 import { generateBaselineGridOverlayCss, generateBaselineGridThemeOverrideCss } from "./baseline-grid-overlay.js";
+import { bfSpacingCompatibilityAliases, dtcgSpacingCssProperty, dtcgSpacingTokenIds, dtcgSpacingValue } from "./dtcg-spacing.js";
 import { foundryThemeRootColorVars, vanillaThemeColorVars } from "./vanilla-theme-colors.js";
 function parseRemValue(rem) {
     return Number.parseFloat(rem.replace("rem", ""));
@@ -81,10 +82,52 @@ function roleVarDeclarations(roleName, token, baselineUnit) {
     const compensation = token.marginBottom ?? baselineCompensation(token.nudgeTop, baselineUnit);
     return `  --bf-${roleName}-font-family: ${token.fontStack};\n  --bf-${roleName}-font-size: ${token.fontSize};\n  --bf-${roleName}-font-style: ${token.fontStyle ?? "normal"};\n  --bf-${roleName}-font-weight: ${token.fontWeight ?? 400};\n  --bf-${roleName}-font-variant-caps: ${token.fontVariantCaps ?? styleDefaults.fontVariantCaps ?? "normal"};\n  --bf-${roleName}-letter-spacing: ${token.letterSpacing ?? styleDefaults.letterSpacing ?? "normal"};\n  --bf-${roleName}-text-transform: ${token.textTransform ?? styleDefaults.textTransform ?? "none"};\n  --bf-${roleName}-line-height: ${token.lineHeight};\n  --bf-${roleName}-space-after: ${token.spaceAfter};\n  --bf-${roleName}-baseline-compensation: ${compensation};\n  --bf-${roleName}-margin-bottom: ${compensation};\n  --bf-${roleName}-nudge-start: ${token.nudgeTop};\n  --bf-${roleName}-nudge-end: ${compensation};\n`;
 }
+function spacingVarDeclarations(tokens) {
+    if (!tokens.canonicalSpacing) {
+        const bfValues = dtcgSpacingTokenIds
+            .map(id => `  ${bfSpacingCompatibilityAliases[id]}: ${dtcgSpacingValue(tokens.spacing[id])};`)
+            .join("\n");
+        return `  /* Theme-config spacing remains in BF's namespace; it does not claim Canonical provenance. */
+${bfValues}
+`;
+    }
+    const canonical = dtcgSpacingTokenIds
+        .map(id => `  ${dtcgSpacingCssProperty(id)}: ${dtcgSpacingValue(tokens.canonicalSpacing?.[id] ?? tokens.spacing[id])};`)
+        .join("\n");
+    const compatibility = dtcgSpacingTokenIds
+        .map(id => `  ${bfSpacingCompatibilityAliases[id]}: var(${dtcgSpacingCssProperty(id)});`)
+        .join("\n");
+    return `  /* Resolved Canonical DTCG spacing; these names always retain the pinned final matrix. */
+${canonical}
+  /* Temporary BF compatibility properties alias Canonical directly during
+     the bounded public-name deprecation window. */
+${compatibility}
+`;
+}
 function themeSurfaceRule(selector, tokens) {
     const body = tokens.roles.body;
     const smallFontFallback = body?.fontSize ?? tokens.roles.h6?.fontSize ?? "1rem";
-    return `${selector} {\n  --bf-baseline: ${tokens.baselineUnit};\n  --bf-space-0: 0rem;\n  --bf-space-half: calc(var(--bf-baseline) / 2);\n  --bf-space-1: var(--bf-baseline);\n  --bf-space-2: calc(var(--bf-baseline) * 2);\n  --bf-space-3: calc(var(--bf-baseline) * 3);\n  --bf-space-4: calc(var(--bf-baseline) * 4);\n  --bf-space-6: calc(var(--bf-baseline) * 6);\n  --bf-space-8: calc(var(--bf-baseline) * 8);\n  --bf-space-12: calc(var(--bf-baseline) * 12);\n  --bf-space-16: calc(var(--bf-baseline) * 16);\n  --bf-content-max-width: ${tokens.layout.contentMaxWidth};\n  --bf-content-padding-inline: ${tokens.layout.contentPaddingInline};\n  --bf-measure: ${tokens.layout.measure};\n  --bf-section-space: ${tokens.layout.sectionSpace};\n  --bf-section-space-shallow: ${tokens.layout.sectionSpaceShallow};\n  --bf-section-space-deep: ${tokens.layout.sectionSpaceDeep};\n  --bf-strip-space: ${tokens.layout.stripSpace};\n  --bf-grid-gap-inline: ${tokens.layout.gridGapInline};\n  --bf-grid-gap-block: ${tokens.layout.gridGapBlock};\n  --bf-page-margin: ${tokens.layout.pageMargin};\n${Object.entries(tokens.roles).map(([roleName, token]) => roleVarDeclarations(roleName, token, tokens.baselineUnit)).join("")}  --bf-font-size-small: var(--bf-body-font-size, ${smallFontFallback});\n }\n`;
+    return `${selector} {
+${spacingVarDeclarations(tokens)}  --bf-space-0: 0rem;
+  --bf-inline-unit: ${tokens.inlineUnit};
+  --bf-space-half: calc(var(--bf-baseline) / 2);
+  --bf-space-1: var(--bf-baseline);
+  --bf-space-2: calc(var(--bf-baseline) * 2);
+  --bf-space-3: calc(var(--bf-baseline) * 3);
+  --bf-space-4: calc(var(--bf-baseline) * 4);
+  --bf-space-6: calc(var(--bf-baseline) * 6);
+  --bf-space-8: calc(var(--bf-baseline) * 8);
+  --bf-space-12: calc(var(--bf-baseline) * 12);
+  --bf-space-16: calc(var(--bf-baseline) * 16);
+  --bf-content-max-width: ${tokens.layout.contentMaxWidth};
+  --bf-content-padding-inline: ${tokens.layout.contentPaddingInline};
+  --bf-measure: ${tokens.layout.measure};
+  --bf-grid-gap-inline: ${tokens.layout.gridGapInline};
+  --bf-grid-gap-block: ${tokens.layout.gridGapBlock};
+  --bf-page-margin: ${tokens.layout.pageMargin};
+${Object.entries(tokens.roles).map(([roleName, token]) => roleVarDeclarations(roleName, token, tokens.baselineUnit)).join("")}  --bf-font-size-small: var(--bf-body-font-size, ${smallFontFallback});
+ }
+`;
 }
 function collectFontFiles(tokens, themeSurfaces) {
     const seen = new Set();

package/dist/dtcg-spacing.d.ts

@@ -0,0 +1,40 @@
+import type { BuiltInThemeName } from "./tier-registry.js";
+import type { ThemeConfig } from "./types.js";
+export declare const dtcgSpacingTokenIds: readonly ["spacing.baseline", "spacing.gap.field.block", "spacing.gap.mark.inline", "spacing.gap.group.block", "spacing.gap.pattern.block", "spacing.gap.region.block", "spacing.inset.field.inline", "spacing.inset.action.inline", "spacing.inset.continuation.inline", "spacing.inset.surface.inline", "spacing.inset.surface.block", "spacing.inset.strip.block"];
+export type DtcgSpacingTokenId = (typeof dtcgSpacingTokenIds)[number];
+export type CanonicalProduct = "site" | "docs" | "app" | "os";
+export interface ResolvedDtcgDimensionToken {
+    $type: "dimension";
+    $value: {
+        value: number;
+        unit: "rem";
+    };
+}
+export type ResolvedDtcgSpacing = Record<DtcgSpacingTokenId, ResolvedDtcgDimensionToken>;
+interface ResolvedDtcgSpacingArtifact {
+    format: "canonical-resolver-apply-spacing-v1";
+    integrity: {
+        algorithm: "sha256";
+        canonicalProducts: string;
+    };
+    source: {
+        package: "@canonical/design-tokens";
+        repository: string;
+        commit: string;
+        resolver: string;
+    };
+    products: Record<CanonicalProduct, ResolvedDtcgSpacing>;
+}
+export declare const canonicalSpacingSourceCommit = "18f57b95b1aa1dfe85a45746016b055c807d6628";
+export declare const canonicalSpacingProductsSha256 = "97cffe22691cebbe29d786d2fbe10d04d014d412ed35ccaca386ca41e73bd571";
+export declare const bfSpacingCompatibilityAliases: Record<DtcgSpacingTokenId, string>;
+export declare function validateCanonicalSpacingArtifact(value: unknown): asserts value is ResolvedDtcgSpacingArtifact;
+export declare function canonicalProductForBuiltInTheme(name: BuiltInThemeName): CanonicalProduct;
+export declare function dtcgSpacingValue(token: ResolvedDtcgDimensionToken): string;
+export declare function dtcgSpacingCssProperty(id: DtcgSpacingTokenId): string;
+export declare function legacyThemeConfigSpacing(config: ThemeConfig): ResolvedDtcgSpacing;
+export declare function readCanonicalSpacingProduct(product: CanonicalProduct, options?: {
+    artifactPath?: string;
+}): Promise<ResolvedDtcgSpacing>;
+export declare function assertSpacingSetsEqual(actual: ResolvedDtcgSpacing, expected: ResolvedDtcgSpacing, label: string): void;
+export {};

package/dist/dtcg-spacing.js

@@ -0,0 +1,163 @@
+import { createHash } from "node:crypto";
+import fs from "node:fs/promises";
+import path from "node:path";
+import { fileURLToPath } from "node:url";
+export const dtcgSpacingTokenIds = [
+    "spacing.baseline",
+    "spacing.gap.field.block",
+    "spacing.gap.mark.inline",
+    "spacing.gap.group.block",
+    "spacing.gap.pattern.block",
+    "spacing.gap.region.block",
+    "spacing.inset.field.inline",
+    "spacing.inset.action.inline",
+    "spacing.inset.continuation.inline",
+    "spacing.inset.surface.inline",
+    "spacing.inset.surface.block",
+    "spacing.inset.strip.block"
+];
+export const canonicalSpacingSourceCommit = "18f57b95b1aa1dfe85a45746016b055c807d6628";
+export const canonicalSpacingProductsSha256 = "97cffe22691cebbe29d786d2fbe10d04d014d412ed35ccaca386ca41e73bd571";
+const canonicalSpacingSourceRepository = "https://github.com/canonical/design-tokens";
+const canonicalSpacingResolver = "tokens/canonical/canonical.resolver.json";
+const canonicalProductOrder = ["site", "docs", "app", "os"];
+export const bfSpacingCompatibilityAliases = {
+    "spacing.baseline": "--bf-baseline",
+    "spacing.gap.field.block": "--bf-field-gap",
+    "spacing.gap.mark.inline": "--bf-leading-mark-gap",
+    "spacing.gap.group.block": "--bf-section-space-shallow",
+    "spacing.gap.pattern.block": "--bf-section-space",
+    "spacing.gap.region.block": "--bf-section-space-deep",
+    "spacing.inset.field.inline": "--bf-component-inline-inset-field",
+    "spacing.inset.action.inline": "--bf-component-inline-inset-action",
+    "spacing.inset.continuation.inline": "--bf-component-inline-inset-continuation",
+    "spacing.inset.surface.inline": "--bf-panel-padding-inline",
+    "spacing.inset.surface.block": "--bf-panel-padding-block",
+    "spacing.inset.strip.block": "--bf-strip-space"
+};
+const productByTier = {
+    editorial: "site",
+    documentation: "docs",
+    app: "app",
+    os: "os"
+};
+const moduleDir = path.dirname(fileURLToPath(import.meta.url));
+const defaultArtifactPath = path.resolve(moduleDir, "..", "config", "canonical-spacing.resolved.json");
+function isRecord(value) {
+    return typeof value === "object" && value !== null && !Array.isArray(value);
+}
+function validateDimensionToken(value, location) {
+    if (!isRecord(value) || value.$type !== "dimension" || !isRecord(value.$value)) {
+        throw new Error(`Resolved spacing token "${location}" must use the DTCG dimension token shape.`);
+    }
+    const magnitude = value.$value.value;
+    if (typeof magnitude !== "number" || !Number.isFinite(magnitude) || magnitude < 0 || value.$value.unit !== "rem") {
+        throw new Error(`Resolved spacing token "${location}" must contain a finite non-negative rem value.`);
+    }
+}
+function validateTokenSet(value, location) {
+    if (!isRecord(value)) {
+        throw new Error(`Resolved spacing product "${location}" must be an object.`);
+    }
+    const actualIds = Object.keys(value).sort();
+    const expectedIds = [...dtcgSpacingTokenIds].sort();
+    if (JSON.stringify(actualIds) !== JSON.stringify(expectedIds)) {
+        throw new Error(`Resolved spacing product "${location}" must contain exactly the twelve approved v1 token IDs.`);
+    }
+    for (const id of dtcgSpacingTokenIds) {
+        validateDimensionToken(value[id], `${location}:${id}`);
+    }
+}
+function canonicalProductsDigest(products) {
+    const payload = JSON.stringify(canonicalProductOrder.map(product => [
+        product,
+        dtcgSpacingTokenIds.map(id => [
+            id,
+            products[product][id].$type,
+            products[product][id].$value.value,
+            products[product][id].$value.unit
+        ])
+    ]));
+    return createHash("sha256").update(payload).digest("hex");
+}
+export function validateCanonicalSpacingArtifact(value) {
+    if (!isRecord(value) ||
+        value.format !== "canonical-resolver-apply-spacing-v1" ||
+        !isRecord(value.integrity) ||
+        !isRecord(value.source) ||
+        !isRecord(value.products)) {
+        throw new Error("Canonical spacing artifact has an unsupported shape.");
+    }
+    if (value.integrity.algorithm !== "sha256" ||
+        value.integrity.canonicalProducts !== canonicalSpacingProductsSha256) {
+        throw new Error(`Canonical spacing artifact must declare product digest ${canonicalSpacingProductsSha256}.`);
+    }
+    if (value.source.package !== "@canonical/design-tokens" ||
+        value.source.repository !== canonicalSpacingSourceRepository ||
+        value.source.commit !== canonicalSpacingSourceCommit ||
+        value.source.resolver !== canonicalSpacingResolver) {
+        throw new Error(`Canonical spacing artifact must pin design-tokens ${canonicalSpacingSourceCommit}.`);
+    }
+    const actualProducts = Object.keys(value.products).sort();
+    const expectedProducts = ["app", "docs", "os", "site"];
+    if (JSON.stringify(actualProducts) !== JSON.stringify(expectedProducts)) {
+        throw new Error("Canonical spacing artifact must contain exactly site, docs, app, and os products.");
+    }
+    for (const product of expectedProducts) {
+        validateTokenSet(value.products[product], product);
+    }
+    const actualDigest = canonicalProductsDigest(value.products);
+    if (actualDigest !== canonicalSpacingProductsSha256) {
+        throw new Error(`Canonical spacing artifact product digest changed: expected ${canonicalSpacingProductsSha256}, received ${actualDigest}.`);
+    }
+}
+async function readJson(filePath) {
+    return JSON.parse(await fs.readFile(filePath, "utf8"));
+}
+export function canonicalProductForBuiltInTheme(name) {
+    if (name === "prose")
+        return "site";
+    if (name === "app-tier")
+        return "app";
+    return productByTier[name];
+}
+export function dtcgSpacingValue(token) {
+    return `${token.$value.value}rem`;
+}
+export function dtcgSpacingCssProperty(id) {
+    return `--${id.replaceAll(".", "-")}`;
+}
+export function legacyThemeConfigSpacing(config) {
+    const value = (magnitude) => ({
+        $type: "dimension",
+        $value: { value: magnitude, unit: "rem" }
+    });
+    return {
+        "spacing.baseline": value(config.baselineUnit),
+        "spacing.gap.field.block": value(config.components.fieldGapBaselineUnits * config.baselineUnit),
+        "spacing.gap.mark.inline": value(config.components.markGapInlineUnits * config.inlineUnitRem),
+        "spacing.gap.group.block": value(config.layout.sectionSpaceShallowBaselineUnits * config.baselineUnit),
+        "spacing.gap.pattern.block": value(config.layout.sectionSpaceBaselineUnits * config.baselineUnit),
+        "spacing.gap.region.block": value(config.layout.sectionSpaceDeepBaselineUnits * config.baselineUnit),
+        "spacing.inset.field.inline": value(config.components.inlineInsetFieldUnits * config.inlineUnitRem),
+        "spacing.inset.action.inline": value(config.components.inlineInsetActionUnits * config.inlineUnitRem),
+        "spacing.inset.continuation.inline": value(config.components.inlineInsetContinuationUnits * config.inlineUnitRem),
+        "spacing.inset.surface.inline": value(config.components.panelPaddingInlineUnits * config.inlineUnitRem),
+        "spacing.inset.surface.block": value(config.components.panelPaddingBlockBaselineUnits * config.baselineUnit),
+        "spacing.inset.strip.block": value(config.layout.stripSpaceBaselineUnits * config.baselineUnit)
+    };
+}
+export async function readCanonicalSpacingProduct(product, options = {}) {
+    const artifact = await readJson(options.artifactPath ?? defaultArtifactPath);
+    validateCanonicalSpacingArtifact(artifact);
+    return structuredClone(artifact.products[product]);
+}
+export function assertSpacingSetsEqual(actual, expected, label) {
+    for (const id of dtcgSpacingTokenIds) {
+        const actualValue = dtcgSpacingValue(actual[id]);
+        const expectedValue = dtcgSpacingValue(expected[id]);
+        if (actualValue !== expectedValue) {
+            throw new Error(`${label} changed ${id}: expected ${expectedValue}, received ${actualValue}.`);
+        }
+    }
+}