@zmzai/theme 0.1.0

package/src/tokens/theme.css

@@ -0,0 +1,120 @@
+/*
+ * @zmzai/theme — Design Tokens
+ *
+ * Tailwind v4 @theme block. Import in your app's globals.css:
+ *   @import "tailwindcss";
+ *   @import "@zmzai/theme/tokens";
+ *   @import "@zmzai/theme/fonts";
+ *
+ * Override --color-accent per-site for Variants:
+ *   :root { --color-accent: #7C3AED; }
+ */
+
+@theme {
+  /* ===== Color =====
+     纯白底 + 纯黑字。灰阶用 neutral（不暖不冷）。
+     蓝色 accent 只用于动态状态（进行中/running/聚焦/审批）。 */
+  --color-bg:            #FFFFFF;
+  --color-surface:       #FAFAFA;
+  --color-surface-2:     #F5F5F5;
+  --color-ink:           #000000;
+  --color-ink-2:         #525252;
+  --color-ink-3:         #A3A3A3;
+  --color-line:          #E5E5E5;
+  --color-line-strong:   #171717;
+  --color-accent:        #2563EB;
+  --color-accent-ink:    #FFFFFF;
+  --color-success:       #16A34A;
+  --color-danger:        #DC2626;
+  --color-warning:       #CA8A04;
+
+  /* Dark surface — 仅用于代码块/preview，不是全局 dark mode */
+  --color-dark-bg:       #0A0A0A;
+  --color-dark-surface:  #171717;
+  --color-dark-ink:      #FAFAFA;
+  --color-dark-line:     #27272A;
+
+  /* ===== Fonts =====
+     英文 SF Pro（系统自带零加载），中文 MiSans（开源加载）。
+     字体栈顺序让浏览器逐字符匹配：英文命中 SF Pro，中文跳到 MiSans。 */
+  --font-sans: "MiSans", -apple-system, "SF Pro Display", "SF Pro Text",
+               "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
+  --font-mono: "MiSans", "SF Mono", "JetBrains Mono", ui-monospace,
+               "SFMono-Regular", monospace;
+
+  /* ===== Radius ===== */
+  --radius-sm:    8px;
+  --radius:       12px;
+  --radius-lg:    16px;
+  --radius-xl:    20px;
+  --radius-pill:  9999px;
+
+  /* ===== Motion ===== */
+  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
+  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
+
+  /* ===== Backward-compat aliases =====
+     Maps old v1 token names → new v2 values.
+     Lets zmzai-agent's 267 existing CSS classes work without modification. */
+  --color-paper:         var(--color-bg);
+  --color-muted:         var(--color-ink-2);
+  --color-rule:          var(--color-ink);
+  --color-surface-strong: var(--color-surface-2);
+  --color-accent-strong: var(--color-ink);
+  --font-serif:          var(--font-sans);
+  --animate-dur-fast:    150ms;
+  --animate-dur-base:    250ms;
+  --animate-dur-slow:    500ms;
+  --radius-card:         var(--radius);
+  --radius-input:        var(--radius-sm);
+}
+
+:root {
+  color-scheme: light;
+}
+
+@layer base {
+  * {
+    box-sizing: border-box;
+  }
+
+  html {
+    scroll-behavior: smooth;
+  }
+
+  body {
+    margin: 0;
+    background: var(--color-bg);
+    color: var(--color-ink);
+    font-family: var(--font-sans);
+    font-size: 1rem;
+    line-height: 1.65;
+    text-rendering: optimizeLegibility;
+    -webkit-font-smoothing: antialiased;
+  }
+
+  a {
+    color: inherit;
+    text-decoration: none;
+  }
+
+  ::selection {
+    background: var(--color-ink);
+    color: #fff;
+  }
+
+  :focus-visible {
+    outline: 2px solid var(--color-accent);
+    outline-offset: 2px;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  *,
+  *::before,
+  *::after {
+    animation-duration: 0.01ms !important;
+    transition-duration: 0.01ms !important;
+    scroll-behavior: auto !important;
+  }
+}

package/src/utils/cn.ts

@@ -0,0 +1,13 @@
+import { clsx, type ClassValue } from "clsx";
+import { twMerge } from "tailwind-merge";
+
+/**
+ * Merge Tailwind classes with conditional logic.
+ * Uses clsx for conditionals + tailwind-merge for dedup.
+ *
+ * @example
+ * cn("px-4 py-2", isActive && "bg-ink text-white", className)
+ */
+export function cn(...inputs: ClassValue[]): string {
+  return twMerge(clsx(inputs));
+}

package/src/utils/index.ts

@@ -0,0 +1,2 @@
+export { cn } from "./cn";
+export * as motion from "./motion";

package/src/utils/motion.ts

@@ -0,0 +1,47 @@
+/**
+ * Shared framer-motion transition presets.
+ */
+
+import type { Variants, Transition } from "framer-motion";
+
+export const easeOut: number[] = [0.16, 1, 0.3, 1];
+export const easeSpring: number[] = [0.34, 1.56, 0.64, 1];
+
+/** Hover: scale up slightly */
+export const hoverScale = {
+  scale: 1.03,
+  transition: { duration: 0.15, ease: easeOut },
+};
+
+/** Hover: lift up slightly */
+export const hoverLift = {
+  y: -2,
+  transition: { duration: 0.2, ease: easeOut },
+};
+
+/** Entrance: fade in + slide up */
+export const fadeInUp: Variants = {
+  hidden: { opacity: 0, y: 10 },
+  visible: {
+    opacity: 1,
+    y: 0,
+    transition: { duration: 0.4, ease: easeOut },
+  },
+};
+
+/** Entrance: fade in + scale from 0.95 */
+export const fadeInScale: Variants = {
+  hidden: { opacity: 0, scale: 0.95 },
+  visible: {
+    opacity: 1,
+    scale: 1,
+    transition: { duration: 0.3, ease: easeSpring },
+  },
+};
+
+/** Spring transition for dialogs / popovers */
+export const springTransition: Transition = {
+  type: "spring",
+  stiffness: 400,
+  damping: 30,
+};

package/src/vite-env.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="vite/client" />
+
+declare module "*.png" {
+  const src: string;
+  export default src;
+}