φ-css

設計系統 · v0.1

把數學律動，
鎖進像素。

φ 與費氏數列決定比例，8pt 網格決定落點，OKLCH 決定明度，@layer 決定誰說了算。從淺色主題一路守到作業系統強制色彩。

探索 Token 契約 無障礙防禦 →

一 · 架構與級聯

層級順序，勝過選擇器權重

入口只宣告一次 @layer reset, tokens, base, layout, components, utilities;。後層永遠覆寫前層，全庫零 !important，由 npm run lint 強制執行。

實證：.hidden 擊敗 .btn[data-variant]

下方按鈕的選擇器權重是 (0,2,0)；工具類 .hidden 只有 (0,1,0)。但 utilities 層在 components 之後，所以單一 class 就能隱藏它——不需要 !important。

class="btn"

三層 Token 解耦

  1. Primitive --brand-700物理值，無意圖
  2. Semantic --color-action組件唯一可引用
  3. Component --btn-bg局部注入點

二 · 空間與排版節奏

費氏向 8pt 網格與 √φ 字階

F(n+1)/F(n) 收斂於 φ，每一階再錨定到 4px / 8px。開啟上方「基準線網格」即可檢查每行是否落在網格上。

空間尺度

    字階 16 × 1.272ⁿ

      三 · 主題與色彩工程

      OKLCH 語意映射，對比度即時量測

      以下數值由瀏覽器的計算結果即時算出。切換主題或高對比時，組件 CSS 一行不變，只有語意 Token 重新映射。

      一行 CSS 換品牌：--brand

      色階由瀏覽器從任何色碼算出：取品牌色的色相與飽和度，明度固定在明度梯上，飽和度夾在該色相的 sRGB 上限內。CI 已窮舉所有色相 × 飽和度，任何輸入都通過對比檢查。.brand-scope 讓單一區塊使用自己的品牌色。

      --brand: #FF6B00

      連結文字與 標記

      --brand: #1DB954

      連結文字與 標記

      --brand: #E91E63; --brand-chroma: 0.6

      連結文字與 標記

      四 · 無障礙與色覺防禦

      色彩永遠不孤單

      每個狀態同時以色相、幾何形狀與文字傳遞。用上方的色覺模擬切換，辨識度不應下降。

      成功：部署完成

      翡翠綠（165°）搭配圓形打勾，紅綠色盲下仍能與錯誤區分。

      警告：配額即將用盡

      淺色底使用深琥珀赭石（對比 > 7:1），深色底回到暖黃。

      提示：新版本可用

      圓角方形 + i，形狀與成功的圓形互不重疊。

      通過 待審 失敗 草稿 中性

      我們只用來寄送收據。

      格式不完整，缺少網域名稱。

      資料視覺化

      明度交錯 × 線型 × 標記 × 紋理

      改良型 Okabe-Ito 六色，相鄰序列 ΔL ≥ 0.12。每條序列另有獨立線型、節點形狀與填充紋理，並就近直接標示——黑白列印也讀得懂。

      各區域月活躍用戶（千人）
      第四季營收占比

      五 · 版面層

      layout 管元素之間，components 管元素之內

      @layer reset, tokens, base, layout, components, utilities;。每個原語只回應自己的容器寬度，不看視窗。拖曳虛線框右下角，觀察換行行為。

      .sidebar 側欄固定 15rem，主欄低於 61.8% 就換行
      側欄 · 篩選器
      主欄 · 內容隨剩餘空間伸展
      .switcher 門檻 40rem：整排橫排或整排直排，不會出現 2 + 1
      方案 A
      方案 B
      方案 C
      .grid + .card[data-subgrid] 標題、內文、按鈕列跨卡片對齊

      入門

      適合個人專案。

      團隊協作方案

      共享設計 Token、版本紀錄與審閱流程，最多二十位成員同時編輯。

      企業

      SSO、稽核日誌與專屬支援。

      .reel 每項 61.8%，下一項露出 38.2% 暗示可捲動（可用鍵盤聚焦後以方向鍵捲動）
      1
      2
      3
      4
      5
      .bento-golden 黃金矩形費氏切分；容器窄於 36rem 時退回單欄
      a · 89 × 89
      b · 55 × 55
      c · 34 × 34
      d · 21 × 34
      .cover 頁首頁尾貼齊兩端，.cover__principal 垂直置中（此處 --cover-min: 20rem）
      頁首
      主要內容
      頁尾
      .app-shell 頁面骨架，依視窗寬度切換（此處 --shell-min: 24rem）；有 aside 且視窗 ≥ 80rem 時變三欄
      header
      main

      六 · 組件

      原生元素優先，狀態讀 ARIA

      對話框、選單、摺疊都用瀏覽器原生元素，所以鍵盤、焦點與強制色彩不用自己重寫。組件不使用 .is-active 這類狀態 class，樣式直接讀 aria-current、aria-selected、:checked，由 lint 強制。

      導覽

      用 ← → 切換分頁，Home / End 跳到頭尾。選中的分頁以 3px 底線標示，是形狀而不只是顏色。

      側欄導覽 + 資料表（以 .sidebar 組合）

      最近訂單（勾選列即為選取）
      訂單 客戶 狀態 金額
      #1042林小姐已付款NT$ 12,800
      #1041陳先生待審NT$ 3,450
      #1040王小姐失敗NT$ 890
      #1039張先生草稿NT$ 21,000

      選項控制

      通知方式
      計費週期

      浮層

      對話框與選單都在瀏覽器的頂層（top layer），不需要 z-index；焦點鎖定、Esc 關閉、焦點歸還都是原生行為。

      摺疊（同名互斥）

      為什麼不用 JavaScript？
      原生 <details> 已提供鍵盤、狀態朗讀與頁內搜尋自動展開。
      一次只能開一個？
      同一個 name 的 details 會互斥，瀏覽器原生支援。
      高度動畫呢？
      支援 interpolate-size 的瀏覽器會平滑展開，其餘直接切換。

      內文元素

      按 Ctrl + K 開啟搜尋，關鍵字會以 螢光標記 顯示。

      • 無 class 的清單才套用預設樣式
      • 組件自己的清單不受影響
      形式追隨功能，而比例追隨 φ。
      φ
      1.618…，黃金比例
      √φ
      1.272…，字階比例

      刪除專案？

      「φ-css」及其 12 個版本將永久刪除，此動作無法復原。

      篩選條件

      狀態