@zmzai/theme 0.9.4 → 0.9.6
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/package.json
CHANGED
|
@@ -13,6 +13,8 @@
|
|
|
13
13
|
* · page 一律 text-2xl + 内联图标，不再区分公开页与控制台
|
|
14
14
|
* · 图标取 currentColor，不引入新色；hero 徽章用 accent 载体（墨底白图）
|
|
15
15
|
* · 描述统一 text-sm text-ink-2 —— ink-3 只有 3.69:1，副文案不用它
|
|
16
|
+
*
|
|
17
|
+
* v0.9.5 追加 centered（居中 Hero，/quill 首页用）。
|
|
16
18
|
*/
|
|
17
19
|
|
|
18
20
|
import type { ReactNode } from "react";
|
|
@@ -31,6 +33,8 @@ export interface PageHeaderProps {
|
|
|
31
33
|
actions?: ReactNode;
|
|
32
34
|
/** hero = 落地页（44px 墨底徽章 + text-4xl）；page = 其余全部（内联图标 + text-2xl） */
|
|
33
35
|
variant?: "page" | "hero";
|
|
36
|
+
/** 居中构图，仅 hero 生效（/quill 首页这类居中 Hero） */
|
|
37
|
+
centered?: boolean;
|
|
34
38
|
/** 追加到根元素 */
|
|
35
39
|
className?: string;
|
|
36
40
|
/** 追加到 h1（详情页标题过长时用 truncate） */
|
|
@@ -44,14 +48,18 @@ export function PageHeader({
|
|
|
44
48
|
description,
|
|
45
49
|
actions,
|
|
46
50
|
variant = "page",
|
|
51
|
+
centered = false,
|
|
47
52
|
className = "",
|
|
48
53
|
titleClassName = "",
|
|
49
54
|
}: PageHeaderProps) {
|
|
50
55
|
if (variant === "hero") {
|
|
56
|
+
const align = centered ? "items-center text-center" : "";
|
|
51
57
|
return (
|
|
52
|
-
<header className={`flex flex-col ${className}`}>
|
|
58
|
+
<header className={`flex flex-col ${align} ${className}`}>
|
|
53
59
|
{icon ? (
|
|
54
|
-
<span
|
|
60
|
+
<span
|
|
61
|
+
className={`mb-4 grid size-11 shrink-0 place-items-center rounded-lg bg-accent text-accent-ink ${centered ? "mx-auto" : ""}`}
|
|
62
|
+
>
|
|
55
63
|
<Icon name={icon} size={22} strokeWidth={1.25} />
|
|
56
64
|
</span>
|
|
57
65
|
) : null}
|
|
@@ -64,9 +72,19 @@ export function PageHeader({
|
|
|
64
72
|
{title}
|
|
65
73
|
</h1>
|
|
66
74
|
{description ? (
|
|
67
|
-
<p
|
|
75
|
+
<p
|
|
76
|
+
className={`mt-4 max-w-2xl text-lg leading-8 text-ink-2 ${centered ? "mx-auto" : ""}`}
|
|
77
|
+
>
|
|
78
|
+
{description}
|
|
79
|
+
</p>
|
|
80
|
+
) : null}
|
|
81
|
+
{actions ? (
|
|
82
|
+
<div
|
|
83
|
+
className={`mt-7 flex flex-wrap items-center gap-4 ${centered ? "justify-center" : ""}`}
|
|
84
|
+
>
|
|
85
|
+
{actions}
|
|
86
|
+
</div>
|
|
68
87
|
) : null}
|
|
69
|
-
{actions ? <div className="mt-7 flex flex-wrap items-center gap-4">{actions}</div> : null}
|
|
70
88
|
</header>
|
|
71
89
|
);
|
|
72
90
|
}
|
|
@@ -79,7 +97,7 @@ export function PageHeader({
|
|
|
79
97
|
{eyebrow}
|
|
80
98
|
</small>
|
|
81
99
|
) : null}
|
|
82
|
-
<div className="flex items-center gap-2">
|
|
100
|
+
<div className="flex min-w-0 items-center gap-2">
|
|
83
101
|
{icon ? <Icon name={icon} size={20} className="shrink-0 text-ink" /> : null}
|
|
84
102
|
<h1
|
|
85
103
|
className={`font-serif text-2xl font-semibold tracking-tight text-ink ${titleClassName}`}
|
package/src/tokens/theme.css
CHANGED
|
@@ -23,6 +23,8 @@
|
|
|
23
23
|
* v0.9.2 品红点睛色阶（墨底荧光）——spot 四层 + ink，仅深色载体
|
|
24
24
|
* v0.9.3 底色纯白化——暖纸退役，卡片层次交给 surface 灰阶与边框
|
|
25
25
|
* v0.9.4 PageHeader 统一组件——内页 text-2xl 内联图标、落地页 44px 墨底徽章
|
|
26
|
+
* v0.9.5 PageHeader 支持 centered（居中 Hero）；Icon 支持 strokeWidth
|
|
27
|
+
* v0.9.6 标题行补 min-w-0，truncate 在详情页长标题下才生效
|
|
26
28
|
*/
|
|
27
29
|
|
|
28
30
|
@theme {
|