@zmzai/theme 0.1.1 → 0.2.1

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 (10) hide show
  1. package/README.md +5 -5
  2. package/package.json +2 -3
  3. package/src/components/badge/Badge.tsx +1 -1
  4. package/src/components/button/button.styles.ts +2 -2
  5. package/src/components/card/card.styles.ts +1 -1
  6. package/src/components/input/input.styles.ts +2 -2
  7. package/src/components/select/Select.tsx +2 -2
  8. package/src/components/textarea/Textarea.tsx +2 -2
  9. package/src/tokens/fonts.css +16 -13
  10. 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.1",
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/components/badge/Badge.tsx CHANGED
@@ -5,7 +5,7 @@ import { cva } from "class-variance-authority";
5
5
  import { cn } from "../../utils/cn";
6
6
 
7
7
  export const badgeVariants = cva(
8
- "inline-flex items-center gap-1.5 rounded-full font-medium text-xs whitespace-nowrap",
8
+ "inline-flex items-center gap-1.5 rounded-sm font-medium text-xs whitespace-nowrap",
9
9
  {
10
10
  variants: {
11
11
  variant: {
package/src/components/button/button.styles.ts CHANGED
@@ -4,13 +4,13 @@ import { cva } from "class-variance-authority";
4
4
  * Button variant styles.
5
5
  *
6
6
  * Design:
7
- * - All variants use pill radius (rounded-full)
7
+ * - 锐角 2px（v0.2 暖纸风），hover 轻微缩放
8
8
  * - primary: black fill, white text, hover scale + shadow
9
9
  * - secondary: transparent, border, hover fill
10
10
  * - ghost: no border, subtle hover bg
11
11
  */
12
12
  export const buttonVariants = cva(
13
- "inline-flex cursor-pointer items-center justify-center gap-2 rounded-full font-semibold transition-colors transition-transform disabled:pointer-events-none disabled:opacity-40 select-none",
13
+ "inline-flex cursor-pointer items-center justify-center gap-2 rounded-sm font-semibold transition-colors transition-transform disabled:pointer-events-none disabled:opacity-40 select-none",
14
14
  {
15
15
  variants: {
16
16
  variant: {
package/src/components/card/card.styles.ts CHANGED
@@ -8,7 +8,7 @@ import { cva } from "class-variance-authority";
8
8
  * - interactive: hover lifts up + shadow + border darkens
9
9
  */
10
10
  export const cardVariants = cva(
11
- "bg-bg border rounded-xl transition-colors transition-transform duration-200",
11
+ "bg-bg border rounded-sm transition-colors transition-transform duration-200",
12
12
  {
13
13
  variants: {
14
14
  variant: {
package/src/components/input/input.styles.ts CHANGED
@@ -13,9 +13,9 @@ export const inputVariants = cva(
13
13
  variants: {
14
14
  variant: {
15
15
  default:
16
- "border border-line rounded-lg px-4 py-2.5 text-sm focus:border-ink",
16
+ "border border-line rounded-sm px-4 py-2.5 text-sm focus:border-ink",
17
17
  brutal:
18
- "border-2 border-ink rounded-xl px-4 py-3 text-sm shadow-[4px_4px_0_var(--color-ink)] focus:shadow-[6px_6px_0_var(--color-accent)] focus:border-accent focus:-translate-x-px focus:-translate-y-px",
18
+ "border-2 border-ink rounded-sm px-4 py-3 text-sm",
19
19
  },
20
20
  size: {
21
21
  sm: "text-xs py-2 px-3",
package/src/components/select/Select.tsx CHANGED
@@ -18,7 +18,7 @@ export function SelectTrigger({
18
18
  return (
19
19
  <SelectPrimitive.Trigger
20
20
  className={cn(
21
- "inline-flex h-9 items-center justify-between gap-2 rounded-lg border border-line bg-bg px-3 py-2 text-sm font-medium text-ink outline-none transition-colors",
21
+ "inline-flex h-9 items-center justify-between gap-2 rounded-sm border border-line bg-bg px-3 py-2 text-sm font-medium text-ink outline-none transition-colors",
22
22
  "hover:border-ink/40 focus:border-ink data-[placeholder]:text-ink-3",
23
23
  className
24
24
  )}
@@ -48,7 +48,7 @@ export function SelectContent({
48
48
  position={position}
49
49
  sideOffset={4}
50
50
  className={cn(
51
- "z-50 min-w-[8rem] overflow-hidden rounded-lg border border-line bg-bg p-1 shadow-lg",
51
+ "z-50 min-w-[8rem] overflow-hidden rounded-sm border border-line bg-bg p-1 shadow-lg",
52
52
  "data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95",
53
53
  "data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95",
54
54
  className
package/src/components/textarea/Textarea.tsx CHANGED
@@ -25,9 +25,9 @@ export const Textarea = forwardRef<HTMLTextAreaElement, TextareaProps>(
25
25
  className={cn(
26
26
  "w-full resize-none bg-bg font-sans text-ink placeholder:text-ink-3 outline-none transition-all",
27
27
  variant === "default" &&
28
- "border border-line rounded-lg px-4 py-2.5 text-sm focus:border-ink",
28
+ "border border-line rounded-sm px-4 py-2.5 text-sm focus:border-ink",
29
29
  variant === "brutal" &&
30
- "border-2 border-ink rounded-xl px-4 py-3 text-sm shadow-[4px_4px_0_var(--color-ink)] focus:shadow-[6px_6px_0_var(--color-accent)] focus:border-accent focus:-translate-x-px focus:-translate-y-px",
30
+ "border-2 border-ink rounded-sm px-4 py-3 text-sm",
31
31
  className
32
32
  )}
33
33
  {...props}
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;