@synopackageland/ui 0.20.9 → 0.20.11

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/button-policy.md

@@ -52,6 +52,11 @@ are in [dsm-native-metrics.md](dsm-native-metrics.md).
 8. An icon-only action is an `IconButton` with a `label`; it shows as its
    tooltip and names the button for screen readers.
 9. Labels are verbs, without a closing period: Apply, Disable this connection.
+10. A label is plain text, with at most an icon before or after it:
+    `<Button><Mic :size="16" />Record</Button>`. The Button counts only an `svg`
+    or an element marked `data-icon` (`Icon` and `StatusDot` are) as the icon:
+    it gets the 8px gap and sits on the label's centre line. Do not wrap the
+    text in a `<span>`; a span is read as text, so it gets no gap of its own.
 
 ## What the components do
 

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 |
@@ -110,10 +111,12 @@ step 3, so links and selected labels stay readable on a dark page.
 ## Dark theme
 
 The dark theme (`src/theme/dark.css`) ships inside `theme.css` and the embedded stylesheets. It applies wherever
-`data-ui-color-scheme="dark"` is set: on the app root through
-`<AppRoot color-scheme="dark">`, or on `<html>` for a full page (an app with
-an accent still passes `color-scheme="dark"` to AppRoot, which derives the
-accent for it). The library does not follow `prefers-color-scheme` by itself;
+`data-ui-color-scheme="dark"` is set: on the app root (`[data-ui-app]`)
+through `<AppRoot color-scheme="dark">`. With `theme.css` on a page of your own,
+`<html data-ui-color-scheme="dark">` works too; the embedded stylesheets (a DSM
+window) are scoped to the app root and read the attribute only there, never on
+the host's `<html>` (an app with an accent passes `color-scheme="dark"` to
+AppRoot in any case, which derives the accent for it). The library does not follow `prefers-color-scheme` by itself;
 the host decides and sets the attribute.
 
 The same roles, with the light page's sage carried into the greys:
@@ -121,6 +124,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/docs/theme-hooks.md

@@ -31,7 +31,7 @@ here stay implementation details and can change in any release.
 | --- | --- | --- |
 | `data-ui-app` | `AppRoot`'s root and its floating hosts (portals) | present |
 | `data-ui-theme`, `data-ui-density`, `data-ui-accent` | the app root (mirrored on floating hosts) | theme name, `compact`/`comfortable`, present |
-| `data-ui-color-scheme` | the app root (AppRoot `color-scheme`, mirrored on floating hosts) or `<html>` | `dark` |
+| `data-ui-color-scheme` | the app root (AppRoot `color-scheme`, mirrored on floating hosts); `<html>` only with `theme.css`, not the embedded stylesheets | `dark` |
 | `data-ui-presentation` | `AppRoot` root | `mobile` (640px or narrower), else `web` for a `full-page` root or one holding an `AppLayout` with `wide-layout="web"` from 960px, else `window` (a DSM window at any width) |
 | `data-ui-floating` | a floating host (dialog, menu, popover) | present |
 | `data-ui-layout-mode` | `AppLayout` root | `mobile`, `window`, `web` |

package/docs/wizard.md

@@ -53,6 +53,10 @@ const open = ref(false)
 - **Text.** `description` is one short line at the top of the step, under the
   hero, without a closing period. Keep the content to the controls the step
   needs; it may be wide (a row of cards) or a form.
+- **Layout.** The step lays its content out as written, in block flow: it
+  does not stack its children with a gap. Several blocks go in one `Form`
+  (fields one field gap apart) or a `<Space direction="column">`; a lone
+  Callout, paragraph or card grid needs no wrapper.
 - **Choices.** A step's 2–4 options are choice cards:
   `<RadioGroup variant="card" orientation="horizontal" :options>`. Each card
   shows the option's `icon` in a tile, its label and one line, and keeps the

package/package.json

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