Skip to content

Commit f32f4c4

Browse files
areyoubugcoderareyoubugcoder
committed
style: align docs theme with apps/web design tokens
- apply brand yellow #FDC800 only as CTA/focus/active marker - switch UI to Inter, code/path to JetBrains Mono - recalibrate type scale (base 17, hero capped at 35) - independent light/dark themes with warm #FBFBF9 surface
1 parent f1d3cef commit f32f4c4

2 files changed

Lines changed: 329 additions & 7 deletions

File tree

‎.vitepress/theme/components/CopyPath.vue‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -60,10 +60,12 @@ const copyToClipboard = async () => {
6060
6161
.path-text {
6262
background: var(--vp-code-bg);
63-
padding: 0 6px;
63+
border: 1px solid var(--vp-c-divider);
64+
padding: 1px 6px;
6465
border-radius: 4px;
6566
font-family: var(--vp-font-family-mono);
66-
font-size: 0.875em;
67+
font-size: 0.9em;
68+
color: var(--vp-c-text-1);
6769
margin: 0;
6870
}
6971

‎.vitepress/theme/custom.css‎

Lines changed: 325 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,329 @@
1-
/* 调整首页 tagline/description 字体大小 */
2-
.VPHero .tagline {
3-
font-size: 48px !important;
1+
/* ============================================================
2+
* Mp2RSS Docs —— 基调对齐 apps/web/.impeccable.md
3+
* 沉静 · 工具感 · 可信（Linear / Stripe Dashboard 风格）
4+
* 主色 #FDC800 只做状态标记；排版承担叙事；code 用 mono
5+
* ============================================================ */
6+
7+
@import url("https://rsms.me/inter/inter.css");
8+
@import url("https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600&display=swap");
9+
10+
/* ---------- 字体栈：UI = Inter，机器可读文本 = JetBrains Mono ---------- */
11+
:root {
12+
--vp-font-family-base:
13+
"Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
14+
"Helvetica Neue", Arial, "PingFang SC", "Hiragino Sans GB",
15+
"Microsoft YaHei", sans-serif;
16+
--vp-font-family-mono:
17+
"JetBrains Mono", ui-monospace, SFMono-Regular, "SF Mono", Menlo,
18+
Consolas, "Liberation Mono", monospace;
19+
}
20+
21+
/* ---------- 类型标尺：13 / 15 / 17 / 21 / 27 / 35（base = 17） ---------- */
22+
:root {
23+
--mp-text-xs: 13px;
24+
--mp-text-sm: 15px;
25+
--mp-text-base: 17px;
26+
--mp-text-lg: 21px;
27+
--mp-text-xl: 27px;
28+
--mp-text-2xl: 35px;
29+
30+
--vp-layout-max-width: 1440px;
431
}
532

6-
/* 如果是 text 字段也需要调整 */
33+
/* ============================================================
34+
* 浅色主题 —— surface 暖白 #FBFBF9 / text #1C293C
35+
* 两个主题独立调校，不机械互为反转
36+
* ============================================================ */
37+
:root {
38+
/* 品牌黄：仅用于 CTA、focus、激活态 */
39+
--vp-c-brand-1: #b78c00; /* AA 对比度下可读的黄（文本/链接用） */
40+
--vp-c-brand-2: #a37c00;
41+
--vp-c-brand-3: #fdc800; /* 纯品牌黄（按钮底色） */
42+
--vp-c-brand-soft: rgba(253, 200, 0, 0.14);
43+
--vp-c-brand-softer: rgba(253, 200, 0, 0.08);
44+
45+
/* 表面层：暖白而非纯白，呼应 impeccable 里的 #FBFBF9 */
46+
--vp-c-bg: #fbfbf9;
47+
--vp-c-bg-alt: #f4f3ef;
48+
--vp-c-bg-elv: #ffffff;
49+
--vp-c-bg-soft: #f4f3ef;
50+
51+
/* 文本层级 */
52+
--vp-c-text-1: #1c293c;
53+
--vp-c-text-2: #53607a;
54+
--vp-c-text-3: #8591a5;
55+
56+
/* 分割线 —— 工具感需要边界清晰，略强于默认 */
57+
--vp-c-divider: #e3e1da;
58+
--vp-c-gutter: #e3e1da;
59+
--vp-c-border: #d9d6cc;
60+
61+
/* 语义色 */
62+
--vp-c-success-1: #16a34a;
63+
--vp-c-success-soft: rgba(22, 163, 74, 0.12);
64+
--vp-c-warning-1: #d97706;
65+
--vp-c-warning-soft: rgba(217, 119, 6, 0.12);
66+
--vp-c-danger-1: #dc2626;
67+
--vp-c-danger-soft: rgba(220, 38, 38, 0.12);
68+
69+
/* 代码块：等宽文本天然带视觉标签 */
70+
--vp-code-bg: #f1efe7;
71+
--vp-code-color: #1c293c;
72+
--vp-code-block-bg: #f4f3ef;
73+
}
74+
75+
/* ============================================================
76+
* 深色主题 —— 独立调校，不是浅色反色
77+
* ============================================================ */
78+
.dark {
79+
--vp-c-brand-1: #fdc800; /* 深色背景上品牌黄可直接用作链接色 */
80+
--vp-c-brand-2: #ffd633;
81+
--vp-c-brand-3: #fdc800;
82+
--vp-c-brand-soft: rgba(253, 200, 0, 0.18);
83+
--vp-c-brand-softer: rgba(253, 200, 0, 0.10);
84+
85+
--vp-c-bg: #0f1218;
86+
--vp-c-bg-alt: #161a22;
87+
--vp-c-bg-elv: #1a1f28;
88+
--vp-c-bg-soft: #161a22;
89+
90+
--vp-c-text-1: #e8eaf0;
91+
--vp-c-text-2: #a6adbb;
92+
--vp-c-text-3: #6d7588;
93+
94+
--vp-c-divider: #232834;
95+
--vp-c-gutter: #232834;
96+
--vp-c-border: #2c3240;
97+
98+
--vp-code-bg: #161a22;
99+
--vp-code-color: #e8eaf0;
100+
--vp-code-block-bg: #12161d;
101+
}
102+
103+
/* ============================================================
104+
* Hero —— 克制：H1 上限 35px，副标 21px，不做大字 banner
105+
* 原覆盖的 48px 与设计文档"H1 = 35"冲突，收回
106+
* ============================================================ */
107+
.VPHero .name,
7108
.VPHero .text {
8-
font-size: 48px !important;
109+
font-size: var(--mp-text-2xl) !important;
110+
line-height: 1.2;
111+
letter-spacing: -0.01em;
112+
font-weight: 700;
113+
}
114+
115+
.VPHero .tagline {
116+
font-size: var(--mp-text-lg) !important;
117+
line-height: 1.5;
118+
color: var(--vp-c-text-2);
119+
font-weight: 400;
120+
}
121+
122+
/* Hero 中的 feature 卡片：阴影克制、边界清晰 */
123+
.VPFeature {
124+
border: 1px solid var(--vp-c-border);
125+
border-radius: 0.5rem;
126+
box-shadow: none;
127+
transition: border-color 0.15s ease, transform 0.15s ease;
128+
}
129+
130+
.VPFeature:hover {
131+
border-color: var(--vp-c-text-3);
132+
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
133+
transform: none;
134+
}
135+
136+
.VPFeature .title {
137+
font-size: var(--mp-text-base);
138+
font-weight: 600;
139+
color: var(--vp-c-text-1);
140+
}
141+
142+
.VPFeature .details {
143+
font-size: var(--mp-text-sm);
144+
color: var(--vp-c-text-2);
145+
line-height: 1.6;
146+
}
147+
148+
/* ============================================================
149+
* 按钮体系 —— default = 主黄，alt = ghost，不用半强调 outline
150+
* ============================================================ */
151+
.VPButton.brand {
152+
background-color: var(--vp-c-brand-3);
153+
border-color: var(--vp-c-brand-3);
154+
color: #1c293c; /* 黄底必须黑字才过 AA */
155+
font-weight: 600;
156+
}
157+
158+
.VPButton.brand:hover {
159+
background-color: #e6b500;
160+
border-color: #e6b500;
161+
color: #1c293c;
162+
}
163+
164+
.VPButton.alt {
165+
background-color: transparent;
166+
border-color: var(--vp-c-border);
167+
color: var(--vp-c-text-1);
168+
font-weight: 500;
169+
}
170+
171+
.VPButton.alt:hover {
172+
background-color: var(--vp-c-bg-alt);
173+
border-color: var(--vp-c-text-3);
174+
color: var(--vp-c-text-1);
175+
}
176+
177+
/* ============================================================
178+
* 圆角统一到 0.5rem
179+
* ============================================================ */
180+
:root {
181+
--vp-code-block-radius: 0.5rem;
182+
}
183+
184+
.VPButton,
185+
.custom-block,
186+
div[class*="language-"],
187+
.VPSidebarItem .link {
188+
border-radius: 0.5rem;
189+
}
190+
191+
/* ============================================================
192+
* 代码 / 等宽文本：给"能复制进程序 / 粘进阅读器 / 终端执行"的
193+
* 文本天然视觉标签
194+
* ============================================================ */
195+
:not(pre) > code {
196+
font-family: var(--vp-font-family-mono);
197+
font-size: 0.9em;
198+
padding: 1px 6px;
199+
border-radius: 4px;
200+
background-color: var(--vp-code-bg);
201+
border: 1px solid var(--vp-c-divider);
202+
color: var(--vp-c-text-1);
203+
}
204+
205+
div[class*="language-"] {
206+
background-color: var(--vp-code-block-bg);
207+
border: 1px solid var(--vp-c-divider);
208+
}
209+
210+
div[class*="language-"] pre code {
211+
font-family: var(--vp-font-family-mono);
212+
font-size: var(--mp-text-sm);
213+
line-height: 1.6;
214+
}
215+
216+
/* ============================================================
217+
* Focus ring —— 品牌黄承担"正在这里"
218+
* ============================================================ */
219+
*:focus-visible {
220+
outline: 2px solid var(--vp-c-brand-3);
221+
outline-offset: 2px;
222+
border-radius: 2px;
223+
}
224+
225+
/* ============================================================
226+
* 表格：工具感需要对齐、边界清晰，避免斑马纹喧宾夺主
227+
* ============================================================ */
228+
.vp-doc table {
229+
display: table;
230+
width: 100%;
231+
border-collapse: collapse;
232+
margin: 20px 0;
233+
font-size: var(--mp-text-sm);
234+
}
235+
236+
.vp-doc th,
237+
.vp-doc td {
238+
border: 1px solid var(--vp-c-divider);
239+
padding: 8px 12px;
240+
}
241+
242+
.vp-doc th {
243+
background-color: var(--vp-c-bg-alt);
244+
font-weight: 600;
245+
color: var(--vp-c-text-1);
246+
}
247+
248+
.vp-doc tr:nth-child(2n) {
249+
background-color: transparent; /* 去掉斑马纹 */
250+
}
251+
252+
/* ============================================================
253+
* 正文节奏：base 17px，标题层级清晰
254+
* ============================================================ */
255+
.vp-doc {
256+
font-size: var(--mp-text-base);
257+
line-height: 1.7;
258+
}
259+
260+
.vp-doc h1 {
261+
font-size: var(--mp-text-2xl);
262+
line-height: 1.25;
263+
letter-spacing: -0.01em;
264+
font-weight: 700;
265+
}
266+
267+
.vp-doc h2 {
268+
font-size: var(--mp-text-xl);
269+
line-height: 1.3;
270+
font-weight: 600;
271+
border-top: 1px solid var(--vp-c-divider);
272+
padding-top: 24px;
273+
margin-top: 48px;
274+
}
275+
276+
.vp-doc h3 {
277+
font-size: var(--mp-text-lg);
278+
line-height: 1.4;
279+
font-weight: 600;
280+
}
281+
282+
.vp-doc h4 {
283+
font-size: var(--mp-text-base);
284+
font-weight: 600;
285+
}
286+
287+
/* ============================================================
288+
* Custom block（tip / warning / danger）语义对齐
289+
* ============================================================ */
290+
.custom-block.tip {
291+
border-color: var(--vp-c-brand-3);
292+
background-color: var(--vp-c-brand-softer);
293+
}
294+
295+
.custom-block.warning {
296+
border-color: var(--vp-c-warning-1);
297+
background-color: var(--vp-c-warning-soft);
298+
}
299+
300+
.custom-block.danger {
301+
border-color: var(--vp-c-danger-1);
302+
background-color: var(--vp-c-danger-soft);
303+
}
304+
305+
/* ============================================================
306+
* 侧栏激活态：品牌黄标"正在这里"
307+
* ============================================================ */
308+
.VPSidebarItem.is-active > .item > .link > .text {
309+
color: var(--vp-c-brand-1);
310+
font-weight: 600;
311+
}
312+
313+
.dark .VPSidebarItem.is-active > .item > .link > .text {
314+
color: var(--vp-c-brand-3);
315+
}
316+
317+
/* ============================================================
318+
* 搜索 / 导航：阴影克制
319+
* ============================================================ */
320+
.VPNavBar {
321+
box-shadow: none;
322+
border-bottom: 1px solid var(--vp-c-divider);
323+
}
324+
325+
.DocSearch-Button {
326+
border-radius: 0.5rem;
327+
border: 1px solid var(--vp-c-border);
328+
box-shadow: none;
9329
}

0 commit comments

Comments
 (0)