D-20260723-01|主題架構重構為受控 CSS Style API v1¶
背景與驅動力¶
首頁與公開設定移植暴露:舊 LandingPresentationProfile/chromeSkin/festival 共享 skin profile 架構下,每新增一個強風格主題就要擴張共用 TypeScript、Angular 屬性與 SCSS 分支;且四角、背景延伸、資訊框等實際構圖需求無法合理全部 token 化。
考慮過的選項¶
- 續擴共享 skin profile:主題數與共用程式碼分支同步膨脹、不可持續——廢。
- 全 token 化:構圖類需求以 token 表達不合理——不足。
- 受控 CSS Style API(採納,依核准設計落地)。
決定¶
- UI Kit 只公開版本化
[data-theme-part];每主題可在自己的theme.css以受控 selector 完成外觀;manifest 必填styleApiVersion: 1、可選stylesheet(default 必填;非 default 可為只換色票的輕量主題);cascade 固定 reset、base、components、theme-default、theme、safety 順序,runtime 以@scope隔離 default 與 active overlay。 - PostCSS validator 守門:禁內部 class 與
[class]、外部或跨主題 URL、@import/@font-face/ 未知 at-rule、!important、position: fixed;只允許註冊 stable part 與主題內 manifest 已登記資產;:scope只准宣告--theme-*私有變數。stylesheet 於 candidate 準備,僅最新 request generation 於 persist 成功後原子提交 CSS、token 與 active snapshot;離線缺 overlay 維持 session default、不覆寫 persisted id。 - 圖片圖示收斂外部資產契約:共用操作圖示用外部 SVG sprite、主題視覺 SVG 留各自主題目錄;單色圖優先 CSS mask、多色圖用
<img>或背景圖;HTML/SCSS/CSS/TypeScript 禁 inline SVG 幾何、base64/data URI 圖片與文字字元冒充圖示(重置頁自包含 inline style 為唯一明列例外)。 - 廢共享 skin profile 架構:舊 landing presentation 型別、manifest landing 欄、festival 共用樣式與主題 ID 投影移除;default 與月兔完整視覺各自收回自己的
theme.css,共用 SCSS 只留結構與 safety。
後果與影響¶
修訂 D-20260704-01 的樣式面:主題自由度不再受限於 token 面豐富度,但仍在 validator 與 stable part 契約內——D-20260708-10 拒任意 CSS 的理由不變。正式主題須經 git PR、validator、五個代表頁多比例截圖、a11y、授權與大小審查;未送 PR 的個人 fork 不在官方 runtime 信任範圍。權威見 主題系統.md 與 程式架構/themes.md。