@zmzai/theme 0.1.1 → 0.2.0

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.
Files changed (4) hide show
  1. package/README.md +5 -5
  2. package/package.json +2 -3
  3. package/src/tokens/fonts.css +16 -13
  4. package/src/tokens/theme.css +29 -30
package/README.md CHANGED
@@ -1,6 +1,6 @@
1
1
  # @zmzai/theme
2
2
 
3
- zmzai 全品牌设计系统 — Radix UI + framer-motion + Tailwind v4 + MiSans.
3
+ zmzai 全品牌设计系统 — Radix UI + framer-motion + Tailwind v4。v0.2.0 起为暖色杂志风（Warm paper / warm ink / seal-red，与 zmzai.cloud 主应用同源）；v0.1.x 黑白 Monochrome 已废弃。
4
4
 
5
5
  ## Quick Start
6
6
 
@@ -19,7 +19,7 @@ In your app's `globals.css`:
19
19
  ```css
20
20
  @import "tailwindcss";
21
21
  @import "@zmzai/theme/tokens"; /* Design tokens (@theme block) */
22
- @import "@zmzai/theme/fonts"; /* MiSans @font-face */
22
+ @import "@zmzai/theme/fonts"; /* Noto Serif SC + JetBrains Mono @font-face */
23
23
 
24
24
  /* Optional: per-site accent override */
25
25
  :root {
@@ -42,9 +42,9 @@ import { Button, Card, Logo, Wordmark } from "@zmzai/theme";
42
42
 
43
43
  ## Design Language
44
44
 
45
- - **Color**: 纯白底 + 纯黑字, neutral grays. 蓝色 `#2563EB` 只用于动态状态.
46
- - **Font**: SF Pro (英文) + MiSans (中文), SF Mono (等宽).
47
- - **Radius**: 8/12/16/20px + pill.
45
+ - **Color**: 暖纸张底 + 暖墨字 + 印章红 accent（oklch，Hallmark Study 锁定）.
46
+ - **Font**: Noto Serif SC 衬线正文（杂志感）+ JetBrains Mono 等宽.
47
+ - **Radius**: 锐利编辑风 2/2/4/6px + pill.
48
48
  - **Motion**: framer-motion, exponential ease-out `cubic-bezier(0.16,1,0.3,1)`.
49
49
 
50
50
  ## Components
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@zmzai/theme",
3
- "version": "0.1.1",
3
+ "version": "0.2.0",
4
4
  "private": false,
5
5
  "type": "module",
6
6
  "description": "zmzai 全品牌设计系统 — Radix UI + framer-motion + Tailwind v4 + MiSans",
@@ -86,6 +86,5 @@
86
86
  "tailwindcss": "^4.0.0",
87
87
  "typescript": "^5.9.0",
88
88
  "vite": "^5.4.0"
89
- },
90
- "packageManager": "pnpm@10.34.5+sha512.a4ee05f2f73658255bd6a89859c065a45c28a57daefae2c893a168ee2b73168c37b91e83e57ea67654ad03f03031746430e8bce38e362e042605fb8abc80192e"
89
+ }
91
90
  }
package/src/tokens/fonts.css CHANGED
@@ -1,41 +1,44 @@
1
1
  /*
2
- * @zmzai/theme — MiSans Font Faces
2
+ * @zmzai/theme — Font Faces（v0.2.0 暖色杂志风）
3
3
  *
4
- * 小米开源字体，免费商用（OFL 协议）。
5
- * 简体中文全子集，通过 jsDelivr CDN 加载 woff2。
4
+ * Noto Serif SC（衬线正文，杂志感）+ JetBrains Mono（等宽）。
5
+ * 均通过 jsDelivr CDN 加载 @fontsource 的 woff2（OFL 协议，免费商用）。
6
6
  * font-display: swap 保证加载期间用 fallback，加载完无缝切换。
7
7
  *
8
+ * 注意：简体中文子集较大，Noto Serif SC 仅含 chinese-simplified；
9
+ * 拉丁字符命中子集内的 latin 部分，无需额外声明。
10
+ *
8
11
  * Import in your app's globals.css:
9
12
  * @import "@zmzai/theme/fonts";
10
13
  */
11
14
 
12
15
  @font-face {
13
- font-family: 'MiSans';
14
- src: url('https://cdn.jsdelivr.net/gh/dsrkafuu/misans@main/raw/Normal/woff2/MiSans-Regular.woff2') format('woff2');
16
+ font-family: 'Noto Serif SC';
17
+ src: url('https://cdn.jsdelivr.net/npm/@fontsource/noto-serif-sc/files/noto-serif-sc-chinese-simplified-400-normal.woff2') format('woff2');
15
18
  font-weight: 400;
16
19
  font-style: normal;
17
20
  font-display: swap;
18
21
  }
19
22
 
20
23
  @font-face {
21
- font-family: 'MiSans';
22
- src: url('https://cdn.jsdelivr.net/gh/dsrkafuu/misans@main/raw/Normal/woff2/MiSans-Medium.woff2') format('woff2');
23
- font-weight: 500;
24
+ font-family: 'Noto Serif SC';
25
+ src: url('https://cdn.jsdelivr.net/npm/@fontsource/noto-serif-sc/files/noto-serif-sc-chinese-simplified-700-normal.woff2') format('woff2');
26
+ font-weight: 700;
24
27
  font-style: normal;
25
28
  font-display: swap;
26
29
  }
27
30
 
28
31
  @font-face {
29
- font-family: 'MiSans';
30
- src: url('https://cdn.jsdelivr.net/gh/dsrkafuu/misans@main/raw/Normal/woff2/MiSans-Semibold.woff2') format('woff2');
31
- font-weight: 600;
32
+ font-family: 'JetBrains Mono';
33
+ src: url('https://cdn.jsdelivr.net/npm/@fontsource/jetbrains-mono/files/jetbrains-mono-latin-400-normal.woff2') format('woff2');
34
+ font-weight: 400;
32
35
  font-style: normal;
33
36
  font-display: swap;
34
37
  }
35
38
 
36
39
  @font-face {
37
- font-family: 'MiSans';
38
- src: url('https://cdn.jsdelivr.net/gh/dsrkafuu/misans@main/raw/Normal/woff2/MiSans-Bold.woff2') format('woff2');
40
+ font-family: 'JetBrains Mono';
41
+ src: url('https://cdn.jsdelivr.net/npm/@fontsource/jetbrains-mono/files/jetbrains-mono-latin-700-normal.woff2') format('woff2');
39
42
  font-weight: 700;
40
43
  font-style: normal;
41
44
  font-display: swap;
package/src/tokens/theme.css CHANGED
@@ -6,27 +6,28 @@
6
6
  * @import "@zmzai/theme/tokens";
7
7
  * @import "@zmzai/theme/fonts";
8
8
  *
9
- * Override --color-accent per-site for Variants:
10
- * :root { --color-accent: #7C3AED; }
9
+ * v0.2.0 起为暖色杂志风（Warm paper, warm ink, seal-red accent），
10
+ * 与 zmzai.cloud 主应用（Hallmark Study）同源。v0.1.x 是黑白
11
+ * Monochrome 风，已废弃。
11
12
  */
12
13
 
13
14
  @theme {
14
15
  /* ===== Color =====
15
- 纯白底 + 纯黑字。灰阶用 neutral（不暖不冷）。
16
- 蓝色 accent 只用于动态状态（进行中/running/聚焦/审批）。 */
17
- --color-bg: #FFFFFF;
18
- --color-surface: #FAFAFA;
19
- --color-surface-2: #F5F5F5;
20
- --color-ink: #000000;
21
- --color-ink-2: #525252;
22
- --color-ink-3: #A3A3A3;
23
- --color-line: #E5E5E5;
24
- --color-line-strong: #171717;
25
- --color-accent: #2563EB;
26
- --color-accent-ink: #FFFFFF;
27
- --color-success: #16A34A;
28
- --color-danger: #DC2626;
29
- --color-warning: #CA8A04;
16
+ 暖纸张底 + 暖墨字 + 印章红 accent（Hallmark Study 锁定）。
17
+ accent 用于强调/链接/审批等，red 系有印章感。 */
18
+ --color-bg: oklch(0.95 0.012 85);
19
+ --color-surface: oklch(0.97 0.008 85);
20
+ --color-surface-2: oklch(0.92 0.014 80);
21
+ --color-ink: oklch(0.18 0.011 40);
22
+ --color-ink-2: oklch(0.47 0.013 55);
23
+ --color-ink-3: oklch(0.55 0.012 55);
24
+ --color-line: oklch(0.86 0.012 80);
25
+ --color-line-strong: oklch(0.18 0.011 40);
26
+ --color-accent: oklch(0.46 0.150 27);
27
+ --color-accent-ink: oklch(0.97 0.008 85);
28
+ --color-success: oklch(0.52 0.090 160);
29
+ --color-danger: oklch(0.42 0.155 27);
30
+ --color-warning: oklch(0.65 0.10 80);
30
31
 
31
32
  /* Dark surface — 仅用于代码块/preview，不是全局 dark mode */
32
33
  --color-dark-bg: #0A0A0A;
@@ -35,18 +36,17 @@
35
36
  --color-dark-line: #27272A;
36
37
 
37
38
  /* ===== Fonts =====
38
- 英文 SF Pro（系统自带零加载），中文 MiSans（开源加载）。
39
- 字体栈顺序让浏览器逐字符匹配：英文命中 SF Pro，中文跳到 MiSans。 */
40
- --font-sans: "MiSans", -apple-system, "SF Pro Display", "SF Pro Text",
41
- "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
42
- --font-mono: "MiSans", "SF Mono", "JetBrains Mono", ui-monospace,
43
- "SFMono-Regular", monospace;
39
+ 衬线正文字体（Noto Serif SC，杂志感）+ JetBrains Mono 等宽。 */
40
+ --font-sans: "Noto Serif SC", "Source Han Serif SC", "Songti SC", serif;
41
+ --font-serif: "Noto Serif SC", "Source Han Serif SC", "Songti SC", serif;
42
+ --font-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", monospace;
44
43
 
45
- /* ===== Radius ===== */
46
- --radius-sm: 8px;
47
- --radius: 12px;
48
- --radius-lg: 16px;
49
- --radius-xl: 20px;
44
+ /* ===== Radius =====
45
+ 锐利编辑风（sharp editorial）。 */
46
+ --radius-sm: 2px;
47
+ --radius: 2px;
48
+ --radius-lg: 4px;
49
+ --radius-xl: 6px;
50
50
  --radius-pill: 9999px;
51
51
 
52
52
  /* ===== Motion ===== */
@@ -60,8 +60,7 @@
60
60
  --color-muted: var(--color-ink-2);
61
61
  --color-rule: var(--color-ink);
62
62
  --color-surface-strong: var(--color-surface-2);
63
- --color-accent-strong: var(--color-ink);
64
- --font-serif: var(--font-sans);
63
+ --color-accent-strong: oklch(0.39 0.150 27);
65
64
  --animate-dur-fast: 150ms;
66
65
  --animate-dur-base: 250ms;
67
66
  --animate-dur-slow: 500ms;