/* ========================================================================== 桃園市公車動態系統 — 設計 Token（純變數） 版本：v4.13 變更：新增首頁 hero 色場 Token。hero 改為整片粉紅、白字， 底色由官方 #E65195 降明度至 #D42D80 以通過 AA。 v4.11：表頭字色對比標註改為實測值 4.69:1（原標 4.77:1 為理論計算）。 v4.9：修正 --map-stop-endpoint-text。原標為白色，但實際標記的數字繪於 白色內圓上，白字會消失。改為深藍，與一般站牌的字色一致。 地圖標記的實作採同事版，本檔的 --map-* 僅作為色彩參考。 v4.8：新增資料表表頭 Token。表頭與內容列原本都是白底，只差字色， 在小字級上撐不起「這是另一種列」的訊號。 v4.6：地圖站牌補第三層「頭尾站」；選取狀態從填色軸移出，改為外加桃紅光環， 使頭尾站不再佔用選取色。 v4.5：定案「框線重量」方案 —「即將進站」改為無填色 + 桃紅細框。 四個層級變成 實心 → 深框 → 淺框 → 無框，靠框線亮度遞減區分， 總著墨面積比任何填色方案都小。地圖站牌框線改用 blue-600 以取得邊緣定義。 v4.4：拉開 soon 與 mid 的差距（原底色亮度比僅 1.02:1，灰階下相同）。 v4.3：依後端實際規則確定兩層分工 — 「進站中」（車輛壓到站圈，一台車只有一個）套 --bus-arriving-*， 「即將進站」（< 4 分）套 --bus-soon-*。脈動點只給「進站中」。 v4.2：廢除「站序最前才實心」規則；新增地圖標記 Token。 v4.1：粉色階以 #e85298 的色相（HSL 332°）重新推導全階，pink-500 加深。 -------------------------------------------------------------------------- 本檔「只有」:root 自訂屬性，不含任何選擇器規則。 不會與 Bootstrap 或既有樣式表產生層疊衝突，放在載入鏈任何位置都安全。 元件樣式在 taoyuan-ibus-components.css， 該檔必須載入在 bootstrap.min.css 之後。 版本核對：在 DevTools Console 執行 getComputedStyle(document.documentElement).getPropertyValue('--ty-tokens-version') 應回傳 "v4.13"。 ========================================================================== */ :root { --ty-tokens-version: "v4.13"; /* ------------------------------------------------------------------ Layer 1｜品牌原色階 桃紅：以專案實際值 #e85298 為錨點。 該值與 CI 的 CMYK 0/80/0/0 轉 sRGB 結果一致，視為正解。 全階固定在 HSL 色相 332°，明度等距遞減，確保色階連續。 ------------------------------------------------------------------ */ --tao-pink-50: #FDEFF6; /* H332 L96.5% */ --tao-pink-100: #FBD8E8; /* H332 L91.5% */ --tao-pink-200: #F6B4D3; /* H332 L83.5% */ --tao-pink-300: #EF87B8; /* H332 L73.5% */ --tao-pink-400: #E85298; /* H332 L61.6% — 品牌標準色，等同專案現值 */ --tao-pink-500: #CE1C6F; /* H332 L46.0% — 白字 5.22:1 */ --tao-pink-600: #A8175B; /* H332 L37.5% — 白底 7.15:1、pink-50 上 6.42:1 */ --tao-pink-700: #811045; /* H332 L28.5% — 白底 10.03:1，高對比模式用 */ --tao-pink-800: #570A2E; /* H332 L19.0% */ /* 天藍 — 智慧科技（CMYK 46 0 7 0），色相 196° */ --tao-blue-50: #E9F6FC; --tao-blue-100: #CDEBF8; --tao-blue-200: #9DDBF3; --tao-blue-400: #5FC8EE; --tao-blue-600: #2A94BC; --tao-blue-700: #1B6E8C; /* blue-50 上 5.21:1 */ --tao-blue-800: #114A5E; /* 草綠 — 環保永續（CMYK 44 0 63 0） */ --tao-green-50: #EFF7EA; --tao-green-100: #D9EDCB; --tao-green-400: #97CD7C; --tao-green-600: #5C9440; --tao-green-700: #43702E; --tao-green-800: #2C4B1E; /* 鵝黃 — 婦幼友善，色相 51° ！待確認：專案現有品牌黃為 #ffd900，與 CI 的 CMYK 10/13/81/0 不相符。 該 CMYK 轉 sRGB 落在 #EBD84A 附近，#ffd900 明顯更飽和，兩者不是同一色。 若日後確認 #ffd900 為正式品牌黃，**只需更動 yellow-400**。 50 與 700 是為了背景與文字的易讀性推導的，不承載品牌表現， 因此 --bus-ended-* 不會因為那個決定而改變。 */ --tao-yellow-50: #FDF9E3; /* H51 L94.0% */ --tao-yellow-100: #FAF0BD; /* H51 L86.0% */ --tao-yellow-400: #EBD44F; /* H51 L61.6% — CI 換算值，待確認 */ --tao-yellow-600: #AA920E; /* H51 L36.0% */ --tao-yellow-700: #726206; /* H51 L23.5% — yellow-50 上 5.73:1、白底 6.06:1 */ /* 中性灰 — 600 為 CI 深灰（CMYK 0 0 0 80） */ --tao-gray-0: #FFFFFF; --tao-gray-25: #FAFAFB; --tao-gray-50: #F4F5F7; --tao-gray-100: #EEEFF2; --tao-gray-200: #E3E4E8; --tao-gray-300: #C7C9CE; --tao-gray-400: #9A9DA3; --tao-gray-500: #6B6E73; --tao-gray-600: #58595B; --tao-gray-700: #45464A; --tao-gray-800: #33363B; --tao-gray-900: #1F2124; /* ------------------------------------------------------------------ Layer 2｜語意 Token 元件只能引用這一層，不要直接引用 Layer 1 ------------------------------------------------------------------ */ --bg-page: var(--tao-gray-25); --bg-surface: var(--tao-gray-0); --bg-subtle: var(--tao-gray-50); --bg-hover: var(--tao-gray-50); --bg-selected: var(--tao-pink-50); --text-primary: var(--tao-gray-800); --text-secondary: var(--tao-gray-500); --text-muted: var(--tao-gray-400); --text-brand: var(--tao-pink-600); /* 白底 7.15:1 */ --text-link: var(--tao-pink-600); --text-on-brand: var(--tao-gray-0); --border-subtle: var(--tao-gray-100); --border-base: var(--tao-gray-200); --border-strong: var(--tao-gray-300); --border-brand: var(--tao-pink-400); /* 首頁 hero 色場 官方橫幅原色為 #E65195，白字僅 3.51:1，未達一般文字的 4.5:1。 色相與飽和度不變，只降明度至 #D42D80，白字 4.68:1。 此值與圖檔內的底色一致，供圖檔未覆蓋處作為銜接色，避免出現接縫。 */ --hero-bg: #D42D80; /* 白字 4.68:1 */ --hero-text: var(--tao-gray-0); --hero-lede: var(--tao-gray-0); /* 資料表表頭 底色與白色的亮度差只有 1.09:1，單靠底色不夠， 必須同時搭配較重的下框線與較小的字級。 */ --table-head-bg: var(--tao-gray-50); /* #F4F5F7 */ --table-head-text: var(--tao-gray-500); /* #6B6E73，表頭底上實測 4.69:1，過 AA */ --table-head-border: var(--tao-gray-300); /* #C7C9CE，2px */ --action-bg: var(--tao-pink-500); /* 白字 5.22:1 */ --action-bg-hover: var(--tao-pink-600); --action-bg-active: var(--tao-pink-700); --action-text: var(--tao-gray-0); --action-2-bg: transparent; --action-2-bg-hover: var(--tao-gray-50); --action-2-border: var(--tao-gray-300); --action-2-text: var(--tao-gray-700); --disabled-bg: var(--tao-gray-100); --disabled-text: var(--tao-gray-400); --disabled-border: var(--tao-gray-200); /* focus 環用 pink-400 的 rgb，40% 不透明度在淺底與深底上都看得見 */ --focus-ring: 0 0 0 3px rgba(232, 82, 152, 0.40); --focus-outline: 2px solid var(--tao-pink-500); /* ------------------------------------------------------------------ Layer 3｜到站狀態 Token 分級由前端從顯示字串判讀（後端只回文字，未帶分級）。 判讀邏輯見指令書「階段二」的 busStatusClass()。 括號內為實測對比度，全數通過 WCAG 2.1 AA（4.5:1）。 ------------------------------------------------------------------ */ /* 進站中 — 後端規則：車輛接觸站牌進站站圈時顯示，一台車只會有一個。 畫面上通常 0 個、偶爾 1 個，四台車全壓站圈才 4 個。 稀有且最該行動，因此是全站最重的視覺。 全部套用，不因數量多而降級 —— 每個都是一台真實的車。 */ --bus-arriving-bg: var(--tao-pink-500); --bus-arriving-text: var(--tao-gray-0); /* 5.22:1 */ --bus-arriving-border: transparent; /* 即將進站 — 後端規則：預估到站 < 4 分（3 分 59 秒以內）。 這是每個站牌各自的預估值，不是每台車一個。站距密集時， 一台車就能讓連續三到五站同時落在此區間， 因此結構上就是高頻狀態，一次出現五到十個屬正常。 必須保持安靜，不可使用實心底色或動態效果。 */ --bus-soon-bg: transparent; --bus-soon-text: var(--tao-pink-600); /* 白底 7.15:1 */ --bus-soon-border: var(--tao-pink-400); /* 白底 3.45:1，過非文字對比 3:1 */ /* 4–15 分 — 無填色 + 淺灰細框。 與「即將進站」的差異落在框線亮度： pink-400 相對亮度 0.255、gray-200 為 0.777，兩者對比 2.71:1， 灰階與全色盲條件下仍可區分。 此框線為輔助線索，狀態本身由文字與文字色承載，兩者皆過 AA。 */ --bus-mid-bg: transparent; --bus-mid-text: var(--tao-gray-800); /* 白底 12.07:1 */ --bus-mid-border: var(--tao-gray-200); /* 15 分以上 — 不給底色，降到純文字 */ --bus-far-bg: transparent; --bus-far-text: var(--tao-gray-500); /* 白底 5.19:1 */ --bus-far-border: transparent; /* 時刻表預定發車 — 用天藍與即時資訊區隔，避免誤讀 */ --bus-scheduled-bg: var(--tao-blue-50); --bus-scheduled-text: var(--tao-blue-700); /* 5.21:1 */ --bus-scheduled-border: transparent; /* 末班已過 / 今日未營運 / 停駛 — 定案值，取代現況的橘底深藍字 橘色不在 CI 色票內。改用 CI 鵝黃最淺階，保留「這列與眾不同」的 訊號但不刺眼。此組不依賴未確認的 yellow-400。 */ --bus-ended-bg: var(--tao-yellow-50); --bus-ended-text: var(--tao-yellow-700); /* 5.73:1 */ /* 2026-09-09 從 transparent 改為有框，與「即將進站」一致（機關指示）。 用 yellow-700 而不是較淺的 600：邊框內側是 yellow-50 底、外側是表格白底， 兩側都要過非文字對比 3:1，而 600 對黃底只有 2.91:1。 */ --bus-ended-border: var(--tao-yellow-700); /* 白底 6.06:1、yellow-50 上 5.73:1 */ /* 未發車 / 無資料 */ --bus-inactive-bg: transparent; --bus-inactive-text: #73767C; /* 白底 4.55:1（2026-10 使用者裁示：剛好達 AA；原 gray-400 只有 2.7:1） */ --bus-inactive-border: transparent; /* 我的最愛 */ --fav-off: var(--tao-gray-300); --fav-on: var(--tao-pink-500); /* ------------------------------------------------------------------ 地圖標記（色彩參考） 標記的實作採同事版，本區僅提供色值與對比度依據，不規範標記結構。 原則：會動的東西用強色，固定的東西退到背景。 使用者在地圖上找的是「車在哪」，站牌只是脈絡。 現況兩者都是深藍，彼此競爭。 ------------------------------------------------------------------ */ /* 站牌 — 淺藍底深藍字，數字仍清晰但整體後退。 框線用 blue-600 而非 blue-400：底圖多為白灰綠，淺色填色需要 一圈夠深的邊才有輪廓。blue-600 白底 3.46:1，過非文字對比 3:1。 */ --map-stop-bg: var(--tao-blue-100); /* #CDEBF8 */ --map-stop-text: var(--tao-blue-800); /* #114A5E，7.78:1 */ --map-stop-border: var(--tao-blue-600); /* #2A94BC，白底 3.46:1 */ /* 頭尾站（起點 / 終點） 起點與終點靠符號區分（起 / 終、▶ / ■），不靠顏色 —— 兩者語意同等，不應有深淺之分，且符號對色覺障礙者同樣有效。 用 blue-700 而非深灰：深灰在地圖上接近純黑，重量會超過桃紅公車， 造成靜態脈絡壓過移動中的車，層級倒置。 */ --map-stop-endpoint-bg: var(--tao-blue-700); /* #1B6E8C，水滴本體 */ --map-stop-endpoint-text: var(--tao-blue-800); /* #114A5E，白底 9.70:1 ！此字色繪於標記中央的白色內圓上，不是直接繪於水滴填色上。 先前標為白色是錯的 —— 白字畫在白圓上會完全消失。 與一般站牌使用同一個字色，頭尾站的區別由水滴本體顏色承擔。 */ /* 選取中 — 不改填色，外加光環。 好處：選到頭尾站時仍看得出它是頭尾站； 且深色軸不再被佔用，任何一層被選取都能表示。 */ --map-selected-ring: 0 0 0 4px rgba(232, 82, 152, 0.45); /* 公車 — 唯一使用桃紅的地圖元素，在藍綠色系的底圖上最跳 */ --map-bus-bg: var(--tao-pink-500); --map-bus-text: var(--tao-gray-0); /* 5.22:1 */ --map-bus-border: var(--tao-gray-0); /* ------------------------------------------------------------------ 字型 — 2026-09-14 改為自託管切片後，值與 css/fonts-notosans.css 對齊。 那支才是唯一來源（由 tools/fonts 產生），這裡保持同值只是為了讓 --font-sans 不論 CSS 載入順序如何都正確：少了後面兩個 family， 景點頁的專用字與字集外的新字會靜默掉回系統字型。 ------------------------------------------------------------------ */ --font-sans: 'Noto Sans TC', 'Noto Sans TC Ext', 'Noto Sans TC Fallback', sans-serif; /* ------------------------------------------------------------------ 版面 ------------------------------------------------------------------ */ --text-xs: 12px; --text-sm: 13px; --text-base: 15px; --text-lg: 17px; --text-xl: 20px; --text-2xl: 24px; --leading-tight: 1.35; --leading-base: 1.65; --weight-regular: 400; --weight-medium: 500; --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --radius-sm: 6px; --radius-md: 8px; --radius-lg: 12px; --radius-pill: 999px; --touch-target: 44px; --dur-fast: 120ms; --dur-base: 200ms; --ease: cubic-bezier(0.2, 0, 0.2, 1); } /* ========================================================================== 高對比模式 淺底狀態改為描邊 + 深字 ========================================================================== */ @media (prefers-contrast: more) { :root { --bus-soon-bg: transparent; --bus-soon-text: var(--tao-pink-700); /* 白底 10.03:1 */ --bus-soon-border: var(--tao-pink-700); --bus-mid-text: var(--tao-gray-900); --bus-mid-border: var(--tao-gray-700); --bus-scheduled-bg: transparent; --bus-scheduled-text: var(--tao-blue-800); --bus-scheduled-border: var(--tao-blue-800); --bus-ended-bg: transparent; --bus-ended-text: var(--tao-yellow-700); /* 白底 6.06:1 */ --bus-ended-border: var(--tao-yellow-700); --text-secondary: var(--tao-gray-700); --border-base: var(--tao-gray-500); } }