@synopackageland/ui 0.14.7 → 0.14.8

package/docs/adaptive-layout.md

@@ -127,12 +127,15 @@ import {
   a full-page Portal to enable the full-page layout at 1200px or wider.
 - `AppLayout` defaults to `responsive=true`. Set `:responsive="false"`
   only if the host application intentionally implements its own complete responsive shell.
-- `PageContent surface="auto"` puts the page straight on a white content area in
-  the web presentation: flush beside the sidebar and under the toolbar, at the
-  DSM window's page padding, with no card, border or outer margin around it.
-  `surface="card"` is the same. Use `surface="flat"` for multi-card dashboards:
-  the content area becomes the canvas and top-level cards lift off it. DSM-window
-  and mobile presentations are unchanged by these three values.
+- `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. `surface="card"` always stays
+  white. `surface="flat"` always takes the grey 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
   in **all** presentations, for editors or standalone content that owns its
   layout. It preserves width limits, fill height and section gaps; it does not
@@ -221,10 +224,10 @@ any ancestor. Light defaults and the dark values the workbench uses:
 
 | Token | Light (default) | Dark |
 | --- | --- | --- |
-| `--ui-app-web-canvas` | `var(--ui-gray-2)` | `#151b22` |
-| `--ui-app-web-surface` | `var(--ui-surface)` | `#1f2730` |
+| `--ui-app-web-canvas` | `var(--ui-bg)` (`#f0f2f5`) | `var(--ui-bg)` (`#11161c`) |
+| `--ui-app-web-surface` | `var(--ui-surface)` | `var(--ui-surface)` (`#1f2832`) |
 | `--ui-app-web-border` | `var(--ui-gray-a6)` | `#34404d` |
-| `--ui-app-web-shadow` | `0 1px 2px rgba(31,45,61,.05), 0 4px 16px rgba(31,45,61,.06)` | `0 1px 2px rgba(0,0,0,.3), 0 4px 16px rgba(0,0,0,.25)` |
+| `--ui-app-web-shadow` | `var(--ui-shadow-card)` | `var(--ui-shadow-card)` |
 | `--ui-web-sidebar-collapsed-width` | `64px` | same |
 
 `AppLayout navigation="top"` puts the navigation in a bar above the page in the

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`, `--ui-surface`, `--ui-surface-raised` | `gray-1` | white window and panels |
+| `--ui-bg` | `#f0f2f5` (between `gray-2` and `gray-3`) | the page behind cards: the cool grey of Storage Manager's Overview (`rgb(244 248 250)`), one step deeper |
+| `--ui-surface`, `--ui-surface-raised` | `gray-1` | white window, cards and panels; menus and dialogs add a shadow |
 | `--ui-surface-subtle`, `--ui-surface-inset` | `gray-a2` | grey block, 18% of `#c6d4e0` |
 | `--ui-surface-hover` | `accent-a2` | list row hover, 4% blue |
 | `--ui-surface-selected`, `--ui-primary-soft` | `accent-a3` | selected row and nav item, 10% blue |

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@synopackageland/ui",
-  "version": "0.14.7",
+  "version": "0.14.8",
   "description": "Shared Vue 3 UI component library with a DSM 7 inspired application theme",
   "license": "MIT",
   "type": "module",