@mathwiz/ui-components 0.1.17 → 0.1.22

package/dist/styles/index.css

@@ -0,0 +1,103 @@
+/* 组件库统一样式入口文件 */
+
+/* ==================== 组件样式导入 ==================== */
+
+/* 基础组件样式 */
+@import '../components/Button/Button.css';
+
+/* 布局组件样式 */
+@import '../components/MathWizHeader/MathWizHeader.css';
+@import '../components/Sidebar/Sidebar.css';
+@import '../components/ContentAccordion/ContentAccordion.css';
+
+/* 其他组件样式 */
+@import '../components/Submenu/Submenu.css';
+@import '../components/UserProfile/UserProfile.css';
+
+/* MathCardV2 组件样式 */
+@import '../components/MathCardV2/MathCardV2.css';
+
+/* IXLStyleCard 组件样式 */
+@import '../components/IXLStyleCard/IXLStyleCard.css';
+
+/* 页面级组件样式 */
+@import '../pages/GradeUnitBrowserPage/GradeUnitBrowserPage.css';
+
+/* ==================== MathCardV2 设计令牌系统 ==================== */
+@import './mathcard-tokens.css';
+@import './mathcard-utilities.css';
+
+/* ==================== CSS 变量定义 (设计令牌) ==================== */
+:root {
+  /* 主色调 */
+  --primary-color: #3b82f6;
+  --primary-hover: #2563eb;
+  --primary-active: #1d4ed8;
+
+  /* 背景色 */
+  --bg-primary: #ffffff;
+  --bg-secondary: #f8fafc;
+  --bg-tertiary: #f1f5f9;
+
+  /* 文字色 */
+  --text-primary: var(--mc-text-primary);
+  --text-secondary: var(--mc-text-secondary);
+  --text-tertiary: var(--mc-text-tertiary);
+
+  /* 边框色 */
+  --border-light: #e2e8f0;
+  --border-medium: #cbd5e1;
+  --border-dark: #94a3b8;
+
+  /* 状态色 */
+  --success-color: var(--mc-color-success);
+  --warning-color: var(--mc-color-warning);
+  --error-color: #ef4444;
+  --info-color: #3b82f6;
+
+  /* 阴影 */
+  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
+  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
+  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
+
+  /* 圆角 */
+  --radius-sm: 0.25rem;
+  --radius-md: 0.375rem;
+  --radius-lg: 0.5rem;
+  --radius-xl: 0.75rem;
+
+  /* 间距 */
+  --spacing-xs: 0.25rem;
+  --spacing-sm: 0.5rem;
+  --spacing-md: 1rem;
+  --spacing-lg: 1.5rem;
+  --spacing-xl: 2rem;
+  --spacing-2xl: 3rem;
+
+  /* 字体大小 */
+  --text-xs: 0.75rem;
+  --text-sm: 0.875rem;
+  --text-base: 1rem;
+  --text-lg: 1.125rem;
+  --text-xl: 1.25rem;
+  --text-2xl: 1.5rem;
+  --text-3xl: 1.875rem;
+
+  /* 字体粗细 */
+  --font-normal: 400;
+  --font-medium: 500;
+  --font-semibold: 600;
+  --font-bold: 700;
+
+  /* 渐变背景 */
+  --header-bg: linear-gradient(to right, #8b5cf6, #ec4899, #ef4444);
+  --sidebar-bg: linear-gradient(180deg, #f8fafc 0%, #e2e8f0 100%);
+
+  /* ==================== IXL风格卡片变量 ==================== */
+  /* 注：IXL变量现在由 mathcard-tokens.css 提供，向后兼容 */
+}
+
+/* ==================== 组件库基础样式 ==================== */
+
+/* 注意：组件库不包含全局样式重置，以避免与业务项目样式冲突。
+   业务项目应自行管理全局重置和基础样式。 */

package/dist/styles/mathcard-tokens.css

@@ -0,0 +1,285 @@
+/* ==================== MathCardV2 设计令牌系统 ==================== */
+/* 版本: 2.0.0 | 单一数据源 | 向后兼容 */
+
+/**
+ * @tokens Colors
+ * @presenter Color
+ */
+:root {
+  /* IXL 风格语义色 - 教学模块 */
+  --mc-color-remember: #5bc0de;
+  /* 速记模块 - 天蓝色 | 认知/理解 */
+  --mc-color-review: #a5c63b;
+  /* 回顾模块 - 黄绿色 | 巩固/确认 */
+  --mc-color-solve: #f0ad4e;
+  /* 解答模块 - 橙黄色 | 应用/实践 */
+
+  /* 功能色 - 交互状态 */
+  --mc-color-primary: #3b82f6;
+  /* 主操作色 - 蓝色 | 主 CTA */
+  --mc-color-success: #10b981;
+  /* 成功状态 - 绿色 | 正确/完成 */
+  --mc-color-warning: #f59e0b;
+  /* 警告状态 - 琥珀色 | 注意/提示 */
+  --mc-color-error: #f97316;
+  /* 错误状态 - 橙色(非红) | 错误/需改进 */
+  --mc-color-info: #5bc0de;
+  /* 信息提示 - 天蓝色 | 说明/解释 */
+
+  /* 文本色 - 基于 Slate 调色板 */
+  --mc-text-primary: #1e293b;
+  /* 主要文本 - slate-800 | 标题/正文 */
+  --mc-text-secondary: #475569;
+  /* 次要文本 - slate-600 | 副标题/描述 */
+  --mc-text-tertiary: #94a3b8;
+  /* 辅助文本 - slate-400 | 提示/标签 */
+  --mc-text-inverse: #ffffff;
+  /* 反色文本 | 深色背景上的文本 */
+
+  /* 背景色 */
+  --mc-bg-primary: #ffffff;
+  /* 主背景 | 卡片/页面背景 */
+  --mc-bg-secondary: #f8fafc;
+  /* 次级背景 - slate-50 | 区块背景 */
+  --mc-bg-tertiary: #f1f5f9;
+  /* 三级背景 - slate-100 | 嵌套背景 */
+  --mc-bg-warm: #fffbeb;
+  /* 暖色背景 - amber-50 | 提示/警告背景 */
+  --mc-bg-success: #ecfdf5;
+  /* 成功背景 - green-50 | 成功状态背景 */
+
+  /* 边框色 */
+  --mc-border-default: #e2e8f0;
+  /* 默认边框 - slate-200 | 常规边框 */
+  --mc-border-light: #f1f5f9;
+  /* 浅边框 - slate-100 | 内部分隔线 */
+  --mc-border-focus: #3b82f6;
+  /* 聚焦边框 | 输入框焦点状态 */
+
+  /* 步骤解释颜色 (Explanation Step Colors) */
+  --mc-step-color-ident: #3b82f6;
+  /* 蓝色 - 识别/理解 */
+  --mc-step-color-calc: #f97316;
+  /* 橙色 - 计算/拆分 */
+  --mc-step-color-res: #10b981;
+  /* 绿色 - 结果/综合 */
+
+  /* 步骤背景渐变 (Step Gradient Backgrounds) */
+  --mc-step-bg-ident: linear-gradient(90deg, rgba(59, 130, 246, 0.06) 0%, transparent 100%);
+  /* 识别步骤渐变 */
+  --mc-step-bg-calc: linear-gradient(90deg, rgba(249, 115, 22, 0.06) 0%, transparent 100%);
+  /* 计算步骤渐变 */
+  --mc-step-bg-res: linear-gradient(90deg, rgba(16, 185, 129, 0.06) 0%, transparent 100%);
+  /* 结果步骤渐变 */
+}
+
+/**
+ * @tokens Typography
+ * @presenter FontSize
+ */
+:root {
+
+  /* 字体族栈 */
+  --mc-font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
+    "Microsoft YaHei", "PingFang SC", sans-serif;
+  --mc-font-serif: "Times New Roman", Times, "SimSun", serif;
+  --mc-font-mono: "SF Mono", Monaco, "Cascadia Code", "Consolas", monospace;
+
+  /* 字号系统 (基于 16px 基准) */
+  --mc-text-xs: 0.75rem;
+  /* 12px | 辅助文本/标签 */
+  --mc-text-sm: 0.875rem;
+  /* 14px | 小正文/说明 */
+  --mc-text-base: 1rem;
+  /* 16px | 正文/默认字号 */
+  --mc-text-lg: 1.125rem;
+  /* 18px | 大正文/子标题 */
+  --mc-text-xl: 1.25rem;
+  /* 20px | 小标题 */
+  --mc-text-2xl: 1.5rem;
+  /* 24px | 中标题 */
+  --mc-text-3xl: 1.875rem;
+  /* 30px | 大标题 */
+  --mc-text-4xl: 2.25rem;
+  /* 36px | 特大标题/场景标题 */
+
+  /* 行高系统 */
+  --mc-leading-tight: 1.25;
+  /* 紧密行高 | 标题/短文本 */
+  --mc-leading-normal: 1.5;
+  /* 正常行高 | 正文 */
+  --mc-leading-relaxed: 1.7;
+  /* 宽松行高 | 长文本/说明 */
+
+  /* 字重系统 */
+  --mc-font-normal: 400;
+  /* 正常字重 | 正文 */
+  --mc-font-medium: 500;
+  /* 中等字重 | 强调文本 */
+  --mc-font-semibold: 600;
+  /* 半粗体 | 标题/按钮 */
+  --mc-font-bold: 700;
+  /* 粗体 | 重要标题 */
+}
+
+/**
+ * @tokens Spacing
+ * @presenter Spacing
+ */
+:root {
+
+  --mc-space-1: 0.25rem;
+  /* 4px  | 微小间距 */
+  --mc-space-2: 0.5rem;
+  /* 8px  | 小间距 */
+  --mc-space-3: 0.75rem;
+  /* 12px | 中等间距 */
+  --mc-space-4: 1rem;
+  /* 16px | 基础间距 */
+  --mc-space-5: 1.25rem;
+  /* 20px | 大间距 */
+  --mc-space-6: 1.5rem;
+  /* 24px | 超大间距 */
+  --mc-space-8: 2rem;
+  /* 32px | 区块间距 */
+  --mc-space-10: 2.5rem;
+  /* 40px | 大区块间距 */
+  --mc-space-12: 3rem;
+  /* 48px | 特大区块间距 */
+
+  /* 步骤解释布局 (Explanation Step Layout) */
+  /* 侧边栏控制 */
+  --mc-step-sidebar-visible: 1;
+  /* 侧边栏可见性: 0 = 隐藏, 1 = 显示 */
+  --mc-step-sidebar-width: 1px;
+  /* 侧边栏宽度 */
+  --mc-step-sidebar-radius: var(--mc-radius-sm);
+  /* 侧边栏圆角 */
+  --mc-step-sidebar-opacity: 0.8;
+  /* 侧边栏不透明度: 0-1 */
+
+  /* 向后兼容 - 保留原有变量 */
+  --mc-step-border-width: var(--mc-step-sidebar-width);
+  /* 左侧色条宽度 (兼容旧版本) */
+
+  --mc-step-padding-y: var(--mc-space-6);
+  /* 上下内边距 24px */
+  --mc-step-gap: var(--mc-space-10);
+  /* 步骤间距 40px */
+
+  /* 儿童友好触控区域 */
+  --mc-touch-min: 44px;
+  /* 最小触控目标 (WCAG) */
+  --mc-touch-comfortable: 48px;
+  /* 舒适触控目标 (儿童友好) */
+}
+
+/**
+ * @tokens Border Radius
+ * @presenter BorderRadius
+ */
+:root {
+
+  --mc-radius-sm: 0.25rem;
+  /* 4px  | 小圆角 */
+  --mc-radius-md: 0.5rem;
+  /* 8px  | 中等圆角 */
+  --mc-radius-lg: 0.75rem;
+  /* 12px | 大圆角 (卡片默认) */
+  --mc-radius-xl: 1rem;
+  /* 16px | 超大圆角 */
+  --mc-radius-full: 9999px;
+  /* 全圆角 | 圆形元素 */
+}
+
+/**
+ * @tokens Shadows
+ * @presenter Shadow
+ */
+:root {
+
+  --mc-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
+  --mc-shadow-md: 0 4px 6px rgba(0, 0, 0, 0.07);
+  --mc-shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);
+  --mc-shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.1);
+
+  /* 卡片专用阴影 */
+  --mc-shadow-card: 0 4px 12px rgba(0, 0, 0, 0.08);
+  --mc-shadow-card-hover: 0 8px 20px rgba(0, 0, 0, 0.12);
+}
+
+/**
+ * @tokens Animations
+ * @presenter Animation
+ */
+:root {
+
+  --mc-transition-fast: 0.15s ease;
+  --mc-transition-normal: 0.25s ease;
+  --mc-transition-slow: 0.35s ease;
+}
+
+/**
+ * @tokens Layout
+ * @presenter Spacing
+ */
+:root {
+
+  --mc-card-padding: 1.5rem;
+  /* 24px | 卡片内边距 (md) */
+  --mc-card-padding-lg: 1.875rem;
+  /* 30px | 大卡片内边距 */
+  --mc-content-gap: 1rem;
+  /* 16px | 内容间距 */
+  --mc-section-gap: 2rem;
+  /* 32px | 区块间距 */
+  --mc-card-min-height: 200px;
+  /* 卡片最小高度 */
+  --mc-max-content-width: 800px;
+  /* 最大内容宽度 */
+}
+
+/**
+ * @tokens-end
+ */
+
+/* ==================== 暗色主题 ==================== */
+[data-theme="dark"],
+.theme-dark {
+  --mc-bg-primary: #1a1a2e;
+  --mc-bg-secondary: #16213e;
+  --mc-bg-tertiary: #0f3460;
+  --mc-text-primary: #f1f5f9;
+  --mc-text-secondary: #cbd5e1;
+  --mc-border-default: #334155;
+  --mc-shadow-card: 0 4px 12px rgba(0, 0, 0, 0.3);
+}
+
+/* ==================== 向后兼容层 ==================== */
+/* 确保现有代码平滑迁移，逐步废弃 */
+
+/* 兼容 IXLStyleCard 变量 */
+:root {
+  --ixl-color-remember: var(--mc-color-remember);
+  --ixl-color-review: var(--mc-color-review);
+  --ixl-color-solve: var(--mc-color-solve);
+  --ixl-card-shadow: var(--mc-shadow-card);
+  --ixl-card-border-radius: var(--mc-radius-lg);
+}
+
+/* 兼容 App.css 全局变量 */
+:root {
+  --text-primary: var(--mc-text-primary);
+  --border-color: var(--mc-border-default);
+  --success-color: var(--mc-color-success);
+  --warning-color: var(--mc-color-warning);
+  --accent-color: var(--mc-color-primary);
+}
+
+/* 兼容 MathCardV2.css 变量 */
+:root {
+  --mathcard-bg-color: var(--mc-bg-primary);
+  --mathcard-text-color: var(--mc-text-primary);
+  --mathcard-border-color: var(--mc-border-default);
+  --mathcard-shadow: var(--mc-shadow-card);
+}

package/dist/styles/mathcard-utilities.css

@@ -0,0 +1,269 @@
+/* ==================== MathCardV2 CSS 工具类系统 ==================== */
+/* 基于设计令牌的实用工具类，避免与 Tailwind 冲突 */
+
+/* ==================== 标题工具类 ==================== */
+
+.mc-heading-scene {
+  font-size: var(--mc-text-4xl);
+  font-weight: var(--mc-font-semibold);
+  line-height: var(--mc-leading-tight);
+  color: var(--mc-color-info);
+  margin-bottom: var(--mc-space-6);
+}
+
+.mc-heading-section {
+  font-size: var(--mc-text-xl);
+  font-weight: var(--mc-font-semibold);
+  color: var(--mc-color-review);
+  margin-bottom: var(--mc-space-4);
+}
+
+.mc-heading-content {
+  font-size: var(--mc-text-lg);
+  font-weight: var(--mc-font-semibold);
+  color: var(--mc-text-primary);
+  margin-bottom: var(--mc-space-3);
+}
+
+/* ==================== 正文工具类 ==================== */
+
+.mc-body {
+  font-size: var(--mc-text-base);
+  line-height: var(--mc-leading-relaxed);
+  color: var(--mc-text-secondary);
+}
+
+.mc-body-lg {
+  font-size: var(--mc-text-lg);
+  line-height: var(--mc-leading-relaxed);
+  color: var(--mc-text-secondary);
+}
+
+.mc-body-sm {
+  font-size: var(--mc-text-sm);
+  line-height: var(--mc-leading-normal);
+  color: var(--mc-text-secondary);
+}
+
+/* ==================== 辅助文本工具类 ==================== */
+
+.mc-caption {
+  font-size: var(--mc-text-sm);
+  color: var(--mc-text-tertiary);
+  line-height: var(--mc-leading-normal);
+}
+
+.mc-label {
+  font-size: var(--mc-text-sm);
+  font-weight: var(--mc-font-medium);
+  color: var(--mc-text-tertiary);
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+}
+
+/* ==================== 数学文本工具类 ==================== */
+
+.mc-math-text {
+  font-family: var(--mc-font-serif);
+  font-style: italic;
+}
+
+.mc-math-operator {
+  font-family: var(--mc-font-serif);
+  font-weight: var(--mc-font-bold);
+  margin: 0 var(--mc-space-2);
+}
+
+/* ==================== 间距工具类 ==================== */
+
+/* 外边距工具类 */
+.mc-m-1 { margin: var(--mc-space-1); }
+.mc-m-2 { margin: var(--mc-space-2); }
+.mc-m-3 { margin: var(--mc-space-3); }
+.mc-m-4 { margin: var(--mc-space-4); }
+.mc-m-5 { margin: var(--mc-space-5); }
+.mc-m-6 { margin: var(--mc-space-6); }
+
+.mc-mt-1 { margin-top: var(--mc-space-1); }
+.mc-mt-2 { margin-top: var(--mc-space-2); }
+.mc-mt-3 { margin-top: var(--mc-space-3); }
+.mc-mt-4 { margin-top: var(--mc-space-4); }
+.mc-mt-5 { margin-top: var(--mc-space-5); }
+.mc-mt-6 { margin-top: var(--mc-space-6); }
+
+.mc-mb-1 { margin-bottom: var(--mc-space-1); }
+.mc-mb-2 { margin-bottom: var(--mc-space-2); }
+.mc-mb-3 { margin-bottom: var(--mc-space-3); }
+.mc-mb-4 { margin-bottom: var(--mc-space-4); }
+.mc-mb-5 { margin-bottom: var(--mc-space-5); }
+.mc-mb-6 { margin-bottom: var(--mc-space-6); }
+
+.mc-ml-1 { margin-left: var(--mc-space-1); }
+.mc-ml-2 { margin-left: var(--mc-space-2); }
+.mc-ml-3 { margin-left: var(--mc-space-3); }
+.mc-ml-4 { margin-left: var(--mc-space-4); }
+.mc-ml-5 { margin-left: var(--mc-space-5); }
+.mc-ml-6 { margin-left: var(--mc-space-6); }
+
+.mc-mr-1 { margin-right: var(--mc-space-1); }
+.mc-mr-2 { margin-right: var(--mc-space-2); }
+.mc-mr-3 { margin-right: var(--mc-space-3); }
+.mc-mr-4 { margin-right: var(--mc-space-4); }
+.mc-mr-5 { margin-right: var(--mc-space-5); }
+.mc-mr-6 { margin-right: var(--mc-space-6); }
+
+.mc-mx-1 { margin-left: var(--mc-space-1); margin-right: var(--mc-space-1); }
+.mc-mx-2 { margin-left: var(--mc-space-2); margin-right: var(--mc-space-2); }
+.mc-mx-3 { margin-left: var(--mc-space-3); margin-right: var(--mc-space-3); }
+.mc-mx-4 { margin-left: var(--mc-space-4); margin-right: var(--mc-space-4); }
+.mc-mx-5 { margin-left: var(--mc-space-5); margin-right: var(--mc-space-5); }
+.mc-mx-6 { margin-left: var(--mc-space-6); margin-right: var(--mc-space-6); }
+
+.mc-my-1 { margin-top: var(--mc-space-1); margin-bottom: var(--mc-space-1); }
+.mc-my-2 { margin-top: var(--mc-space-2); margin-bottom: var(--mc-space-2); }
+.mc-my-3 { margin-top: var(--mc-space-3); margin-bottom: var(--mc-space-3); }
+.mc-my-4 { margin-top: var(--mc-space-4); margin-bottom: var(--mc-space-4); }
+.mc-my-5 { margin-top: var(--mc-space-5); margin-bottom: var(--mc-space-5); }
+.mc-my-6 { margin-top: var(--mc-space-6); margin-bottom: var(--mc-space-6); }
+
+/* 内边距工具类 */
+.mc-p-1 { padding: var(--mc-space-1); }
+.mc-p-2 { padding: var(--mc-space-2); }
+.mc-p-3 { padding: var(--mc-space-3); }
+.mc-p-4 { padding: var(--mc-space-4); }
+.mc-p-5 { padding: var(--mc-space-5); }
+.mc-p-6 { padding: var(--mc-space-6); }
+
+.mc-pt-1 { padding-top: var(--mc-space-1); }
+.mc-pt-2 { padding-top: var(--mc-space-2); }
+.mc-pt-3 { padding-top: var(--mc-space-3); }
+.mc-pt-4 { padding-top: var(--mc-space-4); }
+.mc-pt-5 { padding-top: var(--mc-space-5); }
+.mc-pt-6 { padding-top: var(--mc-space-6); }
+
+.mc-pb-1 { padding-bottom: var(--mc-space-1); }
+.mc-pb-2 { padding-bottom: var(--mc-space-2); }
+.mc-pb-3 { padding-bottom: var(--mc-space-3); }
+.mc-pb-4 { padding-bottom: var(--mc-space-4); }
+.mc-pb-5 { padding-bottom: var(--mc-space-5); }
+.mc-pb-6 { padding-bottom: var(--mc-space-6); }
+
+.mc-pl-1 { padding-left: var(--mc-space-1); }
+.mc-pl-2 { padding-left: var(--mc-space-2); }
+.mc-pl-3 { padding-left: var(--mc-space-3); }
+.mc-pl-4 { padding-left: var(--mc-space-4); }
+.mc-pl-5 { padding-left: var(--mc-space-5); }
+.mc-pl-6 { padding-left: var(--mc-space-6); }
+
+.mc-pr-1 { padding-right: var(--mc-space-1); }
+.mc-pr-2 { padding-right: var(--mc-space-2); }
+.mc-pr-3 { padding-right: var(--mc-space-3); }
+.mc-pr-4 { padding-right: var(--mc-space-4); }
+.mc-pr-5 { padding-right: var(--mc-space-5); }
+.mc-pr-6 { padding-right: var(--mc-space-6); }
+
+.mc-px-1 { padding-left: var(--mc-space-1); padding-right: var(--mc-space-1); }
+.mc-px-2 { padding-left: var(--mc-space-2); padding-right: var(--mc-space-2); }
+.mc-px-3 { padding-left: var(--mc-space-3); padding-right: var(--mc-space-3); }
+.mc-px-4 { padding-left: var(--mc-space-4); padding-right: var(--mc-space-4); }
+.mc-px-5 { padding-left: var(--mc-space-5); padding-right: var(--mc-space-5); }
+.mc-px-6 { padding-left: var(--mc-space-6); padding-right: var(--mc-space-6); }
+
+.mc-py-1 { padding-top: var(--mc-space-1); padding-bottom: var(--mc-space-1); }
+.mc-py-2 { padding-top: var(--mc-space-2); padding-bottom: var(--mc-space-2); }
+.mc-py-3 { padding-top: var(--mc-space-3); padding-bottom: var(--mc-space-3); }
+.mc-py-4 { padding-top: var(--mc-space-4); padding-bottom: var(--mc-space-4); }
+.mc-py-5 { padding-top: var(--mc-space-5); padding-bottom: var(--mc-space-5); }
+.mc-py-6 { padding-top: var(--mc-space-6); padding-bottom: var(--mc-space-6); }
+
+/* 间距工具类 */
+.mc-gap-1 { gap: var(--mc-space-1); }
+.mc-gap-2 { gap: var(--mc-space-2); }
+.mc-gap-3 { gap: var(--mc-space-3); }
+.mc-gap-4 { gap: var(--mc-space-4); }
+.mc-gap-5 { gap: var(--mc-space-5); }
+.mc-gap-6 { gap: var(--mc-space-6); }
+
+/* ==================== 触控友好设计规范 ==================== */
+
+/* 儿童友好的交互区域 */
+.mc-touch-target {
+  min-height: var(--mc-touch-comfortable);
+  min-width: var(--mc-touch-comfortable);
+  padding: var(--mc-space-3) var(--mc-space-4);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+
+/* 输入框触控优化 */
+.mc-input {
+  min-height: var(--mc-touch-comfortable);
+  padding: var(--mc-space-3) var(--mc-space-4);
+  font-size: var(--mc-text-base);
+  border: 2px solid var(--mc-border-default);
+  border-radius: var(--mc-radius-md);
+  transition: border-color var(--mc-transition-normal);
+}
+
+.mc-input:focus {
+  outline: none;
+  border-color: var(--mc-border-focus);
+  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
+}
+
+/* 按钮触控优化 */
+.mc-button {
+  min-height: var(--mc-touch-comfortable);
+  padding: var(--mc-space-3) var(--mc-space-6);
+  font-size: var(--mc-text-base);
+  font-weight: var(--mc-font-semibold);
+  border-radius: var(--mc-radius-md);
+  transition: all var(--mc-transition-normal);
+  cursor: pointer;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+}
+
+/* ==================== 响应式工具类 ==================== */
+
+/* 移动端字体调整 */
+@media (max-width: 768px) {
+  :root {
+    /* 移动端基准字号调整为 14px */
+    --mc-text-base: 0.875rem; /* 14px */
+    --mc-text-lg: 1rem;       /* 16px */
+    --mc-text-xl: 1.125rem;   /* 18px */
+    --mc-text-2xl: 1.25rem;   /* 20px */
+    --mc-text-3xl: 1.5rem;    /* 24px */
+    --mc-text-4xl: 1.75rem;   /* 28px */
+  }
+
+  /* 移动端行高调整 */
+  .mc-heading-scene {
+    line-height: var(--mc-leading-normal);
+  }
+
+  .mc-body {
+    line-height: var(--mc-leading-normal);
+  }
+
+  .mc-body-lg {
+    line-height: var(--mc-leading-normal);
+  }
+
+  /* 移动端间距调整 */
+  .mc-heading-scene {
+    margin-bottom: var(--mc-space-4);
+  }
+
+  .mc-heading-section {
+    margin-bottom: var(--mc-space-3);
+  }
+
+  .mc-heading-content {
+    margin-bottom: var(--mc-space-2);
+  }
+}

package/dist/{react-storybook-mcp/src/test → test}/setup.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"setup.d.ts","sourceRoot":"","sources":["../../../../src/test/setup.ts"],"names":[],"mappings":""}
+{"version":3,"file":"setup.d.ts","sourceRoot":"","sources":["../../src/test/setup.ts"],"names":[],"mappings":""}