185 lines
7.2 KiB
CSS
185 lines
7.2 KiB
CSS
/**
|
||
* 巡樓 · Lapras — Harbor Desk UI
|
||
* 色：pale blue 主色 / cream 次色 / burnt orange 點綴（Pokémon Palette）
|
||
* 字體：Inter（拉丁）+ Noto Sans TC（中文，可變字重 400–700）
|
||
*
|
||
* 唯一真相：顏色、字級、間距只在這個檔案定義。其他 css 與 tsx 一律吃 var()，
|
||
* 不寫死色碼與 font-size —— 否則深淺模式會有一半的畫面不跟著切。
|
||
* 由 `npm run check:tokens` 把關。
|
||
*
|
||
* 命名規則：
|
||
* X 當填色、底色、邊框
|
||
* X-on 疊在 X 底色上的文字
|
||
* X-soft hover／淡底
|
||
* X-deep 把該色「當文字」放在頁面或卡片底色上的深一階；只有本身對比不足的
|
||
* 顏色才有（brand / danger / warning），success 自己就過 AA。
|
||
* 主色是淺藍，當文字只有 1.9:1，所以主色當文字一律走 --hb-brand-deep。
|
||
* --hb-subtle 只有 3.8:1，僅供裝飾與 18px 以上大字，勿用於內文。
|
||
*
|
||
* 兩條防髒規則：
|
||
* 1. 不要把兩個「有彩度」的顏色互相 color-mix。藍(H≈187)配橘(H≈32)是補色，
|
||
* 混出來一定是濁褐；要調淡就跟 surface／line／transparent 混。要一深一淺的
|
||
* 同一顏色就用 X 與 X-deep。
|
||
* 2. 中性色（bg / surface / line / muted / subtle）全部維持 H≈180-191 的冷青，
|
||
* 跟 ink 與主色同溫。palette 原本的 muted 是 H=44 的暖褐，疊在偏冷的白底上
|
||
* 會整片發黃發濁。暖色只出現在刻意的強調上：warning、accent、方案金標。
|
||
*/
|
||
|
||
:root {
|
||
color-scheme: light;
|
||
|
||
--hb-bg: #fcfdfd;
|
||
--hb-surface: rgba(255, 255, 255, 0.9);
|
||
--hb-surface-solid: #ffffff;
|
||
--hb-surface-muted: #f2f6f6;
|
||
--hb-ink: #152628;
|
||
--hb-text: #152628;
|
||
--hb-fg: #152628;
|
||
--hb-ink-secondary: #33474a;
|
||
--hb-muted: #566869; /* 5.8:1 於 bg、5.4:1 於 surface-muted */
|
||
--hb-subtle: #748687; /* 3.8:1 — 裝飾／大字限定 */
|
||
--hb-line: color-mix(in srgb, #e0e9eb 88%, transparent);
|
||
--hb-line-strong: #e0e9eb;
|
||
--hb-scrim: rgb(21 38 40 / 0.55);
|
||
|
||
--hb-brand: #8bc5cd;
|
||
--hb-brand-hover: #76b8c1;
|
||
--hb-brand-soft: color-mix(in srgb, #8bc5cd 20%, #ffffff);
|
||
--hb-brand-on: #0a0a0a; /* 10.3:1 於 brand */
|
||
--hb-brand-deep: #2d5f66; /* 7.0:1 於 bg，主色當文字時用 */
|
||
--hb-magic: #fee5a1; /* 次色奶油黃：只當淡底與裝飾 */
|
||
--hb-magic-glow: rgb(139 197 205 / 0.2);
|
||
--hb-focus: #2d5f66;
|
||
|
||
--hb-success: #2f7d3f; /* 純綠 H=135，與 brand-deep 的青藍明顯分開 */
|
||
--hb-success-soft: #eaf4ec;
|
||
--hb-success-on: #ffffff; /* 5.2:1 */
|
||
--hb-danger: #ef4444;
|
||
--hb-danger-soft: #fdecec;
|
||
--hb-danger-on: #0a0a0a; /* 5.3:1；白字只有 3.8:1 */
|
||
--hb-danger-deep: #c0392b; /* 5.3:1 於 bg */
|
||
--hb-warning: #b96b1c;
|
||
--hb-warning-soft: #fbf1e3;
|
||
--hb-warning-on: #0a0a0a; /* 4.9:1；白字只有 4.1:1 */
|
||
--hb-warning-deep: #a35d16; /* 5.1:1 於白卡 */
|
||
--hb-accent-warm: #b96b1c; /* 與 warning 同色：palette 只有這一個暖點綴 */
|
||
|
||
/* 畫布極光：主色的暗一階，只用來鋪背景 */
|
||
--hb-brand-dim: #6f9ba3;
|
||
--hb-aurora-1: color-mix(in srgb, #8bc5cd 20%, transparent);
|
||
--hb-aurora-2: color-mix(in srgb, #8bc5cd 11%, transparent);
|
||
--hb-aurora-3: color-mix(in srgb, #6f9ba3 12%, transparent);
|
||
|
||
/* 付費方案的金色字光（裝飾用，不當文字色） */
|
||
--hb-gold: #d9a531;
|
||
--hb-gold-bright: #fee5a1;
|
||
|
||
--hb-radius: 0.8rem;
|
||
--hb-radius-lg: 1rem;
|
||
--hb-radius-xl: 1.15rem;
|
||
--hb-radius-pill: 9999px;
|
||
|
||
--hb-shadow-card:
|
||
0 0 0 1px color-mix(in srgb, var(--hb-line-strong) 70%, transparent),
|
||
0 1px 2px rgb(21 38 40 / 0.04),
|
||
0 9px 28px rgb(21 38 40 / 0.06);
|
||
--hb-shadow-soft: 0 4px 18px var(--hb-magic-glow);
|
||
--hb-shadow-float: 0 16px 48px rgb(21 38 40 / 0.12);
|
||
--hb-shadow-glow: 0 0 24px rgb(139 197 205 / 0.4);
|
||
|
||
/* Latin → Inter；中文只走 Noto Sans TC（400–700，含 500／600／650）。 */
|
||
--hb-font-sans: "Inter", "Noto Sans TC", system-ui, -apple-system, "Segoe UI", sans-serif;
|
||
--hb-font-en: var(--hb-font-sans);
|
||
--hb-font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
|
||
|
||
/* 字階只有這 7 級，之間沒有中間值 —— 0.8 / 0.82 / 0.85 併存看不出差別，
|
||
只會讓整頁失去節奏。輸入框維持 16px 避免 iOS 聚焦時縮放。 */
|
||
--hb-text-2xs: 0.75rem; /* 12px · badge／極小 meta */
|
||
--hb-text-xs: 0.8125rem; /* 13px · 次要 meta */
|
||
--hb-text-sm: 0.875rem; /* 14px · 按鈕／輔助 */
|
||
--hb-text-base: 1rem; /* 16px · 內文 */
|
||
--hb-text-lg: 1.125rem; /* 18px · 卡片標題 */
|
||
--hb-text-xl: 1.375rem; /* 22px · 頁標題 */
|
||
--hb-text-2xl: 1.75rem; /* 28px · 登入／定價大標 */
|
||
--hb-text-input: 1rem; /* 16px · 表單 */
|
||
|
||
--hb-space-1: 0.25rem;
|
||
--hb-space-2: 0.5rem;
|
||
--hb-space-3: 0.75rem;
|
||
--hb-space-4: 1rem;
|
||
--hb-space-5: 1.25rem;
|
||
--hb-space-6: 1.5rem;
|
||
--hb-space-8: 2rem;
|
||
--hb-space-10: 2.5rem;
|
||
--hb-gap-tight: 0.5rem; /* 列內小元件 */
|
||
--hb-gap-inline: 0.625rem; /* 同列按鈕、chip */
|
||
--hb-gap-stack: 0.8rem; /* 表單欄位、stack 預設 */
|
||
--hb-gap-block: 1.05rem; /* 卡片內大段 */
|
||
--hb-gap-section: 1.3rem; /* 頁面區塊與區塊 */
|
||
--hb-gap-page: 1.75rem; /* 頁面上下大留白（桌面） */
|
||
|
||
--hb-touch: 2.75rem;
|
||
--hb-sidebar-width: 15rem;
|
||
--hb-topbar-height: 3.6rem;
|
||
--hb-dock-height: 3.85rem;
|
||
}
|
||
|
||
/**
|
||
* Dark：冷灰藍畫布，暖褐色作為 muted 層（palette 的 --muted 就是暖色）。
|
||
* 深底下亮色本身對比就夠，所以 -deep 反而是更亮的一階。
|
||
*/
|
||
[data-theme="dark"] {
|
||
color-scheme: dark;
|
||
|
||
--hb-bg: #141a1a;
|
||
--hb-surface: rgba(27, 38, 39, 0.9);
|
||
--hb-surface-solid: #1b2627;
|
||
--hb-surface-muted: #243132;
|
||
--hb-ink: #f4f6f6;
|
||
--hb-text: #f4f6f6;
|
||
--hb-fg: #f4f6f6;
|
||
--hb-ink-secondary: #d3dcdc;
|
||
--hb-muted: #a9b7b7; /* 8.5:1 */
|
||
--hb-subtle: #8b9a9a; /* 6.0:1 */
|
||
--hb-line: color-mix(in srgb, #2d4143 92%, transparent);
|
||
--hb-line-strong: #2d4143;
|
||
--hb-scrim: rgb(0 0 0 / 0.66);
|
||
|
||
--hb-brand: #89c5cd;
|
||
--hb-brand-hover: #a3d4da;
|
||
--hb-brand-soft: color-mix(in srgb, #89c5cd 14%, #1b2627);
|
||
--hb-brand-on: #0a0a0a; /* 10.3:1 */
|
||
--hb-brand-deep: #b7e3e8;
|
||
--hb-magic: #fee59f;
|
||
--hb-magic-glow: rgb(137 197 205 / 0.18);
|
||
--hb-focus: #89c5cd;
|
||
|
||
--hb-success: #74d189; /* 9.4:1，純綠 */
|
||
--hb-success-soft: #16251a;
|
||
--hb-success-on: #0a0a0a;
|
||
--hb-danger: #dc2626;
|
||
--hb-danger-soft: #341919;
|
||
--hb-danger-on: #ffffff; /* 4.8:1 —— 深底的紅維持白字 */
|
||
--hb-danger-deep: #f87171; /* 5.6:1 於卡片；#ef4444 只有 4.1:1 */
|
||
--hb-warning: #e18c37; /* 6.7:1 */
|
||
--hb-warning-soft: #2f2416;
|
||
--hb-warning-on: #0a0a0a;
|
||
--hb-warning-deep: #e18c37; /* 深底不必再加深 */
|
||
--hb-accent-warm: #e18c37;
|
||
|
||
--hb-brand-dim: #7fb0b8;
|
||
--hb-aurora-1: color-mix(in srgb, #89c5cd 14%, transparent);
|
||
--hb-aurora-2: color-mix(in srgb, #89c5cd 7%, transparent);
|
||
--hb-aurora-3: color-mix(in srgb, #7fb0b8 8%, transparent);
|
||
|
||
--hb-gold: #e1b84f;
|
||
--hb-gold-bright: #fee59f;
|
||
|
||
--hb-shadow-card:
|
||
0 0 0 1px color-mix(in srgb, #2d4143 90%, transparent),
|
||
0 10px 36px rgb(0 0 0 / 0.45);
|
||
--hb-shadow-soft: 0 4px 22px var(--hb-magic-glow);
|
||
--hb-shadow-float: 0 20px 56px rgb(0 0 0 / 0.55);
|
||
--hb-shadow-glow: 0 0 32px rgb(137 197 205 / 0.28);
|
||
}
|