@synopackageland/ui 0.14.10 → 0.15.0

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.
@@ -101,6 +101,42 @@ properties, for an app's own parts. The colour must be opaque `#rgb`,
 A light colour comes out darker than it went in: `#ffd400` becomes a deep
 amber, because a white label does not read on yellow.
 
+In the dark theme, `AppRoot color-scheme="dark"` derives the accent with
+`accentScale(color, { dark: true })`: step 9 and 10 are the same fills, so a
+button keeps its white label; steps 1–8 are thicker tints laid on the dark
+card (4–70%); steps 11 and 12 add white until they read at 4.5:1 and 7:1 on
+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;
+the host decides and sets the attribute.
+
+The same roles, with the light page's sage carried into the greys:
+
+| Role | Dark | |
+| --- | --- | --- |
+| `--ui-bg` | `#121513` | the page |
+| `--ui-surface` | `#1b1f1c` | a card or panel |
+| `--ui-surface-raised` | `#242925` | a menu or dialog |
+| `--ui-text` | `#e3e8e4` | 13.4:1 on a card |
+| `--ui-text-secondary` | 74% of the text | 7.9:1 on a card |
+| `--ui-text-muted` | 50% of the text | |
+| `--ui-border`, `-strong`, `-subtle` | mist at 16%, 26%, 9% | `rgba(200, 214, 204, …)` |
+| `--ui-primary` | DSM blue `#057feb` | white label 4:1, as in light |
+| `--ui-accent-11` | `#3597ef` | link text, 4.5:1 on step 3 |
+| `--ui-info-text` … `--ui-danger-text` | `#7dbdf5`, `#6fdc8a`, `#f8bd84`, `#f59a9a` | 6.6:1 or more on their soft fill |
+| `--ui-*-soft` | the tone at 18% | |
+
+The tones' solid fills, radii, spacing and type are the light values. The
+masks and shades (`--ui-overlay`, `--ui-drawer-backdrop`,
+`--ui-scroll-edge-shade`), shadows, tooltip, scroll bar and switch thumb have
+dark values too; a component draws no colour of its own outside these tokens.
+
 ## Lines and text
 
 `--ui-hairline` is 1px, and 0.5px (one device pixel) from 2dppx up. Menu

package/docs/theme-hooks.md

@@ -31,6 +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-presentation` | `AppRoot` root | `mobile`, `window`, `web` |
 | `data-ui-floating` | a floating host (dialog, menu, popover) | present |
 | `data-ui-layout-mode` | `AppLayout` root | `mobile`, `window`, `web` |

package/package.json

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