@bpmnkit/astro-shared 0.0.16 → 0.1.0

package/README.md

@@ -1,7 +1,7 @@
 <div align="center">
   <a href="https://bpmnkit.com"><img src="https://bpmnkit.com/favicon.svg" width="72" height="72" alt="BPMN Kit logo"></a>
   <h1>@bpmnkit/astro-shared</h1>
-  <p>Shared CSS design tokens, aurora background, site metadata, and SEO helpers for BPMN Kit Astro apps</p>
+  <p>Shared CSS design tokens, page ground, site metadata, and SEO helpers for BPMN Kit Astro apps</p>
 
   [![npm](https://img.shields.io/npm/v/@bpmnkit/astro-shared?style=flat-square&color=6244d7)](https://www.npmjs.com/package/@bpmnkit/astro-shared)
   [![license](https://img.shields.io/npm/l/@bpmnkit/astro-shared?style=flat-square)](https://github.com/bpmnkit/monorepo/blob/main/LICENSE)
@@ -16,7 +16,7 @@
 
 ## Overview
 
-`@bpmnkit/astro-shared` provides shared CSS imports, site metadata, and SEO building blocks used across BPMN Kit's Astro-based apps (landing page, docs, learn, blog). It re-exports the design tokens from `@bpmnkit/ui`, adds a global aurora background animation, and ships a `<Seo>` head component plus schema.org JSON-LD helpers so every site emits consistent titles, canonicals, Open Graph tags, and structured data.
+`@bpmnkit/astro-shared` provides shared CSS imports, site metadata, and SEO building blocks used across BPMN Kit's Astro-based apps (landing page, docs, learn, blog). It exposes the bpmnkit.com design system's tokens — derived from the `--bpmnkit-ds-*` set `@bpmnkit/ui` owns, under the same short names the landing site reads — sets the flat page ground, and ships a `<Seo>` head component plus schema.org JSON-LD helpers so every site emits consistent titles, canonicals, Open Graph tags, and structured data.
 
 This package is primarily intended for internal use by BPMN Kit's own Astro applications.
 
@@ -95,6 +95,7 @@ import { articleJsonLd } from "@bpmnkit/astro-shared/seo.js"
 | [`@bpmnkit/api`](https://www.npmjs.com/package/@bpmnkit/api) | Camunda 8 REST API TypeScript client |
 | [`@bpmnkit/ascii`](https://www.npmjs.com/package/@bpmnkit/ascii) | Render BPMN diagrams as Unicode ASCII art |
 | [`@bpmnkit/docspack`](https://www.npmjs.com/package/@bpmnkit/docspack) | BPMN Kit docs as an offline docspack package for AI agents |
+| [`@bpmnkit/camunda-docspack`](https://www.npmjs.com/package/@bpmnkit/camunda-docspack) | Camunda 8 docs as an offline docspack package for AI agents |
 | [`@bpmnkit/ui`](https://www.npmjs.com/package/@bpmnkit/ui) | Shared design tokens and UI components |
 | [`@bpmnkit/profiles`](https://www.npmjs.com/package/@bpmnkit/profiles) | Shared auth, profile storage, and client factories for CLI & proxy |
 | [`@bpmnkit/operate`](https://www.npmjs.com/package/@bpmnkit/operate) | Monitoring & operations frontend for Camunda clusters |
@@ -105,6 +106,7 @@ import { articleJsonLd } from "@bpmnkit/astro-shared/seo.js"
 | [`@bpmnkit/patterns`](https://www.npmjs.com/package/@bpmnkit/patterns) | Domain process patterns for BPMNKit AIKit |
 | [`@bpmnkit/reebe-wasm`](https://www.npmjs.com/package/@bpmnkit/reebe-wasm) | WebAssembly BPMN engine for browser simulation |
 | [`@bpmnkit/worker-client`](https://www.npmjs.com/package/@bpmnkit/worker-client) | Thin Zeebe REST client for standalone workers |
+| [`@bpmnkit/user-tasks`](https://www.npmjs.com/package/@bpmnkit/user-tasks) | Embeddable user task widget for Camunda 8 |
 | [`@bpmnkit/cli-sdk`](https://www.npmjs.com/package/@bpmnkit/cli-sdk) | Plugin authoring SDK for the casen CLI |
 | [`@bpmnkit/create-casen-plugin`](https://www.npmjs.com/package/@bpmnkit/create-casen-plugin) | Scaffold a new casen CLI plugin in seconds |
 | [`@bpmnkit/casen-report`](https://www.npmjs.com/package/@bpmnkit/casen-report) | HTML reports from Camunda 8 incident and SLA data |

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bpmnkit/astro-shared",
-  "version": "0.0.16",
+  "version": "0.1.0",
   "private": false,
   "type": "module",
   "exports": {
@@ -22,13 +22,14 @@
     "bpmn",
     "astro",
     "design-tokens",
+    "design-system",
     "shared",
     "seo",
     "css",
     "typescript"
   ],
   "dependencies": {
-    "@bpmnkit/ui": "0.1.0"
+    "@bpmnkit/ui": "0.3.0"
   },
   "license": "MIT",
   "publishConfig": {
@@ -38,12 +39,13 @@
     "type": "git",
     "url": "https://github.com/bpmnkit/monorepo"
   },
-  "description": "Shared CSS design tokens, aurora background, and site metadata for BPMN Kit Astro apps",
+  "description": "Shared CSS design tokens, page ground, and site metadata for BPMN Kit Astro apps",
   "homepage": "https://bpmnkit.com",
   "bugs": {
     "url": "https://github.com/bpmnkit/monorepo/issues"
   },
   "scripts": {
-    "check": "biome check ."
+    "check": "biome check .",
+    "test": "vitest run"
   }
 }

package/src/background.css

@@ -1,90 +1,16 @@
-/* ── Aurora background ──────────────────────────────────────────── */
-.aurora {
-	position: fixed;
-	inset: 0;
-	pointer-events: none;
-	overflow: hidden;
-	z-index: -1;
-}
-
-.orb {
-	position: absolute;
-	border-radius: 50%;
-	filter: blur(80px);
-	opacity: 0.55;
-}
-
-.orb-1 {
-	width: 600px;
-	height: 600px;
-	top: -200px;
-	left: -100px;
-	background: radial-gradient(circle, oklch(55% 0.22 280 / 0.7), transparent 70%);
-	animation: drift1 14s ease-in-out infinite alternate;
-}
-
-.orb-2 {
-	width: 500px;
-	height: 500px;
-	top: -100px;
-	right: -80px;
-	background: radial-gradient(circle, oklch(72% 0.18 185 / 0.5), transparent 70%);
-	animation: drift2 18s ease-in-out infinite alternate;
-}
-
-.orb-3 {
-	width: 400px;
-	height: 400px;
-	bottom: 0;
-	left: 35%;
-	background: radial-gradient(circle, oklch(68% 0.22 340 / 0.35), transparent 70%);
-	animation: drift3 22s ease-in-out infinite alternate;
-}
-
-@keyframes drift1 {
-	from {
-		transform: translate(0, 0) scale(1);
-	}
-	to {
-		transform: translate(60px, 40px) scale(1.1);
-	}
-}
-
-@keyframes drift2 {
-	from {
-		transform: translate(0, 0) scale(1.05);
-	}
-	to {
-		transform: translate(-50px, 60px) scale(0.95);
-	}
-}
-
-@keyframes drift3 {
-	from {
-		transform: translate(0, 0) scale(0.9);
-	}
-	to {
-		transform: translate(40px, -30px) scale(1.1);
-	}
-}
-
-.dots {
-	position: fixed;
-	inset: 0;
-	pointer-events: none;
-	z-index: -1;
-	background-image: radial-gradient(oklch(55% 0.04 270 / 0.5) 1px, transparent 1px);
-	background-size: 28px 28px;
-	mask-image: radial-gradient(ellipse 80% 60% at 50% 40%, black 20%, transparent 80%);
-	-webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 40%, black 20%, transparent 80%);
-}
-
-.grain {
-	position: fixed;
-	inset: 0;
-	pointer-events: none;
-	z-index: -1;
-	opacity: 0.035;
-	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='256' height='256'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
-	background-size: 256px;
+/* ── Page ground ─────────────────────────────────────────────────────────────
+ * The design system's ground is flat: one paper colour, and depth is a 1px
+ * hairline. This file used to draw the 2025 aurora — three blurred gradient
+ * orbs drifting on a loop, a masked dot grid and a fractal-noise grain layer —
+ * which is the `filter: blur`, `radial-gradient` and animated-decoration the
+ * system rules out. It is kept as the one rule a page needs so the layouts'
+ * import keeps working and the ground stays in one place.
+ *
+ * `.aurora`, `.orb`, `.dots` and `.grain` are deliberately no longer defined:
+ * a layout that still renders those elements now renders nothing, rather than
+ * quietly keeping the old brand alive.
+ * ─────────────────────────────────────────────────────────────────────────── */
+
+html {
+	background: var(--ground, #f4f5f7);
 }

package/src/tokens.css

@@ -1,33 +1,86 @@
-/* ── BPMN SDK brand tokens (Astro apps) ─────────────────────────────────────
- * Imports the canonical --bpmnkit-* token set, then maps them to the shorter
- * --* names used by the landing / learn / docs layouts so those templates
- * don't need updating.  Aurora / layout tokens live here too.
+/* ── BPMN Kit design-system tokens (Astro apps) ──────────────────────────────
+ * Imports the canonical `--bpmnkit-*` token set, then exposes the short names
+ * that the Astro layouts read — the same vocabulary `apps/landing`'s
+ * `global.css` declares, with the same values, so a visitor moving between
+ * bpmnkit.com and a sibling site crosses no boundary.
+ *
+ * Everything here is derived from `--bpmnkit-ds-*` rather than restated, so
+ * `@bpmnkit/ui` stays the single source of truth for the system.
+ *
+ * This used to map onto the product palette (`--bpmnkit-bg`, `--bpmnkit-accent`
+ * …) and carried the 2025 aurora's layout tokens beside it: a 14px radius and a
+ * `--pink`. Both are gone. The system is square, flat and spends one accent.
  * ─────────────────────────────────────────────────────────────────────────── */
 
 @import "@bpmnkit/ui/tokens.css";
 
-/* Map --bpmnkit-* → short names used in Astro layout templates */
 :root {
-	--bg: var(--bpmnkit-bg);
-	--bg-card: var(--bpmnkit-surface);
-	--surface: var(--bpmnkit-surface);
-	--bg-code: var(--bpmnkit-surface-2);
-	--border: var(--bpmnkit-border);
-	--text: var(--bpmnkit-fg);
-	--text-muted: var(--bpmnkit-fg-muted);
-	--accent: var(--bpmnkit-accent);
-	--accent-bright: var(--bpmnkit-accent-bright);
-	--accent-glow: var(--bpmnkit-accent-subtle);
-	--teal: var(--bpmnkit-teal);
-	--success: var(--bpmnkit-success);
-	--warn: var(--bpmnkit-warn);
-	--danger: var(--bpmnkit-danger);
-
-	/* Astro-specific layout tokens */
-	--pink: oklch(68% 0.22 340);
-	--font-mono: var(--bpmnkit-font-mono);
-	--font-sans: var(--bpmnkit-font);
-	--max-width: 1120px;
-	--nav-h: 60px;
-	--radius: 14px;
+	/* Ground */
+	--ground: var(--bpmnkit-ds-bg);
+	--ground-alt: var(--bpmnkit-ds-bg-alt);
+	--panel: var(--bpmnkit-ds-canvas);
+
+	/* Ink */
+	--ink: var(--bpmnkit-ds-ink);
+	--ink-body: var(--bpmnkit-ds-ink-2);
+	--ink-body-soft: var(--bpmnkit-ds-ink-3);
+	--ink-meta: var(--bpmnkit-ds-ink-4);
+	--rule: var(--bpmnkit-ds-line);
+	--rule-soft: var(--bpmnkit-ds-line-soft);
+	--rule-strong: var(--bpmnkit-ds-line-strong);
+
+	/* Accent — one, and one only */
+	--accent: var(--bpmnkit-ds-accent);
+	--accent-hover: var(--bpmnkit-ds-accent-hover);
+	--accent-on-ink: var(--bpmnkit-ds-accent-on-dark);
+	--accent-tint: var(--bpmnkit-ds-accent-tint);
+
+	/* Ink surfaces (code panels, dark bands, footer) */
+	--ink-ground: var(--bpmnkit-ds-dark);
+	--ink-rule: var(--bpmnkit-ds-line-dark);
+	--ink-fg: var(--bpmnkit-ds-ink-on-dark);
+	--ink-fg-muted: var(--bpmnkit-ds-ink-on-dark-2);
+
+	/* Code on ink */
+	--code-bg: var(--bpmnkit-ds-dark-code);
+	--code-fg: var(--bpmnkit-ds-code-text);
+	--code-comment: var(--bpmnkit-ds-code-comment);
+	--code-str: var(--bpmnkit-ds-code-string);
+	--code-prompt: var(--bpmnkit-ds-code-prompt);
+
+	/* Semantic state — exempt from the one-accent rule */
+	--state-good: var(--bpmnkit-success);
+	--state-warn: var(--bpmnkit-warn);
+	--state-bad: var(--bpmnkit-danger);
+
+	/* Type — two roles: sans for prose, mono for every label and datum */
+	--font-sans: var(--bpmnkit-ds-font-sans);
+	--font-mono: var(--bpmnkit-ds-font-mono);
+
+	/* Layout */
+	--max-width: 1180px;
+	--gutter: var(--bpmnkit-ds-page-gutter);
+	--nav-h: 56px;
+	--section-pad: 64px;
+	--radius: 0;
+
+	/* Aliases the layouts and the packages they embed still read. */
+	--bg: var(--ground);
+	--bg-card: var(--panel);
+	--surface: var(--panel);
+	--bg-code: var(--code-bg);
+	--inline-code-bg: var(--ground-alt);
+	--border: var(--rule);
+	--text: var(--ink);
+	--text-muted: var(--ink-body-soft);
+	--accent-bright: var(--accent);
+	--accent-glow: var(--accent-tint);
+	--success: var(--state-good);
+	--warn: var(--state-warn);
+	--danger: var(--state-bad);
+	/* The system has one accent, so the second brand colour resolves to it. */
+	--teal: var(--accent);
+	/* BPMN strokes and labels belong to the diagram renderer, not the chrome:
+	   an illustration of a symbol takes this rather than the accent. */
+	--diagram-ink: var(--bpmnkit-ds-diagram-ink);
 }