跳轉到

D-20260723-01|主題架構重構為受控 CSS Style API v1

背景與驅動力

首頁與公開設定移植暴露:舊 LandingPresentationProfilechromeSkinfestival 共享 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、!importantposition: 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