@synopackageland/ui 0.14.10 → 0.14.11

package/docs/adaptive-layout.md

@@ -224,9 +224,9 @@ any ancestor. Light defaults and the dark values the workbench uses:
 
 | Token | Light (default) | Dark |
 | --- | --- | --- |
-| `--ui-app-web-canvas` | `var(--ui-bg)` (`#f0f2f5`) | `var(--ui-bg)` (`#11161c`) |
+| `--ui-app-web-canvas` | `var(--ui-bg)` (`#f4f6f3`) | `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-border` | `var(--ui-border)` | `#34404d` |
 | `--ui-app-web-shadow` | `var(--ui-shadow-card)` | `var(--ui-shadow-card)` |
 | `--ui-web-sidebar-collapsed-width` | `64px` | same |
 

package/docs/color-system.md

@@ -39,25 +39,25 @@ at 7:1 or more (`tests/css/palette.test.ts`).
 
 | Role | Step | DSM 7 |
 | --- | --- | --- |
-| `--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-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-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-subtle`, `--ui-surface-inset` | `mist-a2` | faint block, 12% of `#bec8c0` |
 | `--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 |
 | `--ui-text` | `gray-12` | `#414b55` |
 | `--ui-text-secondary` | `gray-a11` | 82% of `#414b55` |
 | `--ui-text-muted`, `--ui-text-disabled` | `gray-a9` | 40% of `#414b55`, placeholder and disabled text |
-| `--ui-border` | `gray-a6` | field frame, 70% of `#c6d4e0` |
-| `--ui-border-strong`, `--ui-control-border-hover` | `gray-a7` | hovered frame, 40% of `#7c8a98` |
-| `--ui-border-subtle` | `gray-a3` | grid rules, 40% of `#c6d4e0` |
-| `--ui-control-bg` | `gray-a3` | button fill, 40% of `#c6d4e0` |
-| `--ui-control-bg-active` | `gray-a6` | pressed button, 70% of `#c6d4e0` |
-| `--ui-control-border-active` | `gray-a8` | pressed frame, 55% of `#7c8a98` |
+| `--ui-border` | `mist-a6` | field and card frame, 50% of `#bec8c0` |
+| `--ui-border-strong`, `--ui-control-border-hover` | `mist-a7` | hovered frame, 40% of `#748278` |
+| `--ui-border-subtle` | `mist-a3` | grid rules, 26% of `#bec8c0` |
+| `--ui-control-bg` | `mist-a3` | button fill, 26% of `#bec8c0` |
+| `--ui-control-bg-active` | `mist-a6` | pressed button, 50% of `#bec8c0` |
+| `--ui-control-border-active` | `mist-a8` | pressed frame, 55% of `#748278` |
 | `--ui-primary`, `-hover`, `-active` | `accent-9`, `-10`, `-11` | blue button at rest, hovered, pressed |
 | `--ui-primary-foreground` | `accent-contrast` | white label |
 | `--ui-focus-ring` | `accent-a7` | 50% blue |
 | `--ui-info`, `--ui-success`, `--ui-warning`, `--ui-danger` | step 9 of each tone | status dots, bars, icons |
-| `--ui-{tone}-soft` | `a3` of each tone (`gray-a3` for neutral) | badge fill |
+| `--ui-{tone}-soft` | `a3` of each tone (`mist-a3` for neutral) | badge fill |
 | `--ui-{tone}-text` | step 11 of each tone (`gray-11` for neutral) | badge text |
 | `--ui-danger-hover`, `--ui-danger-active` | `red-10`, `red-11` | red button hovered, pressed |
 | `--ui-warning-accent` | `orange-10` | a warning Callout's or Toast's top light, glow and icon |
@@ -71,9 +71,9 @@ The scales follow DSM where the two disagree:
 - **DSM blue with a white label reads at 4.0:1.** That is under the 4.5:1 AA
   asks of body text and above the 3:1 it asks of a control. DSM's own buttons
   use it, so the default accent keeps it. An app accent must reach 4.5:1.
-- **Grid rules are step 3, not step 6.** DSM draws them at 40% of `#c6d4e0`,
-  as light as a button fill.
-- **A pressed button is step 6.** DSM fills it at 70% of `#c6d4e0`, the colour
+- **Grid rules are step 3, not step 6.** DSM draws them as light as a button
+  fill; the theme draws both in its mist (26% of `#bec8c0`).
+- **A pressed button is step 6.** DSM fills it in the colour
   of a field's frame.
 - **Orange step 10 is darker than DSM's hover orange,** so a warning Callout's
   icon keeps 3:1 on its tint.

package/package.json

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