@synopackageland/ui 0.11.5 → 0.12.0

package/CHANGELOG.md

@@ -1,5 +1,40 @@
 # 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.

package/README.md

@@ -385,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;
@@ -400,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/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';