@dogsbay/docs-layout 0.2.0-beta.126 → 0.2.0-beta.128

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dogsbay/docs-layout",
-  "version": "0.2.0-beta.126",
+  "version": "0.2.0-beta.128",
   "description": "Standard documentation layout components for Dogsbay",
   "type": "module",
   "exports": {
@@ -31,9 +31,9 @@
     "./json-ld": "./src/json-ld.ts"
   },
   "dependencies": {
-    "@dogsbay/primitives": "0.2.0-beta.126",
-    "@dogsbay/ui": "0.2.0-beta.126",
-    "@dogsbay/site-files": "0.2.0-beta.126"
+    "@dogsbay/primitives": "0.2.0-beta.128",
+    "@dogsbay/site-files": "0.2.0-beta.128",
+    "@dogsbay/ui": "0.2.0-beta.128"
   },
   "devDependencies": {
     "happy-dom": "^20.10.6",

package/src/DocsLayout.astro

@@ -784,6 +784,64 @@ const siteIcon = '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"
         --db-header-height: 3rem;
       }
 
+      /*
+        Diagrams drawn by Pele (`content.diagrams: pele`, plans/pele-diagrams.md).
+        Pele colours its SVGs from these variables, so a diagram takes the theme
+        and .dark switches them. Here rather than in Diagram.astro or global.css:
+        those are copied into a site once, this package is re-pinned on every
+        build. Borders are thin, so the theme's --border alone is too faint for
+        node outlines. The base mapping is the same as dogsbay-ssg's ssg.css.
+      */
+      .pele {
+        --pele-bg: var(--background);
+        --pele-fg: var(--foreground);
+        --pele-muted: var(--muted-foreground);
+        --pele-line: var(--foreground);
+        --pele-surface: var(--muted);
+        --pele-surface-alt: color-mix(in oklab, var(--muted), var(--foreground) 7%);
+        --pele-border: color-mix(in oklab, var(--border), var(--muted-foreground) 45%);
+        --pele-accent: var(--primary);
+        --pele-font: var(--font-sans);
+        --pele-font-mono: var(--font-code, monospace);
+        --pele-radius: calc(var(--radius) - 4px);
+        /*
+          Series colours (pie, xy, git, timeline, treemap, …; gantt's critical
+          tasks). Pele writes labels in --pele-bg on these fills, so they are
+          darker in light mode and lighter in dark mode. Its own palette is
+          fixed, and put white text on yellow (1.6:1). Same hues, in Pele's
+          order. dogsbay-ssg's ssg.css does not map these yet.
+        */
+        --pele-series-1: oklch(0.5 0.13 250);
+        --pele-series-2: oklch(0.5 0.15 55);
+        --pele-series-3: oklch(0.5 0.13 145);
+        --pele-series-4: oklch(0.5 0.16 25);
+        --pele-series-5: oklch(0.5 0.09 195);
+        --pele-series-6: oklch(0.5 0.12 95);
+        --pele-series-7: oklch(0.5 0.12 320);
+        --pele-series-8: oklch(0.5 0.06 60);
+        --pele-critical: var(--pele-series-4);
+        --pele-error: var(--pele-series-4);
+      }
+      .dark .pele {
+        --pele-series-1: oklch(0.78 0.13 250);
+        --pele-series-2: oklch(0.78 0.15 55);
+        --pele-series-3: oklch(0.78 0.13 145);
+        --pele-series-4: oklch(0.78 0.16 25);
+        --pele-series-5: oklch(0.78 0.09 195);
+        --pele-series-6: oklch(0.78 0.12 95);
+        --pele-series-7: oklch(0.78 0.12 320);
+        --pele-series-8: oklch(0.78 0.06 60);
+      }
+      /*
+        Diagram.astro inverts diagrams in dark mode, for Mermaid's fixed colours;
+        Pele's are already dark. Unlayered, so this wins over the dark:invert and
+        dark:hue-rotate utilities.
+      */
+      .diagram-content:has(> svg.pele),
+      .diagram-content > svg.pele {
+        filter: none;
+      }
+
       /*
         Internal/external link icons. Opt-in via `content.linkIcons`,
         which sets `data-link-icons` (which kinds are active) and the