@ouraihub/tokens 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 OurAI Hub
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,374 @@
+# @ouraihub/tokens
+
+> 设计令牌和 Tailwind CSS 预设
+
+[![npm version](https://img.shields.io/npm/v/@ouraihub/tokens.svg)](https://www.npmjs.com/package/@ouraihub/tokens)
+[![License](https://img.shields.io/badge/license-MIT-green.svg)](LICENSE)
+
+## 简介
+
+`@ouraihub/tokens` 提供统一的设计令牌（颜色、间距、字体、阴影等）和 Tailwind CSS 预设，确保所有项目使用一致的设计系统。
+
+### 特性
+
+- 🎨 **统一设计** - 所有项目共享相同的设计令牌
+- 🌗 **暗色主题** - 内置 light/dark 主题支持
+- 🔧 **Tailwind 集成** - 开箱即用的 Tailwind 预设
+- 📦 **零依赖** - 纯 CSS 变量，无运行时依赖
+- ⚡ **轻量级** - < 5KB (gzipped)
+- 🎯 **类型安全** - TypeScript 类型定义
+
+## 安装
+
+```bash
+# npm
+npm install @ouraihub/tokens
+
+# pnpm
+pnpm add @ouraihub/tokens
+
+# yarn
+yarn add @ouraihub/tokens
+```
+
+## 快速开始
+
+### 使用 CSS 变量
+
+```css
+/* 导入设计令牌 */
+@import '@ouraihub/tokens/css';
+
+/* 使用 CSS 变量 */
+.button {
+  background: var(--ui-primary);
+  color: var(--ui-text);
+  padding: var(--ui-spacing-md);
+  border-radius: var(--ui-radius-md);
+  box-shadow: var(--ui-shadow-sm);
+}
+```
+
+### 使用 Tailwind 预设
+
+```javascript
+// tailwind.config.js
+import preset from '@ouraihub/tokens/preset';
+
+export default {
+  presets: [preset],
+  content: [
+    './src/**/*.{html,js,ts,jsx,tsx,astro}',
+  ],
+};
+```
+
+使用 Tailwind 工具类：
+
+```html
+<button class="bg-ui-primary text-ui-text px-ui-md py-ui-sm rounded-ui-md shadow-ui-sm">
+  点击我
+</button>
+```
+
+## 设计令牌
+
+### 颜色系统
+
+```css
+:root {
+  /* 文本颜色 */
+  --ui-text: #1a1a1a;
+  --ui-text-secondary: #666666;
+  --ui-text-muted: #999999;
+  
+  /* 背景颜色 */
+  --ui-background: #ffffff;
+  --ui-background-secondary: #f5f5f5;
+  --ui-background-tertiary: #e5e5e5;
+  
+  /* 边框颜色 */
+  --ui-border: #e0e0e0;
+  --ui-border-hover: #cccccc;
+  
+  /* 品牌颜色 */
+  --ui-primary: #2937f0;
+  --ui-primary-hover: #1e28c0;
+  
+  /* 语义颜色 */
+  --ui-success: #10b981;
+  --ui-warning: #f59e0b;
+  --ui-error: #ef4444;
+  --ui-info: #3b82f6;
+}
+
+[data-theme="dark"] {
+  --ui-text: #e5e5e5;
+  --ui-text-secondary: #a3a3a3;
+  --ui-text-muted: #737373;
+  
+  --ui-background: #1a1a1a;
+  --ui-background-secondary: #262626;
+  --ui-background-tertiary: #404040;
+  
+  --ui-border: #404040;
+  --ui-border-hover: #525252;
+  
+  --ui-primary: #4f5ff5;
+  --ui-primary-hover: #6b7aff;
+}
+```
+
+### 间距系统
+
+```css
+:root {
+  --ui-spacing-xs: 4px;
+  --ui-spacing-sm: 8px;
+  --ui-spacing-md: 16px;
+  --ui-spacing-lg: 24px;
+  --ui-spacing-xl: 32px;
+  --ui-spacing-2xl: 48px;
+  --ui-spacing-3xl: 64px;
+}
+```
+
+### 字体系统
+
+```css
+:root {
+  /* 字体族 */
+  --ui-font-sans: system-ui, -apple-system, sans-serif;
+  --ui-font-mono: 'Fira Code', 'Consolas', monospace;
+  
+  /* 字体大小 */
+  --ui-text-xs: 0.75rem;    /* 12px */
+  --ui-text-sm: 0.875rem;   /* 14px */
+  --ui-text-base: 1rem;     /* 16px */
+  --ui-text-lg: 1.125rem;   /* 18px */
+  --ui-text-xl: 1.25rem;    /* 20px */
+  --ui-text-2xl: 1.5rem;    /* 24px */
+  --ui-text-3xl: 1.875rem;  /* 30px */
+  --ui-text-4xl: 2.25rem;   /* 36px */
+  
+  /* 字重 */
+  --ui-font-normal: 400;
+  --ui-font-medium: 500;
+  --ui-font-semibold: 600;
+  --ui-font-bold: 700;
+  
+  /* 行高 */
+  --ui-leading-tight: 1.25;
+  --ui-leading-normal: 1.5;
+  --ui-leading-relaxed: 1.75;
+}
+```
+
+### 圆角系统
+
+```css
+:root {
+  --ui-radius-sm: 4px;
+  --ui-radius-md: 6px;
+  --ui-radius-lg: 8px;
+  --ui-radius-xl: 12px;
+  --ui-radius-2xl: 16px;
+  --ui-radius-full: 9999px;
+}
+```
+
+### 阴影系统
+
+```css
+:root {
+  --ui-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
+  --ui-shadow-md: 0 4px 6px rgba(0, 0, 0, 0.07);
+  --ui-shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);
+  --ui-shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.15);
+}
+
+[data-theme="dark"] {
+  --ui-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
+  --ui-shadow-md: 0 4px 6px rgba(0, 0, 0, 0.4);
+  --ui-shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.5);
+  --ui-shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.6);
+}
+```
+
+## Tailwind 预设
+
+预设包含所有设计令牌的 Tailwind 工具类：
+
+### 颜色工具类
+
+```html
+<!-- 文本颜色 -->
+<p class="text-ui-text">主要文本</p>
+<p class="text-ui-text-secondary">次要文本</p>
+<p class="text-ui-text-muted">弱化文本</p>
+
+<!-- 背景颜色 -->
+<div class="bg-ui-background">主背景</div>
+<div class="bg-ui-background-secondary">次背景</div>
+
+<!-- 品牌颜色 -->
+<button class="bg-ui-primary hover:bg-ui-primary-hover">按钮</button>
+
+<!-- 语义颜色 -->
+<div class="text-ui-success">成功</div>
+<div class="text-ui-error">错误</div>
+```
+
+### 间距工具类
+
+```html
+<!-- Padding -->
+<div class="p-ui-md">16px padding</div>
+<div class="px-ui-lg py-ui-sm">24px 水平, 8px 垂直</div>
+
+<!-- Margin -->
+<div class="m-ui-xl">32px margin</div>
+<div class="mt-ui-2xl mb-ui-lg">48px 上, 24px 下</div>
+
+<!-- Gap -->
+<div class="flex gap-ui-md">16px gap</div>
+```
+
+### 圆角工具类
+
+```html
+<div class="rounded-ui-sm">4px 圆角</div>
+<div class="rounded-ui-md">6px 圆角</div>
+<div class="rounded-ui-lg">8px 圆角</div>
+<button class="rounded-ui-full">完全圆角</button>
+```
+
+### 阴影工具类
+
+```html
+<div class="shadow-ui-sm">小阴影</div>
+<div class="shadow-ui-md">中阴影</div>
+<div class="shadow-ui-lg">大阴影</div>
+```
+
+## TypeScript 支持
+
+```typescript
+import { tokens } from '@ouraihub/tokens';
+
+// 访问设计令牌
+console.log(tokens.colors.primary);
+console.log(tokens.spacing.md);
+console.log(tokens.radius.md);
+```
+
+类型定义：
+
+```typescript
+interface DesignTokens {
+  colors: {
+    text: string;
+    textSecondary: string;
+    background: string;
+    primary: string;
+    // ...
+  };
+  spacing: {
+    xs: string;
+    sm: string;
+    md: string;
+    // ...
+  };
+  radius: {
+    sm: string;
+    md: string;
+    lg: string;
+    // ...
+  };
+  // ...
+}
+```
+
+## 自定义主题
+
+### 覆盖 CSS 变量
+
+```css
+/* 自定义品牌颜色 */
+:root {
+  --ui-primary: #ff6b6b;
+  --ui-primary-hover: #ff5252;
+}
+
+/* 自定义暗色主题 */
+[data-theme="dark"] {
+  --ui-background: #0a0a0a;
+  --ui-text: #f0f0f0;
+}
+```
+
+### 扩展 Tailwind 预设
+
+```javascript
+// tailwind.config.js
+import preset from '@ouraihub/tokens/preset';
+
+export default {
+  presets: [preset],
+  theme: {
+    extend: {
+      colors: {
+        brand: '#ff6b6b',
+      },
+    },
+  },
+};
+```
+
+## 使用场景
+
+### Hugo 主题
+
+```html
+<!-- layouts/_default/baseof.html -->
+<head>
+  <link rel="stylesheet" href="/css/tokens.css">
+</head>
+
+<body data-theme="light">
+  <div class="bg-ui-background text-ui-text">
+    <!-- 内容 -->
+  </div>
+</body>
+```
+
+### Astro 项目
+
+```astro
+---
+// src/layouts/Layout.astro
+import '@ouraihub/tokens/css';
+---
+
+<html data-theme="light">
+  <body class="bg-ui-background text-ui-text">
+    <slot />
+  </body>
+</html>
+```
+
+## 相关包
+
+- [@ouraihub/core](../core) - 核心逻辑层
+- [@ouraihub/hugo](../hugo) - Hugo 组件包装
+- [@ouraihub/utils](../utils) - 工具函数库
+
+## 文档
+
+- [完整文档](../../docs/README.md)
+- [设计系统](../../docs/DESIGN.md)
+- [架构决策](../../docs/decisions/003-css-variables-over-css-in-js.md)
+
+## 许可证
+
+MIT

package/package.json

@@ -0,0 +1,34 @@
+{
+  "name": "@ouraihub/tokens",
+  "version": "0.1.0",
+  "description": "Design tokens and Tailwind CSS preset for @ouraihub/ui-library",
+  "type": "module",
+  "main": "./src/index.js",
+  "exports": {
+    ".": "./src/index.js",
+    "./preset": "./src/preset.js",
+    "./css": "./src/tokens.css"
+  },
+  "files": [
+    "src"
+  ],
+  "peerDependencies": {
+    "tailwindcss": "^4.0.0"
+  },
+  "keywords": [
+    "design-tokens",
+    "tailwind",
+    "css-variables",
+    "theme"
+  ],
+  "author": "OurAI Hub",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/ouraihub/ui-library.git",
+    "directory": "packages/tokens"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}

package/src/animations.css

@@ -0,0 +1,131 @@
+/* ============================================================================
+   动画令牌 - 动画和过渡效果定义
+   ============================================================================ */
+
+/* 动画时长变量 */
+:root {
+  --ui-duration-fast: 150ms;
+  --ui-duration-normal: 300ms;
+  --ui-duration-slow: 500ms;
+}
+
+/* 缓动函数变量 */
+:root {
+  --ui-easing-default: cubic-bezier(0.4, 0, 0.2, 1);
+  --ui-easing-in: cubic-bezier(0.4, 0, 1, 1);
+  --ui-easing-out: cubic-bezier(0, 0, 0.2, 1);
+  --ui-easing-in-out: cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+/* ============================================================================
+   @keyframes 动画定义
+   ============================================================================ */
+
+/* 淡入动画 */
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+/* 淡出动画 */
+@keyframes fadeOut {
+  from {
+    opacity: 1;
+  }
+  to {
+    opacity: 0;
+  }
+}
+
+/* 从下滑入 */
+@keyframes slideInUp {
+  from {
+    opacity: 0;
+    transform: translateY(16px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+/* 从上滑入 */
+@keyframes slideInDown {
+  from {
+    opacity: 0;
+    transform: translateY(-16px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+/* 从左滑入 */
+@keyframes slideInLeft {
+  from {
+    opacity: 0;
+    transform: translateX(-16px);
+  }
+  to {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+
+/* 从右滑入 */
+@keyframes slideInRight {
+  from {
+    opacity: 0;
+    transform: translateX(16px);
+  }
+  to {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+
+/* 缩放进入 */
+@keyframes scaleIn {
+  from {
+    opacity: 0;
+    transform: scale(0.95);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+
+/* 旋转动画（用于 loading） */
+@keyframes spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+/* ============================================================================
+   动画工具类
+   ============================================================================ */
+
+/* 淡入动画类 */
+.animate-fade-in {
+  animation: fadeIn var(--ui-duration-normal) var(--ui-easing-default) forwards;
+}
+
+/* 从下滑入动画类 */
+.animate-slide-in-up {
+  animation: slideInUp var(--ui-duration-normal) var(--ui-easing-default) forwards;
+}
+
+/* 旋转加载动画类 */
+.animate-spin {
+  animation: spin var(--ui-duration-slow) linear infinite;
+}

package/src/index.css

@@ -0,0 +1,7 @@
+/* ============================================================================
+   统一导入 - 所有设计令牌和工具类
+   ============================================================================ */
+
+@import './tokens.css';
+@import './animations.css';
+@import './utilities.css';

package/src/index.js

@@ -0,0 +1,10 @@
+/**
+ * @ouraihub/tokens - 统一导出
+ * 
+ * 导出 Tailwind CSS 预设和 CSS 文件路径
+ */
+
+import preset from './preset.js';
+
+export { preset };
+export default preset;

package/src/preset.js

@@ -0,0 +1,158 @@
+/**
+ * Tailwind CSS Preset
+ * 
+ * 集成所有设计令牌到 Tailwind CSS 配置中
+ * 使用 CSS 变量实现主题切换（light/dark）
+ * 
+ * 使用方式：
+ * export default {
+ *   presets: [require('@ouraihub/tokens/preset')],
+ *   content: ['./src/**\/*.{html,js,ts,jsx,tsx}'],
+ * }
+ */
+
+export default {
+  theme: {
+    extend: {
+      /* ====================================================================
+         Colors - 使用 CSS 变量实现主题切换
+         ==================================================================== */
+      colors: {
+        // Primary
+        primary: 'var(--ui-primary)',
+        'primary-light': 'var(--ui-primary-light)',
+        'primary-dark': 'var(--ui-primary-dark)',
+
+        // Secondary
+        secondary: 'var(--ui-secondary)',
+        'secondary-light': 'var(--ui-secondary-light)',
+        'secondary-dark': 'var(--ui-secondary-dark)',
+
+        // Accent
+        accent: 'var(--ui-accent)',
+        'accent-light': 'var(--ui-accent-light)',
+        'accent-dark': 'var(--ui-accent-dark)',
+
+        // Neutral
+        background: 'var(--ui-background)',
+        surface: 'var(--ui-surface)',
+        border: 'var(--ui-border)',
+
+        // Text
+        text: 'var(--ui-text)',
+        'text-secondary': 'var(--ui-text-secondary)',
+        'text-muted': 'var(--ui-text-muted)',
+
+        // Semantic
+        success: 'var(--ui-success)',
+        'success-light': 'var(--ui-success-light)',
+        warning: 'var(--ui-warning)',
+        'warning-light': 'var(--ui-warning-light)',
+        error: 'var(--ui-error)',
+        'error-light': 'var(--ui-error-light)',
+        info: 'var(--ui-info)',
+        'info-light': 'var(--ui-info-light)',
+      },
+
+      /* ====================================================================
+         Spacing - 4px Grid System
+         ==================================================================== */
+      spacing: {
+        0: 'var(--ui-space-0)',
+        1: 'var(--ui-space-1)',
+        2: 'var(--ui-space-2)',
+        3: 'var(--ui-space-3)',
+        4: 'var(--ui-space-4)',
+        5: 'var(--ui-space-5)',
+        6: 'var(--ui-space-6)',
+        8: 'var(--ui-space-8)',
+        10: 'var(--ui-space-10)',
+        12: 'var(--ui-space-12)',
+        16: 'var(--ui-space-16)',
+        20: 'var(--ui-space-20)',
+        24: 'var(--ui-space-24)',
+        32: 'var(--ui-space-32)',
+        40: 'var(--ui-space-40)',
+        48: 'var(--ui-space-48)',
+        64: 'var(--ui-space-64)',
+      },
+
+      /* ====================================================================
+         Font Sizes
+         ==================================================================== */
+      fontSize: {
+        xs: 'var(--ui-text-xs)',
+        sm: 'var(--ui-text-sm)',
+        base: 'var(--ui-text-base)',
+        lg: 'var(--ui-text-lg)',
+        xl: 'var(--ui-text-xl)',
+        '2xl': 'var(--ui-text-2xl)',
+        '3xl': 'var(--ui-text-3xl)',
+        '4xl': 'var(--ui-text-4xl)',
+        '5xl': 'var(--ui-text-5xl)',
+      },
+
+      /* ====================================================================
+         Font Weights
+         ==================================================================== */
+      fontWeight: {
+        normal: 'var(--ui-font-weight-normal)',
+        medium: 'var(--ui-font-weight-medium)',
+        semibold: 'var(--ui-font-weight-semibold)',
+        bold: 'var(--ui-font-weight-bold)',
+      },
+
+      /* ====================================================================
+         Border Radius
+         ==================================================================== */
+      borderRadius: {
+        sm: 'var(--ui-radius-sm)',
+        md: 'var(--ui-radius-md)',
+        lg: 'var(--ui-radius-lg)',
+        xl: 'var(--ui-radius-xl)',
+        full: 'var(--ui-radius-full)',
+      },
+
+      /* ====================================================================
+         Box Shadows
+         ==================================================================== */
+      boxShadow: {
+        sm: 'var(--ui-shadow-sm)',
+        md: 'var(--ui-shadow-md)',
+        lg: 'var(--ui-shadow-lg)',
+        xl: 'var(--ui-shadow-xl)',
+      },
+
+      /* ====================================================================
+         Font Families
+         ==================================================================== */
+      fontFamily: {
+        sans: 'var(--ui-font-sans)',
+        mono: 'var(--ui-font-mono)',
+      },
+
+      /* ====================================================================
+         Transition Duration
+         ==================================================================== */
+      transitionDuration: {
+        fast: 'var(--ui-transition-fast)',
+        base: 'var(--ui-transition-base)',
+        slow: 'var(--ui-transition-slow)',
+      },
+
+      /* ====================================================================
+         Line Height
+         ==================================================================== */
+      lineHeight: {
+        tight: 'var(--ui-line-height-tight)',
+        normal: 'var(--ui-line-height-normal)',
+        relaxed: 'var(--ui-line-height-relaxed)',
+      },
+    },
+  },
+
+  /* ======================================================================
+     Plugins - 预留位置，可在此添加自定义插件
+     ====================================================================== */
+  plugins: [],
+};

package/src/tokens.css

@@ -0,0 +1,183 @@
+/* ============================================================================
+   Design Tokens - CSS Custom Properties
+   ============================================================================ */
+
+/* Light Theme (Default) */
+:root {
+  /* ========================================================================
+     Color System - Light Theme
+     ======================================================================== */
+  
+  /* Primary Colors */
+  --ui-primary: hsl(221, 83%, 53%);
+  --ui-primary-light: hsl(221, 83%, 97%);
+  --ui-primary-dark: hsl(221, 83%, 20%);
+  
+  /* Secondary Colors */
+  --ui-secondary: hsl(160, 84%, 39%);
+  --ui-secondary-light: hsl(160, 84%, 97%);
+  --ui-secondary-dark: hsl(160, 84%, 20%);
+  
+  /* Accent Colors */
+  --ui-accent: hsl(262, 80%, 50%);
+  --ui-accent-light: hsl(262, 80%, 97%);
+  --ui-accent-dark: hsl(262, 80%, 20%);
+  
+  /* Neutral Colors */
+  --ui-background: hsl(0, 0%, 100%);
+  --ui-surface: hsl(0, 0%, 98%);
+  --ui-border: hsl(0, 0%, 90%);
+  
+  /* Text Colors */
+  --ui-text: hsl(0, 0%, 13%);
+  --ui-text-secondary: hsl(0, 0%, 45%);
+  --ui-text-muted: hsl(0, 0%, 65%);
+  
+  /* Semantic Colors */
+  --ui-success: hsl(142, 76%, 36%);
+  --ui-success-light: hsl(142, 76%, 97%);
+  --ui-warning: hsl(38, 92%, 50%);
+  --ui-warning-light: hsl(38, 92%, 97%);
+  --ui-error: hsl(0, 84%, 60%);
+  --ui-error-light: hsl(0, 84%, 97%);
+  --ui-info: hsl(199, 89%, 48%);
+  --ui-info-light: hsl(199, 89%, 97%);
+  
+  /* ========================================================================
+     Spacing System - 4px Grid
+     ======================================================================== */
+  
+  --ui-space-0: 0;
+  --ui-space-1: 0.25rem;    /* 4px */
+  --ui-space-2: 0.5rem;     /* 8px */
+  --ui-space-3: 0.75rem;    /* 12px */
+  --ui-space-4: 1rem;       /* 16px */
+  --ui-space-5: 1.25rem;    /* 20px */
+  --ui-space-6: 1.5rem;     /* 24px */
+  --ui-space-8: 2rem;       /* 32px */
+  --ui-space-10: 2.5rem;    /* 40px */
+  --ui-space-12: 3rem;      /* 48px */
+  --ui-space-16: 4rem;      /* 64px */
+  --ui-space-20: 5rem;      /* 80px */
+  --ui-space-24: 6rem;      /* 96px */
+  --ui-space-32: 8rem;      /* 128px */
+  --ui-space-40: 10rem;     /* 160px */
+  --ui-space-48: 12rem;     /* 192px */
+  --ui-space-64: 16rem;     /* 256px */
+  
+  /* ========================================================================
+     Typography System
+     ======================================================================== */
+  
+  /* Font Families */
+  --ui-font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
+    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
+    sans-serif;
+  --ui-font-mono: 'Menlo', 'Monaco', 'Courier New', monospace;
+  
+  /* Font Sizes */
+  --ui-text-xs: 0.75rem;    /* 12px */
+  --ui-text-sm: 0.875rem;   /* 14px */
+  --ui-text-base: 1rem;     /* 16px */
+  --ui-text-lg: 1.125rem;   /* 18px */
+  --ui-text-xl: 1.25rem;    /* 20px */
+  --ui-text-2xl: 1.5rem;    /* 24px */
+  --ui-text-3xl: 1.875rem;  /* 30px */
+  --ui-text-4xl: 2.25rem;   /* 36px */
+  --ui-text-5xl: 3rem;      /* 48px */
+  
+  /* Font Weights */
+  --ui-font-weight-normal: 400;
+  --ui-font-weight-medium: 500;
+  --ui-font-weight-semibold: 600;
+  --ui-font-weight-bold: 700;
+  
+  /* Line Heights */
+  --ui-line-height-tight: 1.25;
+  --ui-line-height-normal: 1.5;
+  --ui-line-height-relaxed: 1.75;
+  
+  /* ========================================================================
+     Border Radius
+     ======================================================================== */
+  
+  --ui-radius-sm: 0.25rem;   /* 4px */
+  --ui-radius-md: 0.5rem;    /* 8px */
+  --ui-radius-lg: 0.75rem;   /* 12px */
+  --ui-radius-xl: 1rem;      /* 16px */
+  --ui-radius-full: 9999px;
+  
+  /* ========================================================================
+     Shadows
+     ======================================================================== */
+  
+  --ui-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+  --ui-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1),
+    0 2px 4px -1px rgba(0, 0, 0, 0.06);
+  --ui-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1),
+    0 4px 6px -2px rgba(0, 0, 0, 0.05);
+  --ui-shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1),
+    0 10px 10px -5px rgba(0, 0, 0, 0.04);
+  
+  /* ========================================================================
+     Transitions
+     ======================================================================== */
+  
+  --ui-transition-fast: 150ms ease-in-out;
+  --ui-transition-base: 200ms ease-in-out;
+  --ui-transition-slow: 300ms ease-in-out;
+}
+
+/* ============================================================================
+   Dark Theme
+   ============================================================================ */
+
+[data-theme="dark"] {
+  /* ========================================================================
+     Color System - Dark Theme
+     ======================================================================== */
+  
+  /* Primary Colors */
+  --ui-primary: hsl(221, 83%, 65%);
+  --ui-primary-light: hsl(221, 83%, 30%);
+  --ui-primary-dark: hsl(221, 83%, 90%);
+  
+  /* Secondary Colors */
+  --ui-secondary: hsl(160, 84%, 55%);
+  --ui-secondary-light: hsl(160, 84%, 25%);
+  --ui-secondary-dark: hsl(160, 84%, 90%);
+  
+  /* Accent Colors */
+  --ui-accent: hsl(262, 80%, 65%);
+  --ui-accent-light: hsl(262, 80%, 30%);
+  --ui-accent-dark: hsl(262, 80%, 90%);
+  
+  /* Neutral Colors */
+  --ui-background: hsl(0, 0%, 13%);
+  --ui-surface: hsl(0, 0%, 18%);
+  --ui-border: hsl(0, 0%, 25%);
+  
+  /* Text Colors */
+  --ui-text: hsl(0, 0%, 98%);
+  --ui-text-secondary: hsl(0, 0%, 75%);
+  --ui-text-muted: hsl(0, 0%, 55%);
+  
+  /* Semantic Colors */
+  --ui-success: hsl(142, 76%, 55%);
+  --ui-success-light: hsl(142, 76%, 25%);
+  --ui-warning: hsl(38, 92%, 60%);
+  --ui-warning-light: hsl(38, 92%, 25%);
+  --ui-error: hsl(0, 84%, 70%);
+  --ui-error-light: hsl(0, 84%, 25%);
+  --ui-info: hsl(199, 89%, 60%);
+  --ui-info-light: hsl(199, 89%, 25%);
+  
+  /* Shadows - Adjusted for dark theme */
+  --ui-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.3);
+  --ui-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.4),
+    0 2px 4px -1px rgba(0, 0, 0, 0.3);
+  --ui-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.4),
+    0 4px 6px -2px rgba(0, 0, 0, 0.3);
+  --ui-shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.4),
+    0 10px 10px -5px rgba(0, 0, 0, 0.3);
+}

package/src/utilities.css

@@ -0,0 +1,388 @@
+/* ============================================================================
+   工具类 - 常用布局、间距、文本工具类
+   ============================================================================ */
+
+/* ============================================================================
+   布局工具类
+   ============================================================================ */
+
+/* 容器 - 最大宽度 + 水平 padding */
+.container {
+  max-width: 1200px;
+  margin-left: auto;
+  margin-right: auto;
+  padding-left: var(--ui-space-4);
+  padding-right: var(--ui-space-4);
+}
+
+/* Flexbox 基础 */
+.flex {
+  display: flex;
+}
+
+.flex-col {
+  display: flex;
+  flex-direction: column;
+}
+
+.flex-row {
+  display: flex;
+  flex-direction: row;
+}
+
+/* align-items 工具类 */
+.items-center {
+  align-items: center;
+}
+
+.items-start {
+  align-items: flex-start;
+}
+
+.items-end {
+  align-items: flex-end;
+}
+
+/* justify-content 工具类 */
+.justify-center {
+  justify-content: center;
+}
+
+.justify-between {
+  justify-content: space-between;
+}
+
+.justify-end {
+  justify-content: flex-end;
+}
+
+/* gap 工具类 */
+.gap-1 {
+  gap: var(--ui-space-1);
+}
+
+.gap-2 {
+  gap: var(--ui-space-2);
+}
+
+.gap-3 {
+  gap: var(--ui-space-3);
+}
+
+.gap-4 {
+  gap: var(--ui-space-4);
+}
+
+.gap-5 {
+  gap: var(--ui-space-5);
+}
+
+.gap-6 {
+  gap: var(--ui-space-6);
+}
+
+.gap-8 {
+  gap: var(--ui-space-8);
+}
+
+/* ============================================================================
+   间距工具类 - Padding
+   ============================================================================ */
+
+/* 全向 padding */
+.p-1 {
+  padding: var(--ui-space-1);
+}
+
+.p-2 {
+  padding: var(--ui-space-2);
+}
+
+.p-3 {
+  padding: var(--ui-space-3);
+}
+
+.p-4 {
+  padding: var(--ui-space-4);
+}
+
+.p-5 {
+  padding: var(--ui-space-5);
+}
+
+.p-6 {
+  padding: var(--ui-space-6);
+}
+
+.p-8 {
+  padding: var(--ui-space-8);
+}
+
+/* 水平 padding */
+.px-1 {
+  padding-left: var(--ui-space-1);
+  padding-right: var(--ui-space-1);
+}
+
+.px-2 {
+  padding-left: var(--ui-space-2);
+  padding-right: var(--ui-space-2);
+}
+
+.px-3 {
+  padding-left: var(--ui-space-3);
+  padding-right: var(--ui-space-3);
+}
+
+.px-4 {
+  padding-left: var(--ui-space-4);
+  padding-right: var(--ui-space-4);
+}
+
+.px-6 {
+  padding-left: var(--ui-space-6);
+  padding-right: var(--ui-space-6);
+}
+
+/* 竖直 padding */
+.py-1 {
+  padding-top: var(--ui-space-1);
+  padding-bottom: var(--ui-space-1);
+}
+
+.py-2 {
+  padding-top: var(--ui-space-2);
+  padding-bottom: var(--ui-space-2);
+}
+
+.py-3 {
+  padding-top: var(--ui-space-3);
+  padding-bottom: var(--ui-space-3);
+}
+
+.py-4 {
+  padding-top: var(--ui-space-4);
+  padding-bottom: var(--ui-space-4);
+}
+
+.py-6 {
+  padding-top: var(--ui-space-6);
+  padding-bottom: var(--ui-space-6);
+}
+
+/* ============================================================================
+   间距工具类 - Margin
+   ============================================================================ */
+
+/* 全向 margin */
+.m-1 {
+  margin: var(--ui-space-1);
+}
+
+.m-2 {
+  margin: var(--ui-space-2);
+}
+
+.m-3 {
+  margin: var(--ui-space-3);
+}
+
+.m-4 {
+  margin: var(--ui-space-4);
+}
+
+.m-6 {
+  margin: var(--ui-space-6);
+}
+
+/* 水平 margin */
+.mx-1 {
+  margin-left: var(--ui-space-1);
+  margin-right: var(--ui-space-1);
+}
+
+.mx-2 {
+  margin-left: var(--ui-space-2);
+  margin-right: var(--ui-space-2);
+}
+
+.mx-3 {
+  margin-left: var(--ui-space-3);
+  margin-right: var(--ui-space-3);
+}
+
+.mx-4 {
+  margin-left: var(--ui-space-4);
+  margin-right: var(--ui-space-4);
+}
+
+.mx-auto {
+  margin-left: auto;
+  margin-right: auto;
+}
+
+/* 竖直 margin */
+.my-1 {
+  margin-top: var(--ui-space-1);
+  margin-bottom: var(--ui-space-1);
+}
+
+.my-2 {
+  margin-top: var(--ui-space-2);
+  margin-bottom: var(--ui-space-2);
+}
+
+.my-3 {
+  margin-top: var(--ui-space-3);
+  margin-bottom: var(--ui-space-3);
+}
+
+.my-4 {
+  margin-top: var(--ui-space-4);
+  margin-bottom: var(--ui-space-4);
+}
+
+.my-6 {
+  margin-top: var(--ui-space-6);
+  margin-bottom: var(--ui-space-6);
+}
+
+/* ============================================================================
+   文本工具类
+   ============================================================================ */
+
+/* 字体大小 */
+.text-xs {
+  font-size: var(--ui-text-xs);
+}
+
+.text-sm {
+  font-size: var(--ui-text-sm);
+}
+
+.text-base {
+  font-size: var(--ui-text-base);
+}
+
+.text-lg {
+  font-size: var(--ui-text-lg);
+}
+
+.text-xl {
+  font-size: var(--ui-text-xl);
+}
+
+.text-2xl {
+  font-size: var(--ui-text-2xl);
+}
+
+.text-3xl {
+  font-size: var(--ui-text-3xl);
+}
+
+.text-4xl {
+  font-size: var(--ui-text-4xl);
+}
+
+/* 字重 */
+.font-normal {
+  font-weight: var(--ui-font-weight-normal);
+}
+
+.font-medium {
+  font-weight: var(--ui-font-weight-medium);
+}
+
+.font-semibold {
+  font-weight: var(--ui-font-weight-semibold);
+}
+
+.font-bold {
+  font-weight: var(--ui-font-weight-bold);
+}
+
+/* 文本对齐 */
+.text-center {
+  text-align: center;
+}
+
+.text-left {
+  text-align: left;
+}
+
+.text-right {
+  text-align: right;
+}
+
+/* ============================================================================
+   显示工具类
+   ============================================================================ */
+
+.hidden {
+  display: none;
+}
+
+.block {
+  display: block;
+}
+
+.inline-block {
+  display: inline-block;
+}
+
+/* 屏幕阅读器可见 - 仅对屏幕阅读器可见 */
+.sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border-width: 0;
+}
+
+/* ============================================================================
+   圆角工具类
+   ============================================================================ */
+
+.rounded-sm {
+  border-radius: var(--ui-radius-sm);
+}
+
+.rounded-md {
+  border-radius: var(--ui-radius-md);
+}
+
+.rounded-lg {
+  border-radius: var(--ui-radius-lg);
+}
+
+.rounded-xl {
+  border-radius: var(--ui-radius-xl);
+}
+
+.rounded-full {
+  border-radius: var(--ui-radius-full);
+}
+
+/* ============================================================================
+   阴影工具类
+   ============================================================================ */
+
+.shadow-sm {
+  box-shadow: var(--ui-shadow-sm);
+}
+
+.shadow-md {
+  box-shadow: var(--ui-shadow-md);
+}
+
+.shadow-lg {
+  box-shadow: var(--ui-shadow-lg);
+}
+
+.shadow-xl {
+  box-shadow: var(--ui-shadow-xl);
+}