@synopackageland/ui 0.20.9 → 0.20.10

package/docs/adaptive-layout.md

@@ -286,9 +286,10 @@ import {
 - `PageContent surface="auto"` puts the page straight on the content area: flush
   beside the sidebar and under the toolbar, at the DSM window's page padding,
   with no card, border or outer margin around it. The area is white, unless the
-  page holds a card (`Card`, `Surface`): then it is the page grey
-  (`--ui-bg`, the web canvas) and the cards lift off it with a 1px frame and
-  `--ui-shadow-card`, as on DSM's own card pages. A list page stays white: a
+  page holds a card (`Card`, `Surface`): then it is the card-page canvas
+  (`--ui-page-canvas`, a near-white tint) and the cards lift off it with a 1px
+  frame and `--ui-shadow-card`, as on DSM's own card pages. A web app can set
+  `--ui-app-web-canvas` to pick its own canvas. A list page stays white: a
   page with a `DataGrid` on it (not inside a card) keeps the white area when a
   `Surface` opens beside the list, such as a detail pane for the selected row;
   the pane keeps its 1px border and takes no shadow, so selecting a row never
@@ -296,7 +297,7 @@ import {
   release shares the DSM document and its stylesheet still has the earlier
   rules. Draw the pane with [`ListDetail`](list-detail.md), which is not a
   `Surface` and adds a resizable separator. `surface="card"` always stays
-  white. `surface="flat"` always takes the grey canvas, for multi-card
+  white. `surface="flat"` always takes the canvas, for multi-card
   dashboards. All three behave the same in the web, DSM-window and mobile
   presentations.
   `surface="none"` adds no page surface and removes the horizontal page gutters
@@ -385,11 +386,14 @@ Applications can adjust tokens per mode without CSS leaks into the DSM host:
 ```
 
 The web colour tokens are read with fallbacks, so a theme can also set them on
-any ancestor. Light defaults and the dark values the workbench uses:
+any ancestor. `--ui-app-web-canvas` defaults to the theme's card-page canvas
+(`--ui-page-canvas`), which is set on the theme (see
+[colour system](color-system.md)) and is the same in the web, DSM-window and
+phone presentations. Light defaults and the dark values the workbench uses:
 
 | Token | Light (default) | Dark |
 | --- | --- | --- |
-| `--ui-app-web-canvas` | `var(--ui-bg)` (`#f4f6f3`) | `var(--ui-bg)` (`#11161c`) |
+| `--ui-app-web-canvas` | `var(--ui-page-canvas)` (`#fafbf9`) | `var(--ui-bg)` (`#121513`) |
 | `--ui-app-web-surface` | `var(--ui-surface)` | `var(--ui-surface)` (`#1f2832`) |
 | `--ui-app-web-border` | `var(--ui-border)` | `#34404d` |
 | `--ui-app-web-shadow` | `var(--ui-shadow-card)` | `var(--ui-shadow-card)` |

package/docs/color-system.md

@@ -39,7 +39,8 @@ at 7:1 or more (`tests/css/palette.test.ts`).
 
 | Role | Step | DSM 7 |
 | --- | --- | --- |
-| `--ui-bg` | `#f4f6f3` | the page behind cards: a pale sage mist, light enough that cards read by their frame and shadow rather than a dark page |
+| `--ui-bg` | `#f4f6f3` | the app's page: a pale sage mist, light enough that cards read by their frame and shadow rather than a dark page |
+| `--ui-page-canvas` | `#fafbf9` | the canvas behind a page of cards: a near-white tint, a step lighter than the app page, so a card page sits beside a white one; the card's 1px frame and shadow do the separating |
 | `--ui-surface`, `--ui-surface-raised` | `gray-1` | white window, cards and panels; menus and dialogs add a shadow |
 | `--ui-surface-subtle`, `--ui-surface-inset` | `mist-a2` | faint block, 12% of `#bec8c0` |
 | `--ui-surface-hover` | `accent-a2` | list row hover, 4% blue |
@@ -121,6 +122,7 @@ The same roles, with the light page's sage carried into the greys:
 | Role | Dark | |
 | --- | --- | --- |
 | `--ui-bg` | `#121513` | the page |
+| `--ui-page-canvas` | the page | a card is the lighter layer, so a page of cards needs no extra tint |
 | `--ui-surface` | `#1b1f1c` | a card or panel |
 | `--ui-surface-raised` | `#242925` | a menu or dialog |
 | `--ui-text` | `#e3e8e4` | 13.4:1 on a card |

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@synopackageland/ui",
-  "version": "0.20.9",
+  "version": "0.20.10",
   "description": "Shared Vue 3 UI component library with a DSM 7 inspired application theme",
   "license": "MIT",
   "type": "module",
@@ -60,59 +60,6 @@
     "./themes/dsm7-embedded-reset.css": "./dist/themes/dsm7-embedded-reset.css",
     "./themes/dsm7-embedded-theme.css": "./dist/themes/dsm7-embedded-theme.css"
   },
-  "scripts": {
-    "check:docs": "node --test scripts/check-doc-versions.test.mjs && node scripts/check-doc-versions.mjs",
-    "dev": "vite build --watch",
-    "build": "vite build && vite build --mode json && vite build --mode rich-text && vite build --mode grid && vite build --mode cli && vite build --mode preview && vite build --mode embedded && node scripts/postbuild.mjs",
-    "lint": "eslint .",
-    "typecheck": "vue-tsc --noEmit -p tsconfig.json",
-    "test": "vitest run",
-    "test:watch": "vitest",
-    "test:changed": "echo \"test:changed skips the tests the changes since ${SYNOPKGLAND_GATE_BASE:-origin/master} do not reach (vitest --changed); pnpm check runs them all\" && vitest run --changed ${SYNOPKGLAND_GATE_BASE:-origin/master}",
-    "story": "histoire dev",
-    "story:build": "histoire build",
-    "check:host": "node scripts/dsm-host-shots.mjs",
-    "check:switch": "node scripts/check-switch.mjs",
-    "check:tabs": "node scripts/check-tabs.mjs",
-    "check:mobile": "node scripts/check-mobile-overflow.mjs",
-    "check:ui-patch": "node scripts/check-ui-patch.mjs",
-    "check:narrow": "node scripts/check-narrow-controls.mjs",
-    "check:drawer-form": "node scripts/check-drawer-form.mjs",
-    "check:responsive": "node scripts/check-responsive.mjs",
-    "check:adaptive": "node scripts/check-adaptive.mjs",
-    "check:sidebar-focus": "node scripts/check-sidebar-focus.mjs",
-    "check:json-render": "node scripts/check-json-render.mjs",
-    "check:motion": "node scripts/check-motion.mjs",
-    "check:topology": "node scripts/check-topology.mjs",
-    "check:wizard": "node scripts/check-wizard.mjs",
-    "check:edges": "node scripts/check-edges.mjs",
-    "check:data-grid": "node scripts/check-data-grid.mjs",
-    "check:truncation": "node scripts/check-truncation.mjs",
-    "check:link": "node scripts/check-link.mjs",
-    "check:text-select": "node scripts/check-text-select.mjs",
-    "check:date-picker": "node scripts/check-date-picker.mjs",
-    "check:full-page": "node scripts/check-full-page.mjs",
-    "check:detail-surface": "node scripts/check-detail-surface.mjs",
-    "check:internal": "node --test scripts/check-internal-content.test.mjs scripts/check-npm-metadata.test.mjs && node scripts/check-internal-content.mjs --repo .",
-    "check:npm-metadata": "node scripts/check-npm-metadata.mjs",
-    "check:package": "node scripts/check-package-content.mjs",
-    "check:public-api-consumer": "node scripts/check-public-api-consumer.mjs",
-    "notices:update": "node scripts/third-party-notices.mjs --write",
-    "notices:check": "node scripts/third-party-notices.mjs --check",
-    "check": "bash scripts/docker-check.sh \"npm run gates\"",
-    "check:fast": "bash scripts/docker-check.sh \"npm run gates\"",
-    "check:local-browser": "node scripts/app-local-browser.mjs",
-    "check:infotip": "node scripts/check-infotip.mjs",
-    "release:stage": "node scripts/stage-release.mjs",
-    "check:polish": "bash scripts/docker-check.sh --build --out .polish-shots 'node scripts/check-polish.mjs'",
-    "check:acceptance": "node scripts/check-acceptance.mjs",
-    "check:palette": "node scripts/check-palette.mjs",
-    "gates": "node scripts/gates.mjs",
-    "gates:full": "node scripts/gates.mjs --full",
-    "check:layout": "node scripts/check-layout.mjs",
-    "release:smoke": "node scripts/release-smoke.mjs",
-    "check:browser-install": "playwright install chromium"
-  },
   "peerDependencies": {
     "vue": "^3.5.0"
   },
@@ -132,44 +79,9 @@
     "@tiptap/vue-3": "3.32.1",
     "zod": "^4.6.5"
   },
-  "devDependencies": {
-    "@eslint/js": "10.0.1",
-    "@histoire/plugin-vue": "1.0.0-beta.1",
-    "@tailwindcss/vite": "4.3.3",
-    "@tanstack/vue-virtual": "3.13.39",
-    "@vitejs/plugin-vue": "6.0.9",
-    "@vue/test-utils": "2.5.1",
-    "@vueuse/core": "14.4.0",
-    "eslint": "10.11.0",
-    "eslint-plugin-vue": "10.11.1",
-    "flexsearch": "0.8.212",
-    "globals": "17.12.0",
-    "histoire": "1.0.0-beta.1",
-    "jsdom": "30.1.1",
-    "playwright": "1.58.2",
-    "reka-ui": "2.11.0",
-    "tailwindcss": "4.3.3",
-    "typescript": "5.9.3",
-    "typescript-eslint": "8.71.0",
-    "vite": "7.3.6",
-    "vite-plugin-dts": "5.1.1",
-    "vitest": "5.0.2",
-    "vscode-oniguruma": "2.0.1",
-    "vscode-textmate": "9.3.2",
-    "vue": "3.5.43",
-    "vue-eslint-parser": "10.4.1",
-    "vue-tsc": "3.3.11"
-  },
   "engines": {
     "node": ">=20"
   },
-  "packageManager": "pnpm@10.33.2",
-  "pnpm": {
-    "onlyBuiltDependencies": [
-      "esbuild",
-      "vue-demi"
-    ]
-  },
   "config": {
     "bundledRuntime": {
       "@tanstack/vue-virtual": "3.13.39",