baseline-foundry 0.1.3

package/dist/vanilla-theme-colors.js

@@ -0,0 +1,208 @@
+const VANILLA_THEME_COLOR_VARS = {
+    light: {
+        "--vf-color-text-default": "#000000",
+        "--vf-color-text-muted": "rgba(0, 0, 0, 0.6)",
+        "--vf-color-text-inactive": "rgba(0, 0, 0, 0.75)",
+        "--vf-color-link-default": "#0066cc",
+        "--vf-color-link-visited": "#7d42b8",
+        "--vf-color-focus": "#2e96ff",
+        "--vf-color-background-default": "#ffffff",
+        "--vf-color-background-alt": "#f7f7f7",
+        "--vf-color-background-code": "rgba(0, 0, 0, 0.03)",
+        "--vf-color-background-inputs": "#f5f5f5",
+        "--vf-color-background-active": "#ebebeb",
+        "--vf-color-background-hover": "#f2f2f2",
+        "--vf-color-background-overlay": "rgba(17, 17, 17, 0.85)",
+        "--vf-color-border-default": "rgba(0, 0, 0, 0.2)",
+        "--vf-color-border-high-contrast": "#707070",
+        "--vf-color-border-low-contrast": "rgba(0, 0, 0, 0.1)",
+        "--vf-color-border-neutral": "#707070",
+        "--vf-color-border-positive": "#0e8420",
+        "--vf-color-border-caution": "#cc7900",
+        "--vf-color-border-negative": "#c7162b",
+        "--vf-color-border-information": "#24598f",
+        "--vf-color-background-neutral-default": "#f2f2f2",
+        "--vf-color-background-neutral-hover": "#e5e5e5",
+        "--vf-color-background-neutral-active": "#d9d9d9",
+        "--vf-color-background-positive-default": "hsl(129deg 90% 39% / 10%)",
+        "--vf-color-background-positive-hover": "hsl(129deg 100% 39% / 15%)",
+        "--vf-color-background-positive-active": "hsl(129deg 100% 39% / 18%)",
+        "--vf-color-background-caution-default": "hsl(27deg 100% 39% / 10%)",
+        "--vf-color-background-caution-hover": "hsl(27deg 100% 39% / 15%)",
+        "--vf-color-background-caution-active": "hsl(27deg 100% 39% / 18%)",
+        "--vf-color-background-negative-default": "hsl(354deg 100% 39% / 10%)",
+        "--vf-color-background-negative-hover": "hsl(354deg 100% 39% / 15%)",
+        "--vf-color-background-negative-active": "hsl(354deg 100% 39% / 18%)",
+        "--vf-color-background-information-default": "hsl(210deg 100% 39% / 10%)",
+        "--vf-color-background-information-hover": "hsl(210deg 100% 39% / 15%)",
+        "--vf-color-background-information-active": "hsl(210deg 100% 39% / 18%)",
+        "--vf-color-button-positive-default": "#0e8420",
+        "--vf-color-button-positive-hover": "#0c6d1a",
+        "--vf-color-button-positive-active": "#0a5f17",
+        "--vf-color-button-positive-text": "#ffffff",
+        "--vf-color-button-negative-default": "#c7162b",
+        "--vf-color-button-negative-hover": "#b01326",
+        "--vf-color-button-negative-active": "#a21223",
+        "--vf-color-button-negative-text": "#ffffff",
+        "--vf-color-accent": "#0f95a1",
+        "--vf-color-brand": "#e95420"
+    },
+    dark: {
+        "--vf-color-text-default": "#ffffff",
+        "--vf-color-text-muted": "rgba(255, 255, 255, 0.6)",
+        "--vf-color-text-inactive": "rgba(255, 255, 255, 0.75)",
+        "--vf-color-link-default": "#6699cc",
+        "--vf-color-link-visited": "#a679d2",
+        "--vf-color-focus": "#99ccff",
+        "--vf-color-background-default": "#262626",
+        "--vf-color-background-alt": "#202020",
+        "--vf-color-background-code": "rgba(255, 255, 255, 0.3)",
+        "--vf-color-background-inputs": "#2f2f2f",
+        "--vf-color-background-active": "#373737",
+        "--vf-color-background-hover": "#313131",
+        "--vf-color-background-overlay": "rgba(17, 17, 17, 0.85)",
+        "--vf-color-border-default": "rgba(255, 255, 255, 0.2)",
+        "--vf-color-border-high-contrast": "#939393",
+        "--vf-color-border-low-contrast": "rgba(255, 255, 255, 0.1)",
+        "--vf-color-border-neutral": "hsl(0deg 0% 65%)",
+        "--vf-color-border-positive": "#62a36c",
+        "--vf-color-border-caution": "#c48831",
+        "--vf-color-border-negative": "#d17b85",
+        "--vf-color-border-information": "hsl(210deg 80% 65%)",
+        "--vf-color-background-neutral-default": "rgba(255, 255, 255, 0.15)",
+        "--vf-color-background-neutral-hover": "rgba(255, 255, 255, 0.2)",
+        "--vf-color-background-neutral-active": "rgba(255, 255, 255, 0.25)",
+        "--vf-color-background-positive-default": "hsl(129deg 90% 39% / 20%)",
+        "--vf-color-background-positive-hover": "hsl(129deg 100% 39% / 30%)",
+        "--vf-color-background-positive-active": "hsl(129deg 100% 39% / 36%)",
+        "--vf-color-background-caution-default": "hsl(27deg 100% 50% / 20%)",
+        "--vf-color-background-caution-hover": "hsl(27deg 100% 60% / 30%)",
+        "--vf-color-background-caution-active": "hsl(27deg 100% 50% / 36%)",
+        "--vf-color-background-negative-default": "hsl(353deg 100% 70% / 20%)",
+        "--vf-color-background-negative-hover": "hsl(353deg 100% 70% / 30%)",
+        "--vf-color-background-negative-active": "hsl(353deg 100% 70% / 36%)",
+        "--vf-color-background-information-default": "hsl(210deg 100% 50% / 20%)",
+        "--vf-color-background-information-hover": "hsl(210deg 100% 50% / 30%)",
+        "--vf-color-background-information-active": "hsl(210deg 100% 50% / 36%)",
+        "--vf-color-button-positive-default": "#008013",
+        "--vf-color-button-positive-hover": "#00670f",
+        "--vf-color-button-positive-active": "#00570d",
+        "--vf-color-button-positive-text": "#ffffff",
+        "--vf-color-button-negative-default": "#a11223",
+        "--vf-color-button-negative-hover": "#8a0f1e",
+        "--vf-color-button-negative-active": "#7c0e1b",
+        "--vf-color-button-negative-text": "#ffffff",
+        "--vf-color-accent": "#70bbc2",
+        "--vf-color-brand": "#e95420"
+    }
+};
+const FOUNDRY_THEME_ROOT_COLOR_SOURCES = {
+    "--bf-color-bg": "--vf-color-background-default",
+    "--bf-color-surface": "--vf-color-background-alt",
+    "--bf-color-text": "--vf-color-text-default",
+    "--bf-color-muted": "--vf-color-text-muted",
+    "--bf-color-positive": "--vf-color-border-positive",
+    "--bf-color-positive-background": "--vf-color-background-positive-default",
+    "--bf-color-negative": "--vf-color-border-negative",
+    "--bf-color-negative-background": "--vf-color-background-negative-default",
+    "--bf-color-rule": "--vf-color-border-low-contrast",
+    "--bf-color-link": "--vf-color-link-default",
+    "--bf-color-link-visited": "--vf-color-link-visited",
+    "--bf-color-focus": "--vf-color-focus",
+    "--bf-color-accent": "--vf-color-accent",
+    "--bf-color-brand": "--vf-color-brand"
+};
+const FOUNDRY_COMPONENT_COLOR_SOURCES = {
+    "--bf-color-text-default": "--vf-color-text-default",
+    "--bf-color-text-muted": "--vf-color-text-muted",
+    "--bf-color-text-inactive": "--vf-color-text-inactive",
+    "--bf-color-link-default": "--vf-color-link-default",
+    "--bf-color-link-visited": "--vf-color-link-visited",
+    "--bf-color-background-default": "--vf-color-background-default",
+    "--bf-color-background-alt": "--vf-color-background-alt",
+    "--bf-color-background-code": "--vf-color-background-code",
+    "--bf-color-background-inputs": "--vf-color-background-inputs",
+    "--bf-color-background-hover": "--vf-color-background-hover",
+    "--bf-color-background-active": "--vf-color-background-active",
+    "--bf-color-background-overlay": "--vf-color-background-overlay",
+    "--bf-color-border-default": "--vf-color-border-default",
+    "--bf-color-border-high-contrast": "--vf-color-border-high-contrast",
+    "--bf-color-border-low-contrast": "--vf-color-border-low-contrast",
+    "--bf-color-border-neutral": "--vf-color-border-neutral",
+    "--bf-color-border-positive": "--vf-color-border-positive",
+    "--bf-color-border-caution": "--vf-color-border-caution",
+    "--bf-color-border-negative": "--vf-color-border-negative",
+    "--bf-color-border-information": "--vf-color-border-information",
+    "--bf-color-background-neutral-default": "--vf-color-background-neutral-default",
+    "--bf-color-background-neutral-hover": "--vf-color-background-neutral-hover",
+    "--bf-color-background-neutral-active": "--vf-color-background-neutral-active",
+    "--bf-color-background-positive-default": "--vf-color-background-positive-default",
+    "--bf-color-background-positive-hover": "--vf-color-background-positive-hover",
+    "--bf-color-background-positive-active": "--vf-color-background-positive-active",
+    "--bf-color-background-caution-default": "--vf-color-background-caution-default",
+    "--bf-color-background-caution-hover": "--vf-color-background-caution-hover",
+    "--bf-color-background-caution-active": "--vf-color-background-caution-active",
+    "--bf-color-background-negative-default": "--vf-color-background-negative-default",
+    "--bf-color-background-negative-hover": "--vf-color-background-negative-hover",
+    "--bf-color-background-negative-active": "--vf-color-background-negative-active",
+    "--bf-color-background-information-default": "--vf-color-background-information-default",
+    "--bf-color-background-information-hover": "--vf-color-background-information-hover",
+    "--bf-color-background-information-active": "--vf-color-background-information-active",
+    "--bf-color-button-positive-default": "--vf-color-button-positive-default",
+    "--bf-color-button-positive-hover": "--vf-color-button-positive-hover",
+    "--bf-color-button-positive-active": "--vf-color-button-positive-active",
+    "--bf-color-button-positive-text": "--vf-color-button-positive-text",
+    "--bf-color-button-negative-default": "--vf-color-button-negative-default",
+    "--bf-color-button-negative-hover": "--vf-color-button-negative-hover",
+    "--bf-color-button-negative-active": "--vf-color-button-negative-active",
+    "--bf-color-button-negative-text": "--vf-color-button-negative-text",
+    "--bf-color-accent": "--vf-color-accent",
+    "--bf-color-brand": "--vf-color-brand",
+    "--bf-color-focus": "--vf-color-focus"
+};
+function cssVarBlock(vars) {
+    return `${Object.entries(vars)
+        .map(([name, value]) => `  ${name}: ${value};`)
+        .join("\n")}\n`;
+}
+function themeVars(tone) {
+    return VANILLA_THEME_COLOR_VARS[tone];
+}
+function themeValue(tone, source) {
+    return themeVars(tone)[source];
+}
+function componentAliasFallback(alias, tone, source) {
+    const fallback = themeValue(tone, source);
+    if (alias === "--bf-color-text-default") {
+        return `var(--bf-color-text, ${fallback})`;
+    }
+    if (alias === "--bf-color-text-muted") {
+        return `var(--bf-color-muted, ${fallback})`;
+    }
+    if (alias === "--bf-color-link-default") {
+        return `var(--bf-color-link, ${fallback})`;
+    }
+    if (alias === "--bf-color-background-default") {
+        return `var(--bf-color-bg, ${fallback})`;
+    }
+    if (alias === "--bf-color-background-alt") {
+        return `var(--bf-color-surface, ${fallback})`;
+    }
+    return fallback;
+}
+function aliasBlock(sources, tone, getFallback = (_alias, currentTone, source) => themeValue(currentTone, source)) {
+    const vars = {};
+    for (const [alias, source] of Object.entries(sources)) {
+        vars[alias] = `var(${source}, ${getFallback(alias, tone, source)})`;
+    }
+    return cssVarBlock(vars);
+}
+export function vanillaThemeColorVars(tone) {
+    return cssVarBlock(themeVars(tone));
+}
+export function foundryThemeRootColorVars(tone) {
+    return aliasBlock(FOUNDRY_THEME_ROOT_COLOR_SOURCES, tone);
+}
+export function foundryComponentColorVars(tone) {
+    return aliasBlock(FOUNDRY_COMPONENT_COLOR_SOURCES, tone, componentAliasFallback);
+}

package/docs/publishing.md

@@ -0,0 +1,66 @@
+# npm publication and downstream migration
+
+Baseline Foundry is a public npm package named `baseline-foundry`. The GitHub
+repository may remain private: npm publishes
+only the allowlisted package contents (`dist/`, `config/`, this publishing
+guide, `README.md`, `LICENSE`, and package metadata), not the source, demos,
+specs, or tests.
+
+A private npm package would still require account or organisation access and
+would not solve the collaborator problem. Publication therefore uses the
+public registry explicitly.
+
+## Installation
+
+Install the registry package:
+
+```bash
+npm install baseline-foundry
+```
+
+The attached GitHub release tarball is the fallback:
+
+```bash
+npm install https://github.com/lyubomir-popov/baseline-foundry/releases/download/v0.1.3/baseline-foundry-0.1.3.tgz
+```
+
+Do not install the Git tag or GitHub source archive. `dist/` is generated and
+gitignored, so only the npm package and attached npm tarball contain the public
+CSS, JSON, JavaScript, and type declarations.
+
+## Release checklist
+
+The initial `0.1.3` publication is bootstrapped interactively because npm can
+only attach a trusted publisher after a package exists. Routine releases use
+the OIDC workflow below.
+
+1. Bump BF to the next unused version and regenerate `package-lock.json`.
+2. Run `npm run release:check` and `npm pack --dry-run`; confirm the tarball
+   contains `dist/`, `config/`, `docs/publishing.md`, `README.md`, `LICENSE`,
+   and no source or local temporary files.
+3. Commit and push the exact release candidate.
+4. Publish from `.github/workflows/publish.yml`; npm trusted publishing uses a
+   short-lived GitHub Actions OIDC credential, so no npm token is stored.
+5. Verify `npm view baseline-foundry version`, then install the exact published
+   version into an empty directory and smoke-test the root, `build`, CSS, token,
+   surface, and four tier export paths.
+6. Tag the same commit and publish the GitHub release with the npm tarball
+   attached as a fallback artifact.
+
+## Compatibility
+
+Keeping the package name means normal consumers do not change imports:
+
+```js
+import { setupBaselineGridToggle } from "baseline-foundry";
+import { buildThemeFromConfig } from "baseline-foundry/build";
+import "baseline-foundry/styles.css";
+```
+
+Consumers using the attached `.tgz` can switch their dependency value to a
+semver range after publication; their JavaScript and CSS imports remain the
+same. Lockfiles will record a registry tarball instead of a file or URL source.
+
+Diagram Registry currently vendors generated CSS/tokens from a sibling
+checkout, so publishing does not alter its present build. It can adopt the npm
+artifact later as a separate, lockfile-visible migration.

package/package.json

@@ -0,0 +1,108 @@
+{
+  "name": "baseline-foundry",
+  "version": "0.1.3",
+  "description": "Lean baseline-aligned design system focused on typography, editorial flow, spacing, and grid primitives.",
+  "author": "Lyubomir Popov",
+  "type": "module",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/lyubomir-popov/baseline-foundry.git"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "files": [
+    "dist",
+    "config",
+    "docs/publishing.md",
+    "README.md",
+    "LICENSE"
+  ],
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    },
+    "./build": {
+      "types": "./dist/build.d.ts",
+      "import": "./dist/build.js"
+    },
+    "./presets": {
+      "types": "./dist/presets.d.ts",
+      "import": "./dist/presets.js"
+    },
+    "./types": {
+      "types": "./dist/types.d.ts",
+      "import": "./dist/types.js"
+    },
+    "./styles.css": "./dist/styles.css",
+    "./tokens.json": "./dist/tokens.json",
+    "./surfaces.json": "./dist/surfaces.json",
+    "./tiers/editorial.css": "./dist/tiers/editorial/styles.css",
+    "./tiers/documentation.css": "./dist/tiers/documentation/styles.css",
+    "./tiers/app.css": "./dist/tiers/app/styles.css",
+    "./tiers/os.css": "./dist/tiers/os/styles.css",
+    "./tiers/editorial.tokens.json": "./dist/tiers/editorial/tokens.json",
+    "./tiers/documentation.tokens.json": "./dist/tiers/documentation/tokens.json",
+    "./tiers/app.tokens.json": "./dist/tiers/app/tokens.json",
+    "./tiers/os.tokens.json": "./dist/tiers/os/tokens.json",
+    "./tiers/editorial.surfaces.json": "./dist/tiers/editorial/surfaces.json",
+    "./tiers/documentation.surfaces.json": "./dist/tiers/documentation/surfaces.json",
+    "./tiers/app.surfaces.json": "./dist/tiers/app/surfaces.json",
+    "./tiers/os.surfaces.json": "./dist/tiers/os/surfaces.json",
+    "./presets/prose.css": "./dist/presets/prose/styles.css",
+    "./presets/app-tier.css": "./dist/presets/app-tier/styles.css",
+    "./presets/prose.tokens.json": "./dist/presets/prose/tokens.json",
+    "./presets/app-tier.tokens.json": "./dist/presets/app-tier/tokens.json",
+    "./presets/prose.surfaces.json": "./dist/presets/prose/surfaces.json",
+    "./presets/app-tier.surfaces.json": "./dist/presets/app-tier/surfaces.json"
+  },
+  "scripts": {
+    "clean": "tsx scripts/clean.ts",
+    "setup:demo-font": "tsx scripts/setup-demo-font.ts",
+    "build:theme": "tsx scripts/build-theme.ts",
+    "build:lib": "tsc -p tsconfig.json",
+    "build": "npm run build:theme && npm run build:lib",
+    "demo:serve": "vite",
+    "demo": "npm run build && npm run demo:serve",
+    "test:build": "tsx scripts/validate-build.ts",
+    "test:behavior": "tsx scripts/verify-component-behavior.ts",
+    "test:components": "tsx scripts/verify-component-baselines.ts",
+    "test": "npm run build && npm run test:build && npm run test:components && npm run test:behavior",
+    "check:types": "tsc -p tsconfig.json --noEmit",
+    "audit": "npm audit && npm audit --omit=dev",
+    "release:check": "npm run setup:demo-font && npm run check:types && npm test && npm run qa:components && npm run audit",
+    "prepublishOnly": "npm run release:check",
+    "playwright:install": "playwright install chromium",
+    "compare:controls": "npm run build && tsx scripts/compare-controls.ts",
+    "compare:inline-surfaces": "npm run build && tsx scripts/compare-inline-surfaces.ts",
+    "verify:behavior": "npm run build && tsx scripts/verify-component-behavior.ts",
+    "verify:components": "npm run build && tsx scripts/verify-component-baselines.ts",
+    "screenshots:components": "npm run build && tsx scripts/capture-component-screenshots.ts",
+    "qa:components": "npm run build && tsx scripts/capture-component-screenshots.ts && tsx scripts/verify-component-baselines.ts",
+    "build:app": "tsx examples/app-tier/build.ts",
+    "demo:app": "npm run build:app && vite --host 127.0.0.1 --port 4175 --strictPort --open /examples/app-tier/",
+    "build:app-tier": "tsx examples/app-tier/build.ts",
+    "demo:app-tier": "npm run demo:app"
+  },
+  "keywords": [
+    "baseline-grid",
+    "vertical-rhythm",
+    "typography",
+    "editorial",
+    "grid"
+  ],
+  "license": "MIT",
+  "dependencies": {
+    "@lyubomir-popov/baseline-nudge-generator": "^1.5.1"
+  },
+  "devDependencies": {
+    "@fontsource-variable/ibm-plex-sans": "^5.3.0",
+    "@types/node": "^24.13.3",
+    "playwright": "^1.62.1",
+    "postcss": "^8.5.26",
+    "tsx": "^4.23.12",
+    "typescript": "^5.8.2",
+    "vite": "^7.3.6"
+  }
+}