@incremark/theme 0.2.3

package/LICENSE

@@ -0,0 +1,22 @@
+MIT License
+
+Copyright (c) 2025 wangyishuai
+
+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.en.md

@@ -0,0 +1,133 @@
+# @incremark/theme
+
+Incremark Theme Package - Unified Theme System
+
+## Installation
+
+```bash
+pnpm add @incremark/theme
+```
+
+## Usage
+
+### Basic Usage
+
+Import styles in your React or Vue application:
+
+```tsx
+// React
+import '@incremark/react/styles.css'
+// Or import directly from theme package
+import '@incremark/theme/styles.css'
+```
+
+```vue
+<!-- Vue -->
+<style>
+@import '@incremark/vue/style.css';
+/* Or import directly from theme package */
+@import '@incremark/theme/styles.css';
+</style>
+```
+
+### Theme Configuration
+
+```tsx
+import { applyTheme, themes, type ThemeConfig } from '@incremark/theme'
+
+// Use preset theme
+const container = document.querySelector('.incremark')
+if (container) {
+  applyTheme(container as HTMLElement, themes.dark)
+}
+
+// Custom theme
+const customTheme: ThemeConfig = {
+  fontFamily: 'Georgia, serif',
+  color: '#2c3e50',
+  pendingBorderColor: '#e74c3c',
+  codeBackground: '#1e1e1e'
+}
+
+applyTheme(container as HTMLElement, customTheme)
+```
+
+### CSS Variables
+
+The theme package supports customization through CSS variables:
+
+```css
+.incremark {
+  --incremark-font-family: 'Your Font', sans-serif;
+  --incremark-color: #333;
+  --incremark-pending-border-color: #a855f7;
+  --incremark-code-background: #24292e;
+  --incremark-code-header-background: #1f2428;
+  --incremark-blockquote-border-color: #3b82f6;
+  --incremark-blockquote-background: #f0f7ff;
+}
+```
+
+## API
+
+### `ThemeConfig`
+
+Theme configuration interface:
+
+```typescript
+interface ThemeConfig {
+  fontFamily?: string
+  lineHeight?: string
+  color?: string
+  pendingBorderColor?: string
+  codeBackground?: string
+  codeHeaderBackground?: string
+  blockquoteBorderColor?: string
+  blockquoteBackground?: string
+}
+```
+
+### `themes`
+
+Preset themes:
+
+- `themes.default` - Default theme
+- `themes.dark` - Dark theme
+- `themes.light` - Light theme
+
+### `applyTheme(element, config)`
+
+Apply theme configuration to a DOM element.
+
+### `getThemeCSSVariables(config)`
+
+Get theme CSS variables string.
+
+## Style Classes
+
+The theme package provides a unified CSS class name system:
+
+- `.incremark` - Main container
+- `.incremark-block` - Block container
+- `.incremark-heading` - Heading
+- `.incremark-paragraph` - Paragraph
+- `.incremark-code` - Code block
+- `.incremark-inline-code` - Inline code
+- `.incremark-list` - List
+- `.incremark-table` - Table
+- `.incremark-blockquote` - Blockquote
+- `.incremark-hr` - Horizontal rule
+- `.incremark-math-inline` - Inline math
+- `.incremark-math-block` - Block math
+- `.incremark-mermaid` - Mermaid diagram
+
+## Migration Guide
+
+### Migrating from Previous Versions
+
+If you previously used `@incremark/react/styles.css` or Vue component scoped styles, now you just need to:
+
+1. Ensure `@incremark/theme` package is installed
+2. Import theme styles: `import '@incremark/theme/styles.css'`
+3. All style class names remain unchanged, backward compatible
+

package/README.md

@@ -0,0 +1,187 @@
+# @incremark/theme
+
+Incremark 主题样式包 - 统一的主题系统
+
+## 安装
+
+```bash
+pnpm add @incremark/theme
+```
+
+## 使用
+
+### 基础使用
+
+在 React 或 Vue 应用中导入样式：
+
+```tsx
+// React
+import '@incremark/react/styles.css'
+// 或直接导入主题包
+import '@incremark/theme/styles.css'
+```
+
+```vue
+<!-- Vue -->
+<style>
+@import '@incremark/vue/style.css';
+/* 或直接导入主题包 */
+@import '@incremark/theme/styles.css';
+</style>
+```
+
+### 主题配置
+
+```tsx
+import { applyTheme, defaultTheme, darkTheme, type DesignTokens } from '@incremark/theme'
+
+// 使用预设主题
+const container = document.querySelector('.incremark')
+if (container) {
+  applyTheme(container as HTMLElement, 'dark')
+  // 或使用主题对象
+  applyTheme(container as HTMLElement, darkTheme)
+}
+
+// 自定义主题（部分替换）
+const customTheme: Partial<DesignTokens> = {
+  color: {
+    text: {
+      primary: '#2c3e50'
+    },
+    code: {
+      background: '#1e1e1e'
+    }
+  }
+}
+
+applyTheme(container as HTMLElement, customTheme)
+```
+
+### CSS 变量
+
+主题包支持通过 CSS 变量进行定制：
+
+```css
+/* 默认主题变量在 :root 中定义 */
+.incremark {
+  --incremark-typography-font-family-base: 'Your Font', sans-serif;
+  --incremark-color-text-primary: #333;
+  --incremark-color-status-pending: #a855f7;
+  --incremark-color-code-background: #24292e;
+  --incremark-color-code-header-background: #1f2428;
+  --incremark-border-radius-lg: 12px;
+}
+
+/* 深色主题 */
+[data-theme="dark"] .incremark,
+.theme-dark .incremark {
+  --incremark-color-text-primary: #e6edf3;
+  --incremark-color-background-base: #0d1117;
+  --incremark-color-code-background: #0d1117;
+}
+```
+
+## API
+
+### 类型定义
+
+#### `DesignTokens`
+
+完整的设计 Token 接口，包含所有主题变量：
+
+```typescript
+interface DesignTokens {
+  color: ColorTokens
+  typography: TypographyTokens
+  spacing: SpacingTokens
+  border: BorderTokens
+  shadow: ShadowTokens
+  animation: AnimationTokens
+}
+```
+
+详细类型定义请参考 `src/tokens/` 目录。
+
+### 预设主题
+
+```typescript
+import { defaultTheme, darkTheme } from '@incremark/theme'
+
+// defaultTheme - 默认浅色主题
+// darkTheme - 深色主题
+```
+
+### 工具函数
+
+#### `applyTheme(element, theme)`
+
+将主题应用到 DOM 元素。
+
+**参数：**
+- `element: HTMLElement` - 目标元素
+- `theme: 'default' | 'dark' | DesignTokens | Partial<DesignTokens>` - 主题配置
+
+**示例：**
+```typescript
+// 使用预设主题名
+applyTheme(element, 'dark')
+
+// 使用主题对象
+applyTheme(element, darkTheme)
+
+// 部分替换
+applyTheme(element, {
+  color: { text: { primary: '#custom' } }
+})
+```
+
+#### `generateCSSVars(tokens, options)`
+
+从 Token 生成 CSS Variables 字符串。
+
+**参数：**
+- `tokens: DesignTokens` - 设计 Token 对象
+- `options.prefix?: string` - CSS 变量前缀（默认 'incremark'）
+- `options.selector?: string` - CSS 选择器（默认 ':root'）
+
+**返回：** `string` - CSS Variables 字符串
+
+#### `mergeTheme(base, override)`
+
+深度合并两个主题对象。
+
+**参数：**
+- `base: DesignTokens` - 基础主题
+- `override: Partial<DesignTokens>` - 要覆盖的部分
+
+**返回：** `DesignTokens` - 合并后的完整主题
+
+## 样式类名
+
+主题包提供了统一的 CSS 类名系统：
+
+- `.incremark` - 主容器
+- `.incremark-block` - 块容器
+- `.incremark-heading` - 标题
+- `.incremark-paragraph` - 段落
+- `.incremark-code` - 代码块
+- `.incremark-inline-code` - 行内代码
+- `.incremark-list` - 列表
+- `.incremark-table` - 表格
+- `.incremark-blockquote` - 引用块
+- `.incremark-hr` - 分隔线
+- `.incremark-math-inline` - 行内数学公式
+- `.incremark-math-block` - 块级数学公式
+- `.incremark-mermaid` - Mermaid 图表
+
+## 迁移指南
+
+### 从旧版本迁移
+
+如果你之前使用的是 `@incremark/react/styles.css` 或 Vue 组件的 scoped 样式，现在只需要：
+
+1. 确保安装了 `@incremark/theme` 包
+2. 导入主题样式：`import '@incremark/theme/styles.css'`
+3. 所有样式类名保持不变，向后兼容
+

package/dist/index.d.ts

@@ -0,0 +1,375 @@
+/**
+ * 颜色 Token 类型定义
+ */
+/**
+ * 基础色系统 - 包含各种颜色的完整色阶
+ */
+interface BaseColorPalette {
+    /** 10 级色阶 */
+    1: string;
+    2: string;
+    3: string;
+    4: string;
+    5: string;
+    6: string;
+    7: string;
+    8: string;
+    9: string;
+    10: string;
+}
+interface BaseColors {
+    /** 蓝色系 */
+    blue: BaseColorPalette;
+    /** 紫色系 */
+    purple: BaseColorPalette;
+    /** 绿色系 */
+    green: BaseColorPalette;
+    /** 红色系 */
+    red: BaseColorPalette;
+    /** 橙色系 */
+    orange: BaseColorPalette;
+    /** 青色系 */
+    cyan: BaseColorPalette;
+}
+interface ColorTokens {
+    /** Neutral 中性色系统（10 级灰度） */
+    neutral: {
+        /** 最浅 - 纯白 */
+        1: string;
+        /** 极浅灰 - 背景色 */
+        2: string;
+        /** 浅灰 - 次级背景 */
+        3: string;
+        /** 浅中灰 - 边框浅色 */
+        4: string;
+        /** 中灰 - 边框默认 */
+        5: string;
+        /** 中深灰 - 禁用文本 */
+        6: string;
+        /** 深灰 - 次要文本 */
+        7: string;
+        /** 深灰 - 主要文本 */
+        8: string;
+        /** 极深灰 - 强调文本 */
+        9: string;
+        /** 最深 - 接近黑 */
+        10: string;
+    };
+    /** 品牌主题色 */
+    brand: {
+        /** 主题色 - 用于链接、按钮等 */
+        primary: string;
+        /** 主题色 hover 状态 */
+        primaryHover: string;
+        /** 主题色 active 状态 */
+        primaryActive: string;
+        /** 主题色浅色背景 */
+        primaryLight: string;
+    };
+    /** 文本颜色（基于 neutral） */
+    text: {
+        /** 主要文本颜色 */
+        primary: string;
+        /** 次要文本颜色 */
+        secondary: string;
+        /** 第三级文本颜色 */
+        tertiary: string;
+        /** 反色文本（用于深色背景） */
+        inverse: string;
+    };
+    /** 背景颜色（基于 neutral） */
+    background: {
+        /** 基础背景色 */
+        base: string;
+        /** 提升的背景色（卡片等） */
+        elevated: string;
+        /** 遮罩背景色 */
+        overlay: string;
+    };
+    /** 边框颜色（基于 neutral） */
+    border: {
+        /** 浅色边框 - 极浅 */
+        subtle: string;
+        /** 默认边框颜色 - 浅灰色 */
+        default: string;
+        /** 深色边框 - 深灰色 */
+        strong: string;
+    };
+    /** 代码相关颜色 */
+    code: {
+        /** 行内代码背景色 */
+        inlineBackground: string;
+        /** 行内代码文本颜色 */
+        inlineText: string;
+        /** 代码块背景色 */
+        blockBackground: string;
+        /** 代码块文本颜色 */
+        blockText: string;
+        /** 代码块头部背景色 */
+        headerBackground: string;
+    };
+    /** 状态颜色 */
+    status: {
+        /** 待处理状态 */
+        pending: string;
+        /** 已完成状态 */
+        completed: string;
+    };
+    /** 交互元素颜色 */
+    interactive: {
+        /** 链接颜色 */
+        link: string;
+        /** 链接 hover 颜色 */
+        linkHover: string;
+        /** 链接访问过的颜色 */
+        linkVisited: string;
+        /** 选中状态（checkbox 等） */
+        checked: string;
+    };
+}
+
+/**
+ * 字体 Token 类型定义
+ *
+ * 注意：具体值待讨论确定后再填充
+ */
+interface TypographyTokens {
+    /** 字体族 */
+    fontFamily: {
+        /** 基础字体族 */
+        base: string;
+        /** 等宽字体族 */
+        mono: string;
+    };
+    /** 字体大小 */
+    fontSize: {
+        /** 极小字体 */
+        xs: string;
+        /** 小字体 */
+        sm: string;
+        /** 基础字体大小 */
+        base: string;
+        /** 中等字体 */
+        md: string;
+        /** 大字体 */
+        lg: string;
+        /** 标题字体大小 */
+        heading: {
+            h1: string;
+            h2: string;
+            h3: string;
+            h4: string;
+            h5: string;
+            h6: string;
+        };
+    };
+    /** 字重 */
+    fontWeight: {
+        /** 正常字重 */
+        normal: number;
+        /** 中等字重 */
+        medium: number;
+        /** 半粗字重 */
+        semibold: number;
+        /** 粗体字重 */
+        bold: number;
+    };
+    /** 行高 */
+    lineHeight: {
+        /** 紧密行高 */
+        tight: number;
+        /** 正常行高 */
+        normal: number;
+        /** 宽松行高 */
+        relaxed: number;
+    };
+}
+
+/**
+ * 间距 Token 类型定义
+ *
+ * 注意：具体值待讨论确定后再填充
+ */
+interface SpacingTokens {
+    /** 极小间距 */
+    xs: string;
+    /** 小间距 */
+    sm: string;
+    /** 中间距 */
+    md: string;
+    /** 大间距 */
+    lg: string;
+    /** 超大间距 */
+    xl: string;
+}
+
+/**
+ * 边框 Token 类型定义
+ */
+interface BorderTokens {
+    /** 圆角 */
+    radius: {
+        /** 小圆角 */
+        sm: string;
+        /** 中等圆角 */
+        md: string;
+        /** 大圆角 */
+        lg: string;
+    };
+}
+
+/**
+ * 阴影 Token 类型定义
+ *
+ * 注意：如果不需要阴影可以删除此文件
+ */
+interface ShadowTokens {
+    /** 小阴影 */
+    sm: string;
+    /** 中等阴影 */
+    md: string;
+    /** 大阴影 */
+    lg: string;
+}
+
+/**
+ * 动画 Token 类型定义
+ */
+interface AnimationTokens {
+    /** 动画持续时间 */
+    duration: {
+        /** 快速动画 */
+        fast: string;
+        /** 正常动画 */
+        normal: string;
+        /** 慢速动画 */
+        slow: string;
+    };
+    /** 缓动函数 */
+    easing: {
+        /** 缓入缓出 */
+        easeInOut: string;
+        /** 缓出 */
+        easeOut: string;
+    };
+}
+
+/**
+ * Token 系统主入口
+ *
+ * 定义完整的设计 Token 类型
+ */
+
+/**
+ * 完整的设计 Token 类型
+ */
+interface DesignTokens {
+    /** 基础色系统 - 各种颜色的完整色阶 */
+    baseColors: BaseColors;
+    /** 颜色系统 */
+    color: ColorTokens;
+    /** 字体系统 */
+    typography: TypographyTokens;
+    /** 间距系统 */
+    spacing: SpacingTokens;
+    /** 边框系统 */
+    border: BorderTokens;
+    /** 阴影系统 */
+    shadow: ShadowTokens;
+    /** 动画系统 */
+    animation: AnimationTokens;
+}
+
+/**
+ * 默认主题值定义
+ */
+
+declare const defaultTheme: DesignTokens;
+
+/**
+ * 深色主题值定义
+ */
+
+declare const darkTheme: DesignTokens;
+
+/**
+ * 从 Token 生成 CSS Variables
+ */
+
+interface GenerateCSSVarsOptions {
+    /** CSS Variables 前缀，默认 'incremark' */
+    prefix?: string;
+    /** CSS 选择器，默认 ':root' */
+    selector?: string;
+}
+/**
+ * 从 DesignTokens 生成 CSS Variables 字符串
+ *
+ * @example
+ * ```typescript
+ * const cssVars = generateCSSVars(defaultTheme, {
+ *   prefix: 'incremark',
+ *   selector: ':root'
+ * })
+ * // 输出:
+ * // :root {
+ * //   --incremark-color-text-primary: #1f2328;
+ * //   ...
+ * // }
+ * ```
+ */
+declare function generateCSSVars(tokens: DesignTokens, options?: GenerateCSSVarsOptions): string;
+
+/**
+ * 深度合并主题，支持部分替换
+ */
+
+/**
+ * 合并主题，支持部分替换
+ *
+ * @example
+ * ```typescript
+ * const customTheme = mergeTheme(defaultTheme, {
+ *   color: {
+ *     text: {
+ *       primary: '#custom-color'
+ *     }
+ *   }
+ * })
+ * // 只替换 text.primary，其他保持默认值
+ * ```
+ */
+declare function mergeTheme(base: DesignTokens, override: Partial<DesignTokens>): DesignTokens;
+
+/**
+ * 应用主题到 DOM 元素
+ */
+
+/**
+ * 应用主题到 DOM 元素
+ *
+ * @param element - 目标元素，默认为 document.documentElement
+ * @param theme - 主题配置，可以是：
+ *   - 字符串：'default' | 'dark'
+ *   - 完整主题对象：DesignTokens
+ *   - 部分主题对象：Partial<DesignTokens>（会合并到默认主题）
+ *
+ * @example
+ * ```typescript
+ * // 使用预设主题（通过类名切换）
+ * applyTheme(containerElement, 'dark')  // 添加 .theme-dark 类
+ * applyTheme(containerElement, 'default')  // 移除 .theme-dark 类
+ *
+ * // 使用自定义主题（通过 inline style 设置 CSS 变量）
+ * applyTheme(containerElement, {
+ *   color: {
+ *     brand: {
+ *       primary: '#8b5cf6'
+ *     }
+ *   }
+ * })
+ * ```
+ */
+declare function applyTheme(element: (HTMLElement | Document) | undefined, theme: 'default' | 'dark' | DesignTokens | Partial<DesignTokens>): void;
+
+export { type AnimationTokens, type BorderTokens, type ColorTokens, type DesignTokens, type GenerateCSSVarsOptions, type ShadowTokens, type SpacingTokens, type DesignTokens as ThemeTokens, type TypographyTokens, applyTheme, darkTheme, defaultTheme, generateCSSVars, mergeTheme };