@synopackageland/ui 0.14.11 → 0.15.0

package/docs/color-system.md

@@ -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.11",
+  "version": "0.15.0",
   "description": "Shared Vue 3 UI component library with a DSM 7 inspired application theme",
   "license": "MIT",
   "type": "module",