/* 主題:一個主題 = 一塊 token — #259,#392 擴成五塊。 * * 使用者原話 2026-08-25:「我想支援多種色彩主題,目前先3種,要考慮以後的主題擴充 * 性。目前的 UI code 可能需要 refactor。」#392 是那句「以後」到的那一天:D-F102 定 * 下**五個主題**(淺色 / 深色 / 低飽和深色 / 可愛 / Organic),而 #241 那四顆可選的 * 主題色跟著退役 —— 一個主題自己就是一整組配色,再讓使用者從裡面挑一顆主色,等於 * 讓兩個作者同時決定同一格。 * * ## 這一支裝什麼、不裝什麼 * * 裝的是**值**:顏色、陰影、圓角、字型堆疊。每一個主題在這裡各佔一塊,而那一塊 * 是那個主題的全部 —— 讀 Organic 長什麼樣不必翻七支 views/*.css。 * * 不裝規則。「圓角 16px 的是卡片」住在 style.css,「這台裝置現在選的是哪個主題」 * 住在 prefs.js。這一支一條選擇器都不認得 `.card`。 * * **#392 之後它是全站唯一一個寫得出色碼的地方。** 在這裡以外的每一支樣式表與每 * 一支 JS(`web/` 底下,vendor 除外)裡出現任何 hex / rgb / hsl 字面值都紅 * (`test_web.NoColourLiteral * OutsideTheTokenLayer`,例外逐條列在那一支裡)—— 少了那條線,「換一個主題」永遠 * 只換得動一部分畫面,而剩下的那一部分沒有人數得出來。 * * ## 七個選擇器,六條路 * * html 不隨主題變的常數(相機層,見底下) * :root 沒有 data-theme(第一次開、或選「跟系統」) * @media (prefers-color-scheme: dark) ↑ 的暗色那一半 —— **「跟系統」走的仍然是它** * html[data-theme="light"] 鎖淺色 * html[data-theme="dark"] 鎖深色 * html[data-theme="dark-muted"] 鎖低飽和深色 — #392 * html[data-theme="cute"] 鎖可愛 — #392 * html[data-theme="organic"] 鎖 Organic * * `auto` **沒有自己的規則,而那是刻意的**:它的意思正是「沒有人鎖」,所以它落回 * `:root` 加那句 media query。「跟系統」的深色那一半是 **`dark`** 而不是 * `dark-muted`(D-F102):低飽和深色是一個要自己挑的東西,不是深色的新預設。 * * 特異度:`html[data-theme=…]` 是 (0,1,1),壓得過 media 裡那個 `:root` 的 * (0,1,0)(`@media` 不加特異度)。所以在深色系統上鎖淺色是淺的,在淺色系統上鎖 * 深色是深的 —— 這正是「顯式主題」這四個字的全部內容。 * * **淺色那一份只寫一次**(`:root` 與 `html[data-theme="light"]` 共用同一個選擇器 * 清單:清單裡每一支各自算特異度,所以 (0,1,0) 與 (0,1,1) 兩個身分都在)。深色那 * 一份**寫了兩次**,而那是 CSS 的限制不是選擇:media 裡的 `:root` 與 media 外的 * `html[data-theme="dark"]` 隔著一個 `@media` 邊界,共用不了同一組宣告。兩份會漂 * 移,所以 test_web 的 EveryThemeBlockDefinesTheWholeContract 逐字比對它們。 * * ## 載入順序 * * index.html:style.css → **themes.css** → prefs.css。中間那一格是 token 的定義, * 兩邊是讀它的人:style.css 的元件讀形狀與顏色,prefs.css 只剩字級與 ＋ 鈕的左右 * (#392 之後它一格顏色都不碰了 —— 挑主色那四條規則跟著 `--ac-*` 一起退役)。 * * ## 值從哪裡來 * * 五塊裡的三塊由 #391 的設計產物算出來;淺色與深色那兩塊在 #464 依新的 app icon * 重解(同一把尺:感知色彩空間上定錨、WCAG 對比逐對驗過)。而**這裡是它們在產品 * 裡的唯一一份**:設計那邊的表是推導紀錄,不是執行期讀得到的東西。 * 對比與色差兩條線由 test_web 的 EveryThemeMeetsContrast 與 * TheBalanceLinesStayApartInEveryTheme 守著,而它們讀的正是這一支檔案。 * * ── 契約清單開始 ────────────────────────────────────────────── * 新主題要定義的就是底下這些,一格都不能少(缺一格 = 那個主題在某一塊畫面上 * 會靜靜地掉回別的主題的值,而畫面不會說話)。 * * 面與字 * --bg 頁面底色(html 與 body 都畫,D-F90) * --card 卡片、彈出的紙的底色 * --bg-2 底色的第二階:紀錄頁相鄰兩天交替的那一帶 — #550(D-H29 §3-2) * --chip 藥丸鈕、收合面、長條槽的底 * --line 分列細線與卡框(1.2) * --rule 分節重線(3.0)— #550。**它與細線那一格是分工不是深淺**: * 「這裡換了一段」要看得見(WCAG 非文字那條 3.0),「這裡換了 * 一列」只要分得出來(1.2)。#550 之前只有後者,而總檢 * (docs/review/20260910-uiux/REPORT.md ①)量到的病正是 * 「表面沒有層級」——把細線那一格一路拉到 3.0 會讓每一張卡的 * 框變成一條黑線,所以多一格而不是改一格的門檻。 * --ink 主要文字 * --dim 次要文字、標籤、分隔用的小字 * --nav 底部導覽列的底色(多數主題與卡片同色,Organic 刻意差一階) * * 品牌 * --accent 主色:主要動作的實心底、「現在在這一頁」、正向的數字 * --on-accent 實心 accent 上面那些字與描邊(#392 之前全站寫死 18 個 #fff, * 而深色主題的亮綠底上白字只有 2.2:1) * --accent-soft 主色的淡底:選中的 chip、圖例 * --ring 鍵盤焦點框 * --accent-grad-a 主鈕 / FAB 漸層的起點(不做漸層的主題兩格同值) * --accent-grad-b 漸層終點 * * 記帳種類(一筆帳是支出、收入、退款還是轉帳 —— log.css 的 `.tag.*`) * --kind-expense --kind-income --kind-refund --kind-transfer * --kind-expense-soft --kind-income-soft --kind-refund-soft --kind-transfer-soft * * 帳本種類(多人分帳 / 共同帳戶 / 集資 / 個人記帳 —— 帳本籤與帳本清單) * --ledger-split --ledger-pool --ledger-capital --ledger-personal * --ledger-split-soft --ledger-pool-soft --ledger-capital-soft --ledger-personal-soft * --ledger-split-2 --ledger-pool-2 --ledger-capital-2 --ledger-personal-2 * --ledger-split-2-soft --ledger-pool-2-soft --ledger-capital-2-soft --ledger-personal-2-soft * --ledger-split-3 --ledger-pool-3 --ledger-capital-3 --ledger-personal-3 * --ledger-split-3-soft --ledger-pool-3-soft --ledger-capital-3-soft --ledger-personal-3-soft * * **一種帳本三格,而那是使用者原話的形狀** — #550(D-H29 §1「帳本色可編輯」): * 「預設一個種類的帳本有個主色調,多個同類型帳本的預設色系要接近」。三格同 * 色相、明度各差一階,所以同一種類的兩本帳看起來是親戚,而不同種類的兩本帳 * 仍然是兩件事。**挑哪一格是 #552 的事**,這一票只把 12 格擺上去。 * * **色票而不是自由 hex**,理由是這一支檔頭的那條線:自由 hex 守不住對比表 * (使用者挑得出一顆對 --bg 只有 1.4 的顏色,而畫面不會說話),而 12 格全部 * 在契約裡、每一格都有自己那幾列 EveryThemeMeetsContrast。 * * 狀態 * --ok --warn --danger 成功 / 警告 / 錯誤與刪除 * --ok-soft --warn-soft --danger-soft * --on-warn 警告色實心底上的字(未讀徽章) * * **`--warn` 與 `--danger` 在 #392 之前是同一格。** 「差額還掛著」與「這一顆 * 按下去帳本就沒了」共用一個顏色,而使用者要分辨的正是那兩件事。 * * 圖表 * --chart-1 --chart-2 --chart-3 圓餅的六段 / 成員色塊(第六格同時是 * --chart-4 --chart-5 --chart-6 圓餅上的「其他」) * --chart-cash 戶頭餘額那條線 * --chart-settled 帳面餘額那條線 * --chart-paid 各人墊付那幾條長條 * --chart-grid 格線與軸線 * * **成員色與圖表序列色在 #550 分家了。** #392 讓它們是同一組(理由仍然成立: * 同一個人在首頁的色塊與報表圓餅上該是同一個顏色),而 D-H29 把排序長條換成 * **單色階梯**之後那六格分不出人 —— 一條階梯上的四階是「第幾名」,不是 * 「誰」。所以成員色另開 --member-1..5(底下),`fmt.js` 的 SWATCH 改指它。 * * 排序長條(報表與首頁那排長條 —— #556 / #557 接手畫它) * --rank-1 --rank-2 --rank-3 --rank-4 * * **一條單色階梯,--rank-1 最暗(第一名),index 越大越亮** — #550(D-H29 * §1「圖表色」,Astra P1-1 修正)。四階同色相(OKLCH 與該主題 --accent 差 * ≤10°),兩兩 OKLab 距離 ≥0.10。 * * **四階而不是六階**:六階要兩兩 ΔEok ≥0.10 就得讓 L 跨 0.5,而最亮那一階 * 對 --card 會掉到 3.0 以下 —— 一條看不見的長條不是一個比較淡的長條。第五名 * 以後的列重用 --rank-4。 * * **長條的軌底不用 --bg-2**(第四階對它只剩 2.7):軌 = 透明 + 1px --line, * 長條本身的那一對是 (--rank-N, --card, 3.0)。 * * 成員(頭像色塊、「誰先付 / 誰分攤」那兩顆鈕上的臉 —— #554) * --member-1 --member-2 --member-3 --member-4 --member-5 * --on-member 色塊上那個姓名首字 * * 五顆兩兩 OKLab 距離 ≥0.10(TheBalanceLinesStayApartInEveryTheme 的新 * case)。第六位成員環回第一顆,同 #392 以來 `fmt.js` 的取法。 * * `--chart-cash` / `--chart-settled` 是 #182 首頁那張圖上的兩條餘額線,而那一 * 票留下一句要守的話:「戶頭裡有多少錢」「都平之後剩多少」跟「花掉多少錢」疊 * 在同一張圖上,三者不能同色。**新主題要接下的是這句承諾,不只是兩個色碼** * (TheBalanceLinesStayApartInEveryTheme 量的是 OKLab 距離,不是對比)。 * * 系統 * --statusbar Android 狀態列 / iOS 瀏海底下透出來的那一片(= 頁面底色) * --manifest-theme manifest 的 theme_color 與 background_color(同上) * * 形狀 * --radius-s 輸入框、小方鈕 * --radius-m 主要動作鈕、方形的容器 * --radius-l 卡片、彈出的紙 * --radius-pill 藥丸 * --border-w 卡與 chip 的框線粗細(可愛主題是 2px,其餘 1px) * * 陰影與幕 * --shadow 卡片、彈出的紙 * --shadow-fab 浮在畫面上的那顆 ＋ 鈕(它離頁面更遠,所以是另一階) * --scrim 彈出的紙底下那一層幕(#392 之前四處各寫一個 rgba,而其中一處 * 的值與另外三處不同 —— 沒有人是故意的) * * 底紋 * --bg-deco 頁面底色之上那一層裝飾(`body::before`)。多數主題是 `none`; * 可愛與 Organic 各有一組很淡的漸層。 * * 字型 * --font-body 內文 * --font-heading app 名、卡片標題(h3)、那個大數字(.big) * ── 契約清單結束 ────────────────────────────────────────────── * * **不在契約裡的,與為什麼。** * * `border-radius: 50%`(頭像圓點、未讀徽章)與 `0 8px 8px 0`(左邊那條色帶的 * 端點)是**幾何**不是主題:一個圓換了主題還是圓,而那條色帶的方角那一側貼著 * 卡緣,圓起來就露出底色。 * * **相機層那一組(`--cam-*`)不在契約裡,而它們在底下那塊 `html {}` 上。** 那 * 一層蓋著相機的畫面,而相機的畫面不隨主題變:白字與半透明黑站在鏡頭拍到的東 * 西上面,五個主題都是同一組值。收成 token 是為了讓「靜態掃描:token 層以外零 * 色碼」那條線成立,不是為了讓它跟著主題走 —— 所以它不進契約,新主題也不必替 * 它填一格。 * * **契約裡有幾格今天還沒有讀者**,而那是刻意的:`--kind-expense` / `--kind-refund` * / `--kind-transfer` 那一組與 `--ledger-split` / `--ledger-capital` / * `--ledger-personal` 那一組是 #392 新開的能力(「一筆帳是哪一種」「一本帳是哪 * 一種」在畫面上要一眼看得出來),而畫出它們是版面的改動不是顏色的改動 —— * #392 的檔案範圍是「把既有的硬編碼顏色換成 token」,不是替每一顆籤重新排版。 * **不先定義它們的代價比較大**:下一張票要畫那幾顆籤的時候,五個主題各要重解一 * 次 20 個顏色,而那正是這一票在做的事。`--accent-soft` 同理(選中的 chip 今天 * 走的是 `--card` 加一圈 accent 邊)。 * * web/auth.css 與 web/api.js 裡的圓角**沒有跟著換**:#259 的檔案範圍是 * style.css / views/*.css,#392 只補了那兩支的顏色。登入閘與 toast 的 12px 因此 * 仍然是寫死的 —— 下一個人會看到這一句。 */ /* ------------------------------------------------------------ vendored 字型 三個家族 — #392(D-F102)。**宣告是全域的,而用得到哪一個由主題決定**: `@font-face` 宣告的是「這個名字對到哪一個檔」,不是「誰要用它」;瀏覽器在沒有 人叫得到那個 family 的時候一個 byte 都不會去拿(#260 在沙盒 Chromium 上實測 過:鎖淺色開一次 → `/vendor/fonts/` 零個請求)。分成幾塊寫、或搬進第四支樣式 表,換來的只是一組要跟著主題開關的宣告。 Plus Jakarta Sans 淺色 / 深色 / 低飽和深色的標題與內文;Organic 的內文 Nunito 可愛的標題與內文 Fraunces Organic 的標題(變數軸 opsz / wght / SOFT / WONK) **`font-display: swap`**:三支加起來 183 KB,而它們是從自己的伺服器拿的(同一 個 origin、無 CDN)—— swap 的意思是「先用系統字畫,拿到了再換」,而那正是這個 app 在慢速網路上該有的行為:先看得到字。 **`unicode-range` 限 latin,而那是「鎖一個主題只下載一族」的保證**:三個宣告的 範圍逐字相同,而瀏覽器只會去拿「畫面上真的有字落在這個範圍、且真的有人叫得到 這個 family」的那一份。中文一個字形都沒有 —— 這不是漏掉,是這三套字本來就沒有 中文,所以 `--font-body` / `--font-heading` 的堆疊在它們後面接的是系統那一串 (`-apple-system, "SF Pro Text", "Noto Sans TC", system-ui`),而落回去的粒度是 **字元**不是整段(font fallback 就是這樣運作的)。 **不 preload**:哪一族是關鍵取決於使用者鎖了哪一個主題,而 preload 猜錯就是白 下載一份 120 KB 的 Fraunces 給一個鎖了淺色的人。 來源與雜湊(vendored 的東西沒有 lockfile,這份紀錄就是「它沒有被人動過」的全部 證據,同 ARCHITECTURE §4.6 對 uPlot / jsQR / zxing 立的規矩;由 test_web.TheThemeFontsAreVendored 釘著): plus-jakarta-sans-latin-var.woff2 27,348 bytes https://fonts.gstatic.com/s/plusjakartasans/v12/LDIoaomQNQcsA88c7O9yZ4KMCoOg4Ko20yw.woff2 sha256 153fc85b70298beeb1d61a5f723331649e7f23bb77302a66e61cb3e2fbdb5e79 nunito-latin-var.woff2 39,128 bytes https://fonts.gstatic.com/s/nunito/v32/XRXV3I6Li01BKofINeaB.woff2 sha256 ba344451eab25b217a165363b1982048a5e5830a0daf36577973955a04cac793 fraunces-latin-var.woff2 120,788 bytes https://fonts.gstatic.com/s/fraunces/v38/6NUI8FyLNQOQZAnv9bYEvCeYdG9Ea92uemAO8Uik.woff2 sha256 e79165432c3e1e01aff1ea4d394dec633c13ec70f09e92432ae77aa6e1aa7328 三支都是 SIL Open Font License 1.1,授權全文與檔案放在一起(vendor/fonts/OFL-*.txt) —— OFL 要求散布時附上授權,而「附」的意思是它得跟著檔案走,不是寫在某一份文件裡。 **#260 的 Figtree 與 Caprasimo 在這一票退休**:Organic 換了一整組配色與字型 (D-F102),而留著兩個沒有人叫得到的 `@font-face` 等於留兩個沒有人會發現壞掉的 檔案。 */ @font-face { font-family: "Plus Jakarta Sans"; font-style: normal; font-weight: 200 800; font-display: swap; src: url("vendor/fonts/plus-jakarta-sans-latin-var.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Nunito"; font-style: normal; font-weight: 200 1000; font-display: swap; src: url("vendor/fonts/nunito-latin-var.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Fraunces"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("vendor/fonts/fraunces-latin-var.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* --------------------------------------------------- 不隨主題變的常數(相機層) 拍照與掃 QR 那一層蓋著**相機拍到的畫面**,而那個畫面不隨主題變:白字與半透明 黑站在鏡頭前面的東西上,五個主題都是同一組值。#392 之前這一層在 views/add.css 裡是 19 個各自為政的 rgba / #fff,收成八格是為了讓「token 層以外零色碼」那條 靜態線成立 —— 不是為了讓它跟著主題走。 **選擇器是 `html` 而不是 `:root`**,而那是兩件事:`:root` 是淺色那一塊的身分 (test_web 的 theme_blocks() 靠它認人),而這裡要的是一塊「不是任何主題」的常 數。特異度 (0,0,1) 比每一塊主題都低,所以哪一天有主題真的要換掉相機層的白, 它自己那一塊蓋得過來。 */ html { --cam-bg: rgba(0, 0, 0, .82); --cam-bg-solid: rgba(0, 0, 0, .92); --cam-ink: #FFFFFF; --cam-line: rgba(255, 255, 255, .5); --cam-line-strong: rgba(255, 255, 255, .85); --cam-fill: rgba(255, 255, 255, .28); --cam-fill-strong: rgba(255, 255, 255, .55); --cam-chip: rgba(0, 0, 0, .45); --cam-ring: rgba(0, 0, 0, .35); --cam-black: #000000; /* `mask-image` 的漸層只讀 alpha,任何不透明的顏色畫出來都一樣 —— 它是一個 **遮罩**不是一個顏色(log.css 那幾條把一排籤的兩端淡出去的規則)。收成一格 是為了讓「token 層以外零色碼」那條線不必為它開例外。 */ --mask-ink: #000000; } /* ------------------------------------------------------------------- 淺色 預設的那一個 —— 沒有人鎖主題、而系統也不是深色時看到的就是它。**整塊在 #550 換成 demo 3 的色彩組合** — D-H29 §1(使用者原話 2026-09-13:「這組的色彩組合 是我喜歡的」,指 docs/review/20260910-uiux/demos/demo-3-receipt.html)。對應是 逐格的:`--paper` #FBF6EA → `--bg`、`--ink` #221A10、`--dim` #6A5A44、 `--rule` #8B7A61 → 新開的 `--rule`、`--hair` #CFC1A9 → `--line`、 `--accent` #8A3A10、`--pos` #2C5C27 → `--ok`、`--neg` #9C0F37 → `--danger`、 `--wash` #F2EAD8 → `--bg-2` 與 `--chip`。#464 那一版依 app icon 解出來的奶油 底與陶土橘因此退役 —— 同一個判準(「主色跟著那張圖」)換了一次答案,而換它的 是使用者自己挑的那一組紙。 ⚠️ **`--card` 與 `--bg` 只差 ΔEok 0.009,而那不是猶豫 —— 是一條線要的。** 票 #550 的建議是兩格同值(卡面與底同色,階層由 `--rule` 擔,卡留 1px `--line` 的框);而 `--card` 真的寫成 #FBF6EA 的時候 `--chart-3`(#AD8D18,那六格在這一 票**一個字都不准動**)對它只有 2.95,而配對表給圖表序列的線是 3.0。0.009 是 「看得出不一樣」那一階(0.02)的不到一半,所以畫面上它仍然是同一張紙;而那 0.009 正好把那一列買回線上。**這一格標「Q3 可改」**:圓餅在 #557 退役之後 `--chart-3` 不再有讀者,那時兩格可以真的收成一個值。 **`--accent` 不等於 `--kind-income`**(#464 起的分工,#550 沿用):主色是那顆 陶土橘,收入是自己的綠。讀 `--accent` 的地方(nav 現在頁、主鈕、FAB)不跟著 「收入」動。 */ /* **設定頁那一格色卡也掛在同一份選擇器清單上** — #392。那六格畫的是 `var(--bg)` / `var(--card)` / `var(--accent)`(views/account.css 的 `.ac-theme .ac-chip`),而這一句把那一格裡的三個 token 換成它代表的那個主題的 —— **色卡印出來的必定就是按下去會得到的東西**,沒有第二個作者。#241 的四顆色票 (`.ac-sw[data-accent=…]`)當年立的就是這條規矩,而它跟著那四顆一起退役之後, 這裡是它的新家。 */ :root, html[data-theme="light"], .ac-theme[data-theme="light"] { /* 面與字 */ --bg: #FBF6EA; --card: #FEF9ED; --chip: #F2EAD8; --bg-2: #F2EAD8; --line: #CFC1A9; --rule: #8B7A61; --ink: #221A10; --dim: #6A5A44; --nav: #FBF6EA; /* 品牌 */ --accent: #8A3A10; --on-accent: #FBF6EA; --accent-soft: #FDDED2; --ring: #8A3A10; --accent-grad-a: #8A3A10; --accent-grad-b: #8A3A10; /* 記帳種類 */ --kind-expense: #9A463A; --kind-income: #236D34; --kind-refund: #09678B; --kind-transfer: #6E529A; --kind-expense-soft: #FEDDD8; --kind-income-soft: #D6EDD8; --kind-refund-soft: #D3EAF7; --kind-transfer-soft: #E9E1FB; /* 帳本種類 —— 一種三格,#552 讓使用者挑其中一格 */ --ledger-split: #3D5F9E; --ledger-split-2: #294986; --ledger-split-3: #16346F; --ledger-split-soft: #D9E7FE; --ledger-split-2-soft: #CDDAF1; --ledger-split-3-soft: #C1CEE5; --ledger-pool: #096E44; --ledger-pool-2: #065634; --ledger-pool-3: #033F25; --ledger-pool-soft: #D4EDDD; --ledger-pool-2-soft: #CAE0D2; --ledger-pool-3-soft: #C1D2C7; --ledger-capital: #805908; --ledger-capital-2: #664605; --ledger-capital-3: #4C3302; --ledger-capital-soft: #F2E4CF; --ledger-capital-2-soft: #E4D8C6; --ledger-capital-3-soft: #D5CCBD; --ledger-personal: #91476D; --ledger-personal-2: #793258; --ledger-personal-3: #621C43; --ledger-personal-soft: #F9DDE9; --ledger-personal-2-soft: #ECD1DD; --ledger-personal-3-soft: #E0C4D0; /* 狀態 */ --ok: #2C5C27; --warn: #865508; --danger: #9C0F37; --ok-soft: #DBECD8; --warn-soft: #F5E3CF; --danger-soft: #FFDCDE; --on-warn: #FBF6EA; /* 圖表 */ --chart-1: #B36129; --chart-2: #567F3F; --chart-3: #AD8D18; --chart-4: #70442D; --chart-5: #A65378; --chart-6: #3C7489; --chart-cash: #2E6A86; --chart-settled: #795B8C; --chart-paid: #567F3F; --chart-grid: #D8C7B3; /* 排序長條 —— 單色階梯,1 是第一名 */ --rank-1: #5D2A12; --rank-2: #87401F; --rank-3: #B2572D; --rank-4: #E0703B; /* 成員 */ --member-1: #7C2604; --member-2: #096384; --member-3: #336632; --member-4: #5E4886; --member-5: #952D63; --on-member: #FBF6EA; /* 系統 */ --statusbar: #FBF6EA; --manifest-theme: #FBF6EA; /* 形狀 */ --radius-s: 10px; --radius-m: 12px; --radius-l: 16px; --radius-pill: 999px; --border-w: 1px; /* 陰影與幕 */ --shadow: 0 1px 2px rgba(34,26,16,.05), 0 8px 24px rgba(34,26,16,.05); --shadow-fab: 0 2px 6px rgba(34,26,16,.18), 0 10px 24px rgba(34,26,16,.14); --scrim: rgba(34,26,16,.5); /* 底紋 */ --bg-deco: none; /* 字型 */ --font-body: "Plus Jakarta Sans", -apple-system, "SF Pro Text", "Noto Sans TC", system-ui, sans-serif; --font-heading: "Plus Jakarta Sans", -apple-system, "SF Pro Text", "Noto Sans TC", system-ui, sans-serif; } /* ------------------------------------------------- 深色,跟著系統走(auto) **與底下 `html[data-theme="dark"]` 逐字相同,而那是 `@media` 邊界的限制不是選 擇**(檔頭「五個選擇器」那一段)。兩份會漂移,所以 EveryThemeBlockDefinesTheWholeContract.test_the_two_dark_blocks_are_word_for_word 逐字比對它們。 **「跟系統」的深色是 `dark` 不是 `dark-muted`** — D-F102。低飽和深色是一個要自 己去挑的東西:它把語意色的彩度砍掉一半以上,而那是一個口味,不是「深色」的更 好的預設。 **整塊在 #550 換成 demo 3 的深色值** — D-H29 §3-5:`--paper` #12100C → `--bg` 與 `--card`(這一塊兩格真的同值 —— 十格 `--chart-*` 對 #12100C 最低 4.48,沒有 淺色那一格 2.95 的問題)、`--ink` #EEE5D5、`--dim` #A99881、`--rule` #87765E、 `--hair` #332C22 → `--line`、`--accent` #E59A5C、`--pos` #90BD6E → `--ok`、 `--neg` #F47E96 → `--danger`、`--wash` #1D1913 → `--bg-2` 與 `--chip`。 **`--kind-expense` 沒有跟著 `--neg` 走,而那是 KINDRED 那條線逼出來的**: demo 3 的 `--neg` 是一顆偏粉的紅(OKLCH 色相 8.5),而支出紅照同一個色相解出來 離它只有 0.075 —— TheBalanceLinesStayApartInEveryTheme 的 KINDRED 要 0.08 (「差額還掛著」與「按下去就沒了」要看得出不是同一個紅)。所以支出走色相 25、 明度高一階的 #F9AEA7(對 `--neg` 0.110)。 */ @media (prefers-color-scheme: dark) { :root { /* 面與字 */ --bg: #12100C; --card: #12100C; --chip: #1D1913; --bg-2: #1D1913; --line: #332C22; --rule: #87765E; --ink: #EEE5D5; --dim: #A99881; --nav: #12100C; /* 品牌 */ --accent: #E59A5C; --on-accent: #12100C; --accent-soft: #2B190A; --ring: #E59A5C; --accent-grad-a: #E59A5C; --accent-grad-b: #E59A5C; /* 記帳種類 */ --kind-expense: #F9AEA7; --kind-income: #80C289; --kind-refund: #65BCE8; --kind-transfer: #C0A6EF; --kind-expense-soft: #2A1917; --kind-income-soft: #122215; --kind-refund-soft: #0C212B; --kind-transfer-soft: #201A2B; /* 帳本種類 —— 一種三格,#552 讓使用者挑其中一格 */ --ledger-split: #90B3F3; --ledger-split-2: #799BDA; --ledger-split-3: #6384C1; --ledger-split-soft: #161E2D; --ledger-split-2-soft: #0D1524; --ledger-split-3-soft: #060D1B; --ledger-pool: #75C296; --ledger-pool-2: #5DAA7F; --ledger-pool-3: #469369; --ledger-pool-soft: #102218; --ledger-pool-2-soft: #07190F; --ledger-pool-3-soft: #011007; --ledger-capital: #D7AC67; --ledger-capital-2: #BF9550; --ledger-capital-3: #A77E38; --ledger-capital-soft: #261C0B; --ledger-capital-2-soft: #1D1304; --ledger-capital-3-soft: #140B00; --ledger-personal: #E89CC0; --ledger-personal-2: #CF85A8; --ledger-personal-3: #B66E91; --ledger-personal-soft: #291720; --ledger-personal-2-soft: #200E17; --ledger-personal-3-soft: #16070E; /* 狀態 */ --ok: #90BD6E; --warn: #D8AB62; --danger: #F47E96; --ok-soft: #17220F; --warn-soft: #271C0A; --danger-soft: #301419; --on-warn: #12100C; /* 圖表 */ --chart-1: #D98B4D; --chart-2: #8AAA53; --chart-3: #F6C36A; --chart-4: #A66E4A; --chart-5: #D084AF; --chart-6: #79B5B0; --chart-cash: #7FB9C4; --chart-settled: #C3A0DE; --chart-paid: #8AAA53; --chart-grid: #614D3D; /* 排序長條 —— 單色階梯,1 是第一名 */ --rank-1: #8A5425; --rank-2: #B36F33; --rank-3: #DE8A41; --rank-4: #F4B27D; /* 成員 */ --member-1: #E8BC93; --member-2: #7FC7E4; --member-3: #95C897; --member-4: #C4ACFE; --member-5: #FC8FB0; --on-member: #12100C; /* 系統 */ --statusbar: #12100C; --manifest-theme: #12100C; /* 形狀 */ --radius-s: 10px; --radius-m: 12px; --radius-l: 16px; --radius-pill: 999px; --border-w: 1px; /* 陰影與幕 */ --shadow: 0 1px 2px rgba(0,0,0,.4), 0 8px 24px rgba(0,0,0,.3); --shadow-fab: 0 2px 6px rgba(0,0,0,.4), 0 10px 24px rgba(0,0,0,.35); --scrim: rgba(19,14,11,.8); /* 底紋 */ --bg-deco: none; /* 字型 */ --font-body: "Plus Jakarta Sans", -apple-system, "SF Pro Text", "Noto Sans TC", system-ui, sans-serif; --font-heading: "Plus Jakarta Sans", -apple-system, "SF Pro Text", "Noto Sans TC", system-ui, sans-serif; } } /* ------------------------------------------------------------ 深色,鎖定的 */ html[data-theme="dark"], .ac-theme[data-theme="dark"] { /* 面與字 */ --bg: #12100C; --card: #12100C; --chip: #1D1913; --bg-2: #1D1913; --line: #332C22; --rule: #87765E; --ink: #EEE5D5; --dim: #A99881; --nav: #12100C; /* 品牌 */ --accent: #E59A5C; --on-accent: #12100C; --accent-soft: #2B190A; --ring: #E59A5C; --accent-grad-a: #E59A5C; --accent-grad-b: #E59A5C; /* 記帳種類 */ --kind-expense: #F9AEA7; --kind-income: #80C289; --kind-refund: #65BCE8; --kind-transfer: #C0A6EF; --kind-expense-soft: #2A1917; --kind-income-soft: #122215; --kind-refund-soft: #0C212B; --kind-transfer-soft: #201A2B; /* 帳本種類 —— 一種三格,#552 讓使用者挑其中一格 */ --ledger-split: #90B3F3; --ledger-split-2: #799BDA; --ledger-split-3: #6384C1; --ledger-split-soft: #161E2D; --ledger-split-2-soft: #0D1524; --ledger-split-3-soft: #060D1B; --ledger-pool: #75C296; --ledger-pool-2: #5DAA7F; --ledger-pool-3: #469369; --ledger-pool-soft: #102218; --ledger-pool-2-soft: #07190F; --ledger-pool-3-soft: #011007; --ledger-capital: #D7AC67; --ledger-capital-2: #BF9550; --ledger-capital-3: #A77E38; --ledger-capital-soft: #261C0B; --ledger-capital-2-soft: #1D1304; --ledger-capital-3-soft: #140B00; --ledger-personal: #E89CC0; --ledger-personal-2: #CF85A8; --ledger-personal-3: #B66E91; --ledger-personal-soft: #291720; --ledger-personal-2-soft: #200E17; --ledger-personal-3-soft: #16070E; /* 狀態 */ --ok: #90BD6E; --warn: #D8AB62; --danger: #F47E96; --ok-soft: #17220F; --warn-soft: #271C0A; --danger-soft: #301419; --on-warn: #12100C; /* 圖表 */ --chart-1: #D98B4D; --chart-2: #8AAA53; --chart-3: #F6C36A; --chart-4: #A66E4A; --chart-5: #D084AF; --chart-6: #79B5B0; --chart-cash: #7FB9C4; --chart-settled: #C3A0DE; --chart-paid: #8AAA53; --chart-grid: #614D3D; /* 排序長條 —— 單色階梯,1 是第一名 */ --rank-1: #8A5425; --rank-2: #B36F33; --rank-3: #DE8A41; --rank-4: #F4B27D; /* 成員 */ --member-1: #E8BC93; --member-2: #7FC7E4; --member-3: #95C897; --member-4: #C4ACFE; --member-5: #FC8FB0; --on-member: #12100C; /* 系統 */ --statusbar: #12100C; --manifest-theme: #12100C; /* 形狀 */ --radius-s: 10px; --radius-m: 12px; --radius-l: 16px; --radius-pill: 999px; --border-w: 1px; /* 陰影與幕 */ --shadow: 0 1px 2px rgba(0,0,0,.4), 0 8px 24px rgba(0,0,0,.3); --shadow-fab: 0 2px 6px rgba(0,0,0,.4), 0 10px 24px rgba(0,0,0,.35); --scrim: rgba(19,14,11,.8); /* 底紋 */ --bg-deco: none; /* 字型 */ --font-body: "Plus Jakarta Sans", -apple-system, "SF Pro Text", "Noto Sans TC", system-ui, sans-serif; --font-heading: "Plus Jakarta Sans", -apple-system, "SF Pro Text", "Noto Sans TC", system-ui, sans-serif; } /* -------------------------------------------------------------- 低飽和深色 D-F102 新增的第四個 — #392。**它與「深色」的差別是一句話能講完的**:底色從 「深色」那一塊的底(#392 當時是帶藍的 #0F172A,#464 之後是暖棕的 #221A16)換 成石墨灰 oklch(0.215 0.006 260),而語意色的彩度砍掉一半以上 (深色那一份是 C 0.15–0.17,這一份是 C 0.07–0.09)。 要的是「晚上看很久也不刺眼」,而刺眼的來源是**彩度**不是亮度 —— 深色主題那顆 高彩度的主色(#392 當時是 #34D399 的綠,#464 之後是 #DE9154 的橘)在 OLED 上是 一塊會發光的東西。所以這一塊不是「把深色調暗一點」: 每一格都是重新在 OKLCH 上定錨、再往上找到剛好過對比線的那一階。 代價寫在這裡:低彩度的六個圖表色彼此更難分,所以 `--chart-*` 那六格是靠**明度** 拉開的(TheBalanceLinesStayApartInEveryTheme 量的 OKLab 距離,五塊都要過 0.10)—— 不是靠色相。 **`--chip` 在 #486 暗了一階(#2F3033 → #2F2F32)。** 那不是新的設計判斷,是上面 那句「剛好過對比線」多了一條線要過:#486 把「主色的字站在藥丸上」(首頁那顆 「你」,home.css 的 `.fl-you`)補進配對表,而這一塊只有 4.48。 **動藥丸而不動主色,理由是血緣不是喜好。** `--accent` 在這一塊同時逐字等於 `--ring`、`--accent-grad-a`、`--accent-grad-b` 與 `--kind-income` —— 改它要一次 改五格才不會讓那幾格無聲地分家,而且它還要穿過 OKLab 那三條距離 (SPEND、記帳種類、帳本色對主色)。`--chip` 沒有血緣:它只是一片底,而站在它上 面的四種字(`--ink` / `--dim` / `--warn` / `--accent`)在這一塊全都比它亮,所以 暗一階是四格同時變好、一格都不會變壞。幅度是 OKLab 0.0033,「看得出不一樣」那 一階(0.02)的六分之一;代價是藥丸與卡的分離從 1.166 掉到 1.152,仍落在五塊 主題那一族裡(1.15–1.23)。 */ html[data-theme="dark-muted"], .ac-theme[data-theme="dark-muted"] { /* 面與字 */ --bg: #181A1C; --card: #232527; --chip: #2F2F32; --bg-2: #1F2226; --line: #3B3D40; --rule: #6B6E71; --ink: #E6E8EA; --dim: #A2A5AA; --nav: #232527; /* 品牌 */ --accent: #66A382; --on-accent: #181A1C; --accent-soft: #1D3227; --ring: #66A382; --accent-grad-a: #66A382; --accent-grad-b: #66A382; /* 記帳種類 */ --kind-expense: #C98481; --kind-income: #6AB19A; --kind-refund: #6A9DBA; --kind-transfer: #A08EC3; --kind-expense-soft: #3E2726; --kind-income-soft: #1D3227; --kind-refund-soft: #1B303D; --kind-transfer-soft: #322B3F; /* 帳本種類 —— 一種三格,#552 讓使用者挑其中一格 */ --ledger-split: #7599C7; --ledger-split-2: #8CB0E0; --ledger-split-3: #A3C8F9; --ledger-split-soft: #222F40; --ledger-split-2-soft: #2F3945; --ledger-split-3-soft: #394350; --ledger-pool: #5DA29D; --ledger-pool-2: #74BAB4; --ledger-pool-3: #8CD2CC; --ledger-pool-soft: #163231; --ledger-pool-2-soft: #283A38; --ledger-pool-3-soft: #324442; --ledger-capital: #B88F56; --ledger-capital-2: #D0A66D; --ledger-capital-3: #E9BE84; --ledger-capital-soft: #382C1A; --ledger-capital-2-soft: #413627; --ledger-capital-3-soft: #4B4031; --ledger-personal: #BE86A5; --ledger-personal-2: #D79DBD; --ledger-personal-3: #F0B5D5; --ledger-personal-soft: #3D2834; --ledger-personal-2-soft: #43343C; --ledger-personal-3-soft: #4D3E46; /* 狀態 */ --ok: #6AA376; --warn: #BC945A; --danger: #E46689; --ok-soft: #203224; --warn-soft: #382C1A; --danger-soft: #382224; --on-warn: #181A1C; /* 圖表 */ --chart-1: #658FC2; --chart-2: #517F4C; --chart-3: #986C28; --chart-4: #7F6BA4; --chart-5: #A6616D; --chart-6: #2F7D90; --chart-cash: #4E8BAB; --chart-settled: #9976A4; --chart-paid: #5477A3; --chart-grid: #3B3D40; /* 排序長條 —— 單色階梯,1 是第一名 */ --rank-1: #517762; --rank-2: #69987E; --rank-3: #81BB9B; --rank-4: #9BDFB9; /* 成員 */ --member-1: #A87968; --member-2: #95B498; --member-3: #628EA8; --member-4: #A99FC8; --member-5: #E3BBCD; --on-member: #181A1C; /* 系統 */ --statusbar: #181A1C; --manifest-theme: #181A1C; /* 形狀 */ --radius-s: 10px; --radius-m: 12px; --radius-l: 16px; --radius-pill: 999px; --border-w: 1px; /* 陰影與幕 */ --shadow: 0 1px 2px rgba(0,0,0,.35), 0 8px 24px rgba(0,0,0,.25); --shadow-fab: 0 2px 6px rgba(0,0,0,.4), 0 10px 24px rgba(0,0,0,.3); --scrim: rgba(0,0,0,.6); /* 底紋 */ --bg-deco: none; /* 字型 */ --font-body: "Plus Jakarta Sans", -apple-system, "SF Pro Text", "Noto Sans TC", system-ui, sans-serif; --font-heading: "Plus Jakarta Sans", -apple-system, "SF Pro Text", "Noto Sans TC", system-ui, sans-serif; } /* ------------------------------------------------------------------ 可愛 D-F102 新增的第五個 — #392。紫色主色、圓角一路放大到 28px、框線 2px、陰影帶一 道 inset 的「黏土」立體感(ui-ux-pro-max 的 Claymorphism (Mobile)),而字型換成 Nunito —— 圓體與圓角是同一句話的兩半。 **它是唯一一個 `--accent-grad-a` 與 `--accent-grad-b` 不同值的主題**:主鈕與 FAB 在它底下是一道紫色漸層。其餘四個主題兩格同值,所以那道 `linear-gradient` 在它們 身上畫出來的就是一塊實心 —— 讀取端因此只有一份寫法。 `--bg-deco` 在它底下是三顆很淡的徑向漸層(粉 / 紫 / 琥珀),畫在 `body::before` 上。那是這個主題的性格,不是裝飾用的雜訊:它是唯一讓「可愛」在**空白處**也講得 出話的東西。 **它也是唯一一個 `--ring` 不等於 `--accent` 的主題** —— 焦點框刻意比主色淡,同 一句「圓的、軟的」講到鍵盤上。#486 把「焦點框站在卡上」補進配對表之後,這一格 第一次被量到:原本那顆 #A78BFA 站在純白的卡上只有 2.72,而 WCAG 1.4.11 給焦點 框這種看得見才按得下去的元件劃的是 3.0。現在是 #A082F3(3.01)—— **淡的那句話 留著**(它仍然比 #7C3AED 的主色淡),只是淡到線上為止。 */ html[data-theme="cute"], .ac-theme[data-theme="cute"] { /* 面與字 */ --bg: #F4F1FA; --card: #FFFFFF; --chip: #ECE6F8; --bg-2: #E9E5F2; --line: #DDD3F1; --rule: #9288A4; --ink: #332F3A; --dim: #635F69; --nav: #FFFFFF; /* 品牌 */ --accent: #7C3AED; --on-accent: #FFFFFF; --accent-soft: #EDE4FF; --ring: #7C3AED; --accent-grad-a: #8B5CF6; --accent-grad-b: #6D28D9; /* 記帳種類 */ --kind-expense: #B15154; --kind-income: #077A54; --kind-refund: #0B72AD; --kind-transfer: #7C3AED; --kind-expense-soft: #FFF2F1; --kind-income-soft: #E0F7EC; --kind-refund-soft: #E2F1FB; --kind-transfer-soft: #EFE8FF; /* 帳本種類 —— 一種三格,#552 讓使用者挑其中一格 */ --ledger-split: #2359D6; --ledger-split-2: #0D40BC; --ledger-split-3: #012B9A; --ledger-split-soft: #E6EDFE; --ledger-split-2-soft: #D2E1FF; --ledger-split-3-soft: #C0D5FC; --ledger-pool: #0C7A72; --ledger-pool-2: #08625B; --ledger-pool-3: #044B46; --ledger-pool-soft: #DDF5F2; --ledger-pool-2-soft: #D2E8E5; --ledger-pool-3-soft: #C8DBD8; --ledger-capital: #B8500A; --ledger-capital-2: #974107; --ledger-capital-3: #783204; --ledger-capital-soft: #FFF1E4; --ledger-capital-2-soft: #FFE0D1; --ledger-capital-3-soft: #F0D4C7; --ledger-personal: #B21EC4; --ledger-personal-2: #940CA4; --ledger-personal-3: #750782; --ledger-personal-soft: #FBE6FC; --ledger-personal-2-soft: #F9D2FD; --ledger-personal-3-soft: #E9C8EC; /* 狀態 */ --ok: #077A54; --warn: #A84C08; --danger: #C21F66; --ok-soft: #E0F7EC; --warn-soft: #FFEEDD; --danger-soft: #FFE8F1; --on-warn: #FFFFFF; /* 圖表 */ --chart-1: #8B5CF6; --chart-2: #DB2777; --chart-3: #3B82F6; --chart-4: #BD8000; --chart-5: #059669; --chart-6: #EA580C; --chart-cash: #2F6BE8; --chart-settled: #C026D3; --chart-paid: #8B5CF6; --chart-grid: #DDD3F1; /* 排序長條 —— 單色階梯,1 是第一名 */ --rank-1: #451F89; --rank-2: #6530C1; --rank-3: #8154E5; --rank-4: #9C83EB; /* 成員 */ --member-1: #8D3505; --member-2: #075C84; --member-3: #086621; --member-4: #593CA2; --member-5: #95236A; --on-member: #FFFFFF; /* 系統 */ --statusbar: #F4F1FA; --manifest-theme: #F4F1FA; /* 形狀 */ --radius-s: 14px; --radius-m: 20px; --radius-l: 28px; --radius-pill: 999px; --border-w: 2px; /* 陰影與幕 */ --shadow: inset 0 -3px 0 rgba(124,58,237,.10), 0 6px 0 rgba(124,58,237,.06), 0 12px 28px rgba(124,58,237,.12); --shadow-fab: 0 6px 0 rgba(91,33,182,.55), 0 14px 28px rgba(124,58,237,.35); --scrim: rgba(51,47,58,.45); /* 底紋 */ --bg-deco: radial-gradient(circle at 12% 6%, rgba(219,39,119,.16), transparent 28%), radial-gradient(circle at 92% 28%, rgba(124,58,237,.16), transparent 30%), radial-gradient(circle at 18% 88%, rgba(251,191,36,.18), transparent 28%); /* 字型 */ --font-body: "Nunito", -apple-system, "SF Pro Text", "Noto Sans TC", system-ui, sans-serif; --font-heading: "Nunito", -apple-system, "SF Pro Text", "Noto Sans TC", system-ui, sans-serif; } /* ---------------------------------------------------------------- Organic 使用者裁示 2026-08-25 的第三個主題,而 **D-F102 把它整組換掉了** — #392。#260 那一版是奶油沙 + 陶土 + 鼠尾草,#391 重新設計成「竹影苔茶」:竹漿宣紙的暖白底 oklch(0.961 0.010 94)、松煙墨的 ink、抹茶綠的主色 oklch(0.48 0.09 152)、茶園色 的圖表。字型從 Caprasimo + Figtree 換成 **Fraunces + Plus Jakarta Sans**:標題 是一支帶 SOFT 軸的襯線,內文回到與其餘主題同一支無襯線 —— 舊那一版標題與內文 都是自己的字,而那讓每一頁的內文在五個主題之間換來換去。 **名字仍然是「Organic」** — D-F102(使用者裁示):設定頁上那一格印的就是這四個 字母,不譯成中文。舊使用者存的 `tabby.theme=organic` 因此原樣沿用,他打開來看 到的是新的這一組(prefs.js 的遷移那一段寫著為什麼不另發通知)。 `--nav` 刻意比 `--card` 深一階(#F1EFE6 對 #FCFAF6):底部那條導覽列在暖白的紙 上要看得出是另一塊面,而一條 1px 的線在這個色域裡不夠。 標題那一支 Fraunces 的變數軸由底下 `html[data-theme="organic"]` 的 `font-variation-settings` 給(SOFT 50 / opsz 36)—— 那是這一支字「軟」起來的地 方,而不設定的話拿到的是它的 default instance(SOFT 0,一支很硬的襯線)。 */ html[data-theme="organic"], .ac-theme[data-theme="organic"] { /* 面與字 */ --bg: #F4F2EB; --card: #FCFAF6; --chip: #EAE6DB; --bg-2: #EAE7DC; --line: #DBD6C6; --rule: #918C7D; --ink: #1E231E; --dim: #586555; --nav: #F1EFE6; /* 品牌 */ --accent: #306C43; --on-accent: #FFFFFF; --accent-soft: #D2E2CF; --ring: #306C43; --accent-grad-a: #306C43; --accent-grad-b: #306C43; /* 記帳種類 */ --kind-expense: #A84F45; --kind-income: #537031; --kind-refund: #367187; --kind-transfer: #806543; --kind-expense-soft: #FFE8E4; --kind-income-soft: #DAF1DF; --kind-refund-soft: #D4F1FD; --kind-transfer-soft: #FCEAD4; /* 帳本種類 —— 一種三格,#552 讓使用者挑其中一格 */ --ledger-split: #316F97; --ledger-split-2: #185980; --ledger-split-3: #044466; --ledger-split-soft: #D8F0FF; --ledger-split-2-soft: #CFE2F1; --ledger-split-3-soft: #C4D6E3; --ledger-pool: #30746C; --ledger-pool-2: #155E57; --ledger-pool-3: #044842; --ledger-pool-soft: #D2F3ED; --ledger-pool-2-soft: #CFE3E0; --ledger-pool-3-soft: #C4D6D3; --ledger-capital: #915F21; --ledger-capital-2: #794A06; --ledger-capital-3: #5E3803; --ledger-capital-soft: #FDE9D4; --ledger-capital-2-soft: #EEDDCB; --ledger-capital-3-soft: #E0D1C2; --ledger-personal: #985476; --ledger-personal-2: #803F60; --ledger-personal-3: #692A4C; --ledger-personal-soft: #FFE6F2; --ledger-personal-2-soft: #F3D9E4; --ledger-personal-3-soft: #E6CDD8; /* 狀態 */ --ok: #39754D; --warn: #8A5720; --danger: #B7184C; --ok-soft: #D9F1DF; --warn-soft: #FEE9D5; --danger-soft: #F8D0D5; --on-warn: #FFFFFF; /* 圖表 */ --chart-1: #247E6B; --chart-2: #6E9162; --chart-3: #AB7E54; --chart-4: #568FA7; --chart-5: #A85B68; --chart-6: #A381A0; --chart-cash: #468097; --chart-settled: #8F7451; --chart-paid: #6E9162; --chart-grid: #DBD6C6; /* 排序長條 —— 單色階梯,1 是第一名 */ --rank-1: #133D21; --rank-2: #205D35; --rank-3: #2F7F4B; --rank-4: #3FA261; /* 成員 */ --member-1: #8F3306; --member-2: #075D7E; --member-3: #176028; --member-4: #604785; --member-5: #A13A6A; --on-member: #FCFAF6; /* 系統 */ --statusbar: #F4F2EB; --manifest-theme: #F4F2EB; /* 形狀 */ --radius-s: 10px; --radius-m: 14px; --radius-l: 20px; --radius-pill: 999px; --border-w: 1px; /* 陰影與幕 */ --shadow: 0 1px 2px rgba(35,45,30,.05), 0 8px 24px rgba(35,45,30,.06); --shadow-fab: 0 3px 10px rgba(35,88,53,.25), 0 10px 24px rgba(35,45,30,.12); --scrim: rgba(28,33,28,.5); /* 底紋 */ --bg-deco: radial-gradient(ellipse at 12% 0%, rgba(90,120,70,.10), transparent 42%), radial-gradient(ellipse at 100% 90%, rgba(170,140,80,.10), transparent 40%); /* 字型 */ --font-body: "Plus Jakarta Sans", -apple-system, "SF Pro Text", "Noto Sans TC", system-ui, sans-serif; --font-heading: "Fraunces", -apple-system, "SF Pro Text", "Noto Sans TC", system-ui, sans-serif; } /* Fraunces 的變數軸 — #392。**它不是 token**:`font-variation-settings` 是規則不 是值,而它只對一支字型有意義。放在這裡而不是 style.css,理由與 `@font-face` 相同 —— 換掉 Organic 那支字的人只要讀這一支檔案。 `.brand` 是左上角那個 app 名,`h3` 是卡片標題,`.big` 是首頁那個大數字 —— `--font-heading` 的三個讀者(style.css),逐字對上。 */ html[data-theme="organic"] .brand, html[data-theme="organic"] h3, html[data-theme="organic"] .big { font-variation-settings: "SOFT" 50, "opsz" 36; }