@synopackageland/ui 0.14.6 → 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/button-policy.md

@@ -0,0 +1,62 @@
+# Button policy
+
+DSM 7 draws two button shapes. A **capsule** belongs to the bar that closes a
+window, dialog or form: OK / Cancel, Apply / Reset, a wizard's Next, a
+confirmation's Delete. Every other button is a **tool button** with the 3px
+control radius: toolbars, page headers, sections, rows, fields. The components
+pick the shape from where a button sits; an App chooses only the variant.
+
+![Each case in the light theme](screenshots/button-policy-light.png)
+
+Measured on DSM 7.4 (Control Panel, Package Center, File Station): every button
+is 28px high. A footer capsule is at least 80px wide, 120px for the blue or red
+one; a tool button sizes to its label with 13px each side. Colours and states
+are in [dsm-native-metrics.md](dsm-native-metrics.md).
+
+## Where each button goes
+
+| Place | Component | Shape | Variants |
+| --- | --- | --- | --- |
+| Dialog, sheet or wizard footer | `Dialog`, `Sheet`, `Wizard` `#footer` | capsule | Cancel `secondary`, then OK `primary` |
+| Confirmation of a destructive action | `Dialog` `#footer` | capsule | Cancel `secondary`, then Delete `danger` |
+| Form or window footer | `FormActions`, `AppActionBar`, `Footbar`, `Panel` `#fbar` | capsule | Reset `secondary`, then Apply `primary` |
+| Notification | `Notification` `confirm` / `cancel` | capsule | Cancel `secondary`, then the action `primary` |
+| Toolbar | `AppToolbar`, a row above a list | tool | `secondary`; `SplitButton` for Create and its variants |
+| Page header | `PageHeader` `#actions` | tool | one refresh `IconButton` per page |
+| Section or card | `SettingsSection` / `Card` body, `#actions`, `#footer` | tool | `secondary`; a Save / Cancel row there goes in `FormActions` |
+| Beside a field | `InputGroup` | tool | `secondary` (Open, Copy, Test) |
+| Row of a list or grid | `ListItem` `#actions`, an `actions` column | tool | `IconButton` with a `label` |
+| Navigation, help, external page | `Link` | text link | not a button |
+
+## Rules
+
+1. A capsule only ends something: it closes a dialog, applies a form or moves a
+   wizard. An action that stays on the page, such as Disable this connection,
+   Open or Check again, is a tool button even in a section footer.
+2. One main action per footer: one `primary`, or one `danger` for a
+   destructive confirmation. The others are `secondary`.
+3. The main action goes last, at the right edge: Cancel then OK, Reset then
+   Apply. A footer is right-aligned, except `FormActions` in a page form, which
+   starts at the field edge.
+4. Toolbar and row actions are grey, Delete too. Red appears in the dialog that
+   confirms the deletion, not on the button that opens it.
+5. Inside a page, use `primary` only for the one step that unblocks the page,
+   such as Sign in in a callout; at most one per section.
+6. Keep the default size. `sm` and `lg` exist for dense rows and touch layouts;
+   neighbouring buttons share one size.
+7. A disabled button keeps its shape and place. Say why next to it.
+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.
+
+## What the components do
+
+- A Button takes its shape from the closest footer: inside `Dialog`, `Sheet`
+  and `Wizard` footers, `FormActions`, `AppActionBar`, `Footbar`, a `Panel`
+  `#fbar` or a `Notification` it is a capsule, everywhere else a tool button.
+  Set `kind="tool"` on one footer button to keep it a tool button (Help, say).
+- In development, a Button warns in the console when `kind="action"` is set
+  outside a footer, when a footer has two main actions, or when the main action
+  is not last. Production builds do not check.
+
+![Each case in the dark theme, in a DSM window](screenshots/button-policy-dark.png)

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/docs/layout-rules.md

@@ -15,8 +15,9 @@ These rules keep pages built from `@synopackageland/ui` consistent. The componen
 
 ## Actions
 
+- [Button policy](button-policy.md) says which button goes where: its shape, variant and order.
 - Buttons that belong together sit in one row with an 8px gap: `FormActions` in a form, the `#footer` slot in a section or card.
-- Footer rows draw capsule `action` buttons without a `kind`: `FormActions`, `Footbar`, `AppActionBar`, and the footers of `Dialog`, `Wizard`, `Sheet`, `SettingsSection`, `Card` and `Panel` (`#fbar`). `kind="tool"` opts one button out. Header actions and content stay `tool` buttons.
+- Only the bar that closes a dialog or form draws capsule `action` buttons, without a `kind`: `FormActions`, `Footbar`, `AppActionBar`, a `Notification`'s actions, and the footers of `Dialog`, `Wizard`, `Sheet` and `Panel` (`#fbar`), with the main action last. `kind="tool"` opts one button out. A `SettingsSection` or `Card` footer, header actions and content stay `tool` buttons; put a section's Save / Cancel in `FormActions`.
 - On a settings form longer than the window, `FormActions sticky` keeps Apply in view at the bottom over a divider. Do not write your own sticky footer.
 - Each page has one refresh, in the page header. Panels expose `refresh()` for it instead of their own button.
 - A disabled primary button keeps readable text. Put the reason next to it, such as "Enter the password to confirm."

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@synopackageland/ui",
-  "version": "0.14.6",
+  "version": "0.14.8",
   "description": "Shared Vue 3 UI component library with a DSM 7 inspired application theme",
   "license": "MIT",
   "type": "module",
@@ -15,6 +15,7 @@
     "README.md",
     "docs/adaptive-layout.md",
     "docs/app-local-modal.md",
+    "docs/button-policy.md",
     "docs/color-system.md",
     "docs/component-defaults-0.5.7.md",
     "docs/json-ui.md",