@synopackageland/ui 0.11.4 → 0.12.0

package/CHANGELOG.md

@@ -1,5 +1,47 @@
 # Changelog
 
+## 0.12.0 (2026-10-18)
+
+- Colours come from five 12-step scales built from DSM 7's colours (`--ui-gray-*`, `--ui-blue-*`, `--ui-green-*`, `--ui-orange-*`, `--ui-red-*`, each with translucent `-a` steps, and `--ui-accent-*`), and every semantic token is now one step of a scale ([colour system](docs/color-system.md)). No token was renamed or removed. A few values changed so every text step reads at AA on its fills: `--ui-text-secondary` 78% → 82%, `--ui-danger-text` `#a81b1b`, the soft tone fills 10% of their tone, `--ui-surface-subtle`, `--ui-control-track` and `--ui-control-divider` one step of the grey scale. `--ui-info-soft` no longer follows `--ui-primary-soft`, and `--ui-info-text` no longer follows `--ui-primary-active` overrides. `--ui-selection` is deprecated (unused; use `--ui-surface-selected`).
+- `AppRoot` takes an `accent` colour: selection, focus and main actions use twelve steps derived from it the way DSM derives its blue, a white label keeps 4.5:1, and the status tones stay DSM's. A floating dialog (`dialog-bounds="viewport"`) carries it too. Without it an app keeps DSM blue. `accentScale()` and `accentStyle()` are exported.
+- Text keeps to DSM's tiers: 12, 13 and 14px, and the new `--ui-font-size-title` (16px) for `PageHeader`, a `WizardStep` headline, the About dialog's app name and the sidebar brand (were 18 and 15px). Select and Combobox group labels, `ScheduleTable` hours, `Ghost` counts and sidebar badges go from 10–11px to 12px.
+- `--ui-hairline`: 1px, one device pixel (0.5px) from 2dppx up. Menu separators, `Separator`, `TypoDivider` and `ListItem` use it.
+- No middle-dot separators: `FilePicker` lists each file limit on its own line, a compact `ConnectionTopology` lane captions each link on its own, and a collapsed `AppSidebarUser` tooltip shows the name over the detail (`Tooltip` keeps line breaks).
+- New browser check `pnpm check:palette`: the colour roles on a Control Panel list and a settings page, in a DSM window and on a narrow screen, with DSM blue and two app accents.
+- Visible changes for apps: slightly darker secondary text and red text, softer status fills, a 16px page title. No code changes needed; an app that overrides `--ui-primary` to rebrand can switch to `accent`.
+
+### Token values and migration / Token 值與遷移
+
+No existing token was renamed or removed. These values change from 0.11.5; scale aliases resolve to the values below with the default DSM accent. / 既有 token 沒有改名或移除；以下列出相較 0.11.5 調整的值，色階別名以預設 DSM accent 的值表示。
+
+| Token | 0.11.5 | 0.12.0 |
+| --- | --- | --- |
+| `--ui-surface-subtle` | `rgba(153, 177, 204, 0.1)` | `--ui-gray-a2`: `rgba(198, 212, 224, 0.18)` |
+| `--ui-text-secondary` | `rgba(65, 75, 85, 0.78)` | `--ui-gray-a11`: `rgba(65, 75, 85, 0.82)` |
+| `--ui-neutral-soft` | `#eef2f5` | `--ui-gray-a3`: `rgba(198, 212, 224, 0.4)` |
+| `--ui-neutral-text` | `#56606a` | `--ui-gray-11`: `#636b74` |
+| `--ui-success-soft` | `#eaf5ed` | `--ui-green-a3`: `rgba(0, 158, 5, 0.1)` |
+| `--ui-warning-soft` | `#fdf2e1` | `--ui-orange-a3`: `rgba(245, 132, 20, 0.1)` |
+| `--ui-danger-soft` | `#fceced` | `--ui-red-a3`: `rgba(230, 64, 64, 0.1)` |
+| `--ui-danger-text` | `#b42f2f` | `--ui-red-11`: `#a81b1b` |
+| `--ui-control-divider` | `rgba(124, 138, 152, 0.45)` | `--ui-gray-a7`: `rgba(124, 138, 152, 0.4)` |
+| `--ui-control-track` | `#cbd3dc` | `--ui-gray-7`: `#cbd0d6` |
+| `--ui-info-soft` | `var(--ui-primary-soft)` | `--ui-blue-a3`: `rgba(5, 127, 235, 0.1)` |
+| `--ui-info-text` | `var(--ui-primary-active)` | `--ui-blue-11`: `#0062b8` |
+
+`--ui-info-soft` and `--ui-info-text` keep their default blue values but no longer inherit primary overrides. Apps that used `--ui-primary-soft` / `--ui-primary-active` to style info badges must override `--ui-info-soft` / `--ui-info-text` explicitly. For branding, prefer `<AppRoot accent="#7a5af8">` to overriding individual primary tokens: it also supplies hover, selection and focus colours; status tones remain DSM's. Replace reads of deprecated `--ui-selection` with `--ui-surface-selected`. See the [colour system migration guide](docs/color-system.md#migrating-from-011).
+
+`--ui-info-soft`／`--ui-info-text` 的預設藍色值不變，但不再繼承 primary 覆寫。原本透過 `--ui-primary-soft`／`--ui-primary-active` 調整 info badge 的 App，須明確覆寫 `--ui-info-soft`／`--ui-info-text`。品牌色建議改用 `<AppRoot accent="#7a5af8">`，一併提供 hover、選取與焦點色，狀態色仍維持 DSM 色。讀取已 deprecated 的 `--ui-selection` 請改用 `--ui-surface-selected`。詳見[色彩系統遷移說明](docs/color-system.md#migrating-from-011)。
+
+繁中摘要：色彩改由五組以 DSM 7 色彩推導的 12 階色階（gray／blue／green／orange／red，各含半透明 `-a` 階，另有 `--ui-accent-*`）提供，所有語意 token 都對應到某一階（見 [colour system](docs/color-system.md)）。沒有 token 改名或移除；為了讓文字在各底色上達 AA，少數值有調整：`--ui-text-secondary` 由 78% 改 82%、`--ui-danger-text` 改 `#a81b1b`、狀態淺底改為該色 10%、`--ui-surface-subtle`、`--ui-control-track`、`--ui-control-divider` 改為灰階的一階；`--ui-info-soft` 不再跟著 `--ui-primary-soft`、`--ui-info-text` 不再跟著 `--ui-primary-active` 的覆寫；`--ui-selection` 標為 deprecated（未使用，請改用 `--ui-surface-selected`）。`AppRoot` 新增 `accent`：選取、焦點與主要動作改用由該色推導的 12 階（推導方式同 DSM 藍，白字維持 4.5:1），狀態色維持 DSM 色；`dialog-bounds="viewport"` 的浮動對話框同樣套用；不設定則維持 DSM 藍；並匯出 `accentScale()`、`accentStyle()`。字級收斂到 DSM 層級 12／13／14px，新增 `--ui-font-size-title`（16px）給 `PageHeader`、`WizardStep` 標題、About 對話框 App 名稱與側欄品牌（原 18／15px）；Select／Combobox 群組標籤、`ScheduleTable` 時數、`Ghost` 計數與側欄 badge 由 10–11px 改 12px。新增 `--ui-hairline`（1px，2dppx 以上為 0.5px，即一個裝置像素），選單分隔線、`Separator`、`TypoDivider`、`ListItem` 使用。移除「·」分隔：`FilePicker` 每項限制各自一行、compact `ConnectionTopology` 每段連線各自標示、收合的 `AppSidebarUser` tooltip 名稱與說明分兩行（`Tooltip` 保留換行）。新增瀏覽器檢查 `pnpm check:palette`。App 程式不必改；以覆寫 `--ui-primary` 換品牌色的 App 可改用 `accent`。
+
+## 0.11.5 (2026-10-18)
+
+- **Behavior change:** `AboutDialog` no longer defaults to Synology legal URLs. Apps must supply `tosUrl` and/or `privacyUrl`; an omitted or empty URL hides that individual link. The close action remains available. To retain legal links after upgrading, pass the application's intended URLs explicitly.
+- Removed the obsolete internal development example file `.evn.example`.
+
+繁中摘要：**行為變更：**`AboutDialog` 不再預設連到 Synology 法律頁面；App 須自行傳入 `tosUrl`／`privacyUrl`，未提供或空字串就不顯示該連結，關閉按鈕仍可使用。原本依賴預設 Synology 連結的 App，升級後須自行傳入 App 適用的網址。另移除過時的內部開發範例檔 `.evn.example`。
+
 ## 0.11.4 (2026-10-17)
 
 - Fixed: five `SectionTabs` in a 390 px dialog were cut off, with no sign of the hidden tabs and no way to reach them with a mouse wheel. `SectionTabs` and `Tabs` now fade the side of the strip that hides tabs (`data-overflow-start`, `data-overflow-end`), scroll sideways on a vertical mouse wheel until the strip ends (then the page scrolls), and scroll the selected tab into view, clear of the fade, when it is selected and when the strip resizes. In `SectionTabs`, the arrow keys, Home and End move focus between enabled tabs.

package/README.md

@@ -91,6 +91,26 @@ Components imported in `<script setup>` are available directly in the template.
 No `app.use()` plugin registration is required. JavaScript consumers can omit
 `lang="ts"`, the type import, and the `: SelectOption[]` annotation.
 
+## AboutDialog legal links
+
+`AboutDialog` displays each legal link only when the application supplies its
+URL through `tosUrl` or `privacyUrl`. Both default to an empty string; omitting
+a prop or passing `''` hides that link. URLs can be updated while the dialog is
+open. The footer's close button remains available without legal links.
+
+```vue
+<AboutDialog
+  v-model:open="aboutOpen"
+  title="My App"
+  tos-url="https://example.com/terms"
+  privacy-url="https://example.com/privacy"
+/>
+```
+
+Replace these example URLs with your application's Terms of Service and Privacy
+Policy. Apps that relied on the former Synology legal URL defaults must now
+provide their intended URLs explicitly.
+
 ## Using inside a DSM window
 
 A DSM package window is not a page of its own: every window shares the DSM
@@ -365,12 +385,24 @@ faint grey block with no border of its own, at 12px × 16px padding.
 
 ## Theme override
 
-Components use semantic CSS tokens. Import your override stylesheet after the library stylesheet to customize branding:
+Components use semantic CSS tokens, each a step of a 12-step scale built from
+DSM 7's colours ([colour system](docs/color-system.md)). Without an override an
+app looks like DSM's own apps: DSM blue for selection, focus and main actions.
+
+An app with a colour of its own sets it on its root. The theme derives the
+hover, pressed, selected and focus colours from it, keeps a white label
+readable on it, and leaves the status tones DSM's:
+
+```vue
+<AppRoot accent="#7a5af8">
+  <App />
+</AppRoot>
+```
+
+Other tokens are overridden in a stylesheet imported after the library's:
 
 ```css
 :root {
-  --ui-primary: #0086e5;
-  --ui-primary-hover: #0077cf;
   --ui-radius-md: 6px;
   --ui-page-padding-x: 24px;
   --ui-section-gap: 16px;
@@ -380,15 +412,7 @@ Components use semantic CSS tokens. Import your override stylesheet after the li
 Status tones come in pairs, a soft fill and the text that reads on it:
 `--ui-{neutral,info,success,warning,danger}-soft` and `-text`. `Badge`,
 `StatusDot`, `StepList` and `ConnectionTopology` use only these and the base
-tones (`--ui-success`, …), so a dark theme overrides the pairs once:
-
-```css
-[data-ui-theme='dark'] {
-  --ui-success-soft: #173222;
-  --ui-success-text: #6fdc8a;
-  /* … the other tones, and the surface and text tokens */
-}
-```
+tones (`--ui-success`, …).
 
 Density can be switched per application subtree:
 

package/dist/components/app/app-root/AppRoot.vue.d.ts

@@ -6,6 +6,12 @@ type __VLS_Props = {
      * anywhere in the viewport. Set it only inside a DSM window.
      */
     dialogBounds?: 'app' | 'viewport';
+    /**
+     * The app's own accent (`#rrggbb` or `rgb()`), drawn on selection, focus and
+     * main actions in place of DSM blue. Leave it unset to look like DSM's own
+     * apps; set it only for a colour that belongs to the app.
+     */
+    accent?: string;
 };
 declare var __VLS_7: {}, __VLS_9: {};
 type __VLS_Slots = {} & {

package/dist/components/composite/about-dialog/AboutDialog.vue.d.ts

@@ -22,7 +22,9 @@ type __VLS_Props = {
     copyrightYear?: string;
     iconSrc?: string;
     beta?: boolean;
+    /** App-provided Terms of Service URL. Omitted or empty hides the link. */
     tosUrl?: string;
+    /** App-provided Privacy Policy URL. Omitted or empty hides the link. */
     privacyUrl?: string;
     releaseNotesUrl?: string;
     /** Runs on open. Return `newVersion` for an update, `betaVersion` for beta info, `{}`/undefined for failure. */

package/dist/index.d.ts

@@ -176,6 +176,8 @@ export { default as AboutDialog } from './components/composite/about-dialog/Abou
 export type { AboutCheckState, AboutVersionInfo } from './components/composite/about-dialog/types';
 export { default as AppRoot } from './components/app/app-root/AppRoot.vue';
 export { APP_ROOT_ATTRIBUTE, APP_ROOT_SELECTOR } from './lib/appRoot';
+export { accentScale, accentStyle } from './lib/accent';
+export type { AccentScale } from './lib/accent';
 export { default as AppLayout } from './components/app/app-layout/AppLayout.vue';
 export { default as ResponsiveView } from './components/app/responsive-view/ResponsiveView.vue';
 export { appPresentationForWidth, MOBILE_LAYOUT_MAX, WEB_LAYOUT_MIN } from './lib/adaptiveLayout';