@incremark/theme 0.3.10 → 0.4.0-alpha.2

package/dist/index.d.ts

@@ -2,9 +2,26 @@
  * 颜色 Token 类型定义
  */
 /**
- * 基础色系统 - 包含各种颜色的完整色阶
+ * 交互状态颜色
  */
-interface BaseColorPalette {
+interface ColorStates {
+    /** 主色（通常使用色阶 6） */
+    primary: string;
+    /** hover 状态（通常使用色阶 7） */
+    hover: string;
+    /** active/pressed 状态（通常使用色阶 8） */
+    active: string;
+    /** 浅色背景（通常使用色阶 2） */
+    light: string;
+    /** 更浅的背景（通常使用色阶 1） */
+    lighter: string;
+    /** 深色背景（通常使用色阶 9） */
+    dark: string;
+}
+/**
+ * 基础色系统 - 包含各种颜色的完整色阶和交互状态
+ */
+interface BaseColorPalette extends ColorStates {
     /** 10 级色阶 */
     1: string;
     2: string;
@@ -20,6 +37,8 @@ interface BaseColorPalette {
 interface BaseColors {
     /** 蓝色系 */
     blue: BaseColorPalette;
+    /** 深青色系 */
+    teal: BaseColorPalette;
     /** 紫色系 */
     purple: BaseColorPalette;
     /** 绿色系 */
@@ -30,6 +49,8 @@ interface BaseColors {
     orange: BaseColorPalette;
     /** 青色系 */
     cyan: BaseColorPalette;
+    /** 靛蓝 */
+    indigo: BaseColorPalette;
 }
 interface ColorTokens {
     /** Neutral 中性色系统（10 级灰度） */
@@ -57,6 +78,17 @@ interface ColorTokens {
     };
     /** 品牌主题色 */
     brand: {
+        /** 色阶 1-10（从浅到深） */
+        1: string;
+        2: string;
+        3: string;
+        4: string;
+        5: string;
+        6: string;
+        7: string;
+        8: string;
+        9: string;
+        10: string;
         /** 主题色 - 用于链接、按钮等 */
         primary: string;
         /** 主题色 hover 状态 */
@@ -221,15 +253,36 @@ interface BorderTokens {
 /**
  * 阴影 Token 类型定义
  *
- * 注意：如果不需要阴影可以删除此文件
+ * 阴影使用深蓝色基底 rgba(0, 19, 48, ...) 而非纯黑，更有质感
  */
+/** 方向性阴影 */
+interface DirectionalShadow {
+    /** 向下投影 */
+    down: string;
+    /** 向上投影 */
+    up: string;
+    /** 向左投影 */
+    left: string;
+    /** 向右投影 */
+    right: string;
+}
 interface ShadowTokens {
-    /** 小阴影 */
+    /** 小阴影 - 用于按钮、卡片等轻微层级 */
     sm: string;
-    /** 中等阴影 */
+    /** 中等阴影 - 用于下拉框、弹出层等 */
     md: string;
-    /** 大阴影 */
+    /** 大阴影 - 用于模态框、侧边栏等 */
     lg: string;
+    /** 居中阴影 - 四周均匀 */
+    center: string;
+    /** 一级方向性阴影 - 轻量 */
+    level1: DirectionalShadow;
+    /** 二级方向性阴影 - 中等 */
+    level2: DirectionalShadow;
+    /** 三级方向性阴影 - 强调 */
+    level3: DirectionalShadow;
+    /** 品牌色卡片阴影 */
+    brandCard: string;
 }
 
 /**
@@ -292,6 +345,38 @@ declare const defaultTheme: DesignTokens;
 
 declare const darkTheme: DesignTokens;
 
+/**
+ * 主题导出
+ */
+
+/**
+ * 创建自定义主题
+ *
+ * @param brandColor 品牌主色（hex 格式），如果不提供则使用默认的 indigo
+ * @returns 自定义主题
+ *
+ * @example
+ * ```typescript
+ * // 使用默认主题（indigo）
+ * import { defaultTheme } from '@incremark/theme'
+ *
+ * // 自定义品牌色
+ * import { createTheme } from '@incremark/theme'
+ * const purpleTheme = createTheme('#a855f7')
+ *
+ * // 运行时切换
+ * const myTheme = createTheme(userSettings.brandColor)
+ * ```
+ */
+declare function createTheme(brandColor?: string): DesignTokens;
+/**
+ * 创建深色主题
+ *
+ * @param brandColor 品牌主色（hex 格式），如果不提供则使用默认的较亮 indigo
+ * @returns 深色主题
+ */
+declare function createDarkTheme(brandColor?: string): DesignTokens;
+
 /**
  * 从 Token 生成 CSS Variables
  */
@@ -372,4 +457,4 @@ declare function mergeTheme(base: DesignTokens, override: Partial<DesignTokens>)
  */
 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 };
+export { type AnimationTokens, type BorderTokens, type ColorTokens, type DesignTokens, type GenerateCSSVarsOptions, type ShadowTokens, type SpacingTokens, type DesignTokens as ThemeTokens, type TypographyTokens, applyTheme, createDarkTheme, createTheme, darkTheme, defaultTheme, generateCSSVars, mergeTheme };

package/dist/index.js

@@ -1,115 +1,46 @@
-import { generateBrand } from '@incremark/colors';
+import { generateColorSystem } from '@incremark/colors';
 
-// src/themes/default.ts
-var brandColors = generateBrand("#3b82f6");
+// src/themes/index.ts
+var colorBlue = generateColorSystem("#3b82f6");
+var colorPurple = generateColorSystem("#a855f7");
+var colorGreen = generateColorSystem("#10b981");
+var colorRed = generateColorSystem("#ef4444");
+var colorOrange = generateColorSystem("#f97316");
+var colorCyan = generateColorSystem("#06b6d4");
+var colorTeal = generateColorSystem("#0D9488");
+var colorIndigo = generateColorSystem("#5776ff");
 var neutralSeries = {
   1: "#ffffff",
-  2: "#f8f9fc",
-  // 稍微偏蓝一点
-  3: "#f1f3f8",
-  // 稍微偏蓝
-  4: "#e2e5ec",
-  // 稍微调整
-  5: "#cdd1da",
-  // 稍微调整
-  6: "#9ca4b1",
-  // 稍微调整
-  7: "#677284",
-  // 稍微调整
-  8: "#34435a",
-  // 稍微偏蓝
-  9: "#011431",
-  // 稍微调整
-  10: "#01122d"
-  // 稍微调整
+  2: "#fafbfc",
+  // 极浅背景
+  3: "#f3f4f6",
+  // hover 背景（加深）
+  4: "#e5e7eb",
+  // active/selected 背景（加深）
+  5: "#d1d5db",
+  // 边框色（加深）
+  6: "#9ca3af",
+  // 次要文字
+  7: "#6b7280",
+  // 主要文字
+  8: "#374151",
+  // 深色文字
+  9: "#1f2937",
+  // 代码块背景
+  10: "#111827"
+  // 最深色
 };
-var baseBlue = generateBrand("#3b82f6");
-var basePurple = generateBrand("#a855f7");
-var baseGreen = generateBrand("#10b981");
-var baseRed = generateBrand("#ef4444");
-var baseOrange = generateBrand("#f97316");
-var baseCyan = generateBrand("#06b6d4");
 var defaultTheme = {
   // ============ 基础色系统 ============
   baseColors: {
-    blue: {
-      1: baseBlue.palette[1],
-      2: baseBlue.palette[2],
-      3: baseBlue.palette[3],
-      4: baseBlue.palette[4],
-      5: baseBlue.palette[5],
-      6: baseBlue.palette[6],
-      // 主色
-      7: baseBlue.palette[7],
-      8: baseBlue.palette[8],
-      9: baseBlue.palette[9],
-      10: baseBlue.palette[10]
-    },
-    purple: {
-      1: basePurple.palette[1],
-      2: basePurple.palette[2],
-      3: basePurple.palette[3],
-      4: basePurple.palette[4],
-      5: basePurple.palette[5],
-      6: basePurple.palette[6],
-      // 主色
-      7: basePurple.palette[7],
-      8: basePurple.palette[8],
-      9: basePurple.palette[9],
-      10: basePurple.palette[10]
-    },
-    green: {
-      1: baseGreen.palette[1],
-      2: baseGreen.palette[2],
-      3: baseGreen.palette[3],
-      4: baseGreen.palette[4],
-      5: baseGreen.palette[5],
-      6: baseGreen.palette[6],
-      // 主色
-      7: baseGreen.palette[7],
-      8: baseGreen.palette[8],
-      9: baseGreen.palette[9],
-      10: baseGreen.palette[10]
-    },
-    red: {
-      1: baseRed.palette[1],
-      2: baseRed.palette[2],
-      3: baseRed.palette[3],
-      4: baseRed.palette[4],
-      5: baseRed.palette[5],
-      6: baseRed.palette[6],
-      // 主色
-      7: baseRed.palette[7],
-      8: baseRed.palette[8],
-      9: baseRed.palette[9],
-      10: baseRed.palette[10]
-    },
-    orange: {
-      1: baseOrange.palette[1],
-      2: baseOrange.palette[2],
-      3: baseOrange.palette[3],
-      4: baseOrange.palette[4],
-      5: baseOrange.palette[5],
-      6: baseOrange.palette[6],
-      // 主色
-      7: baseOrange.palette[7],
-      8: baseOrange.palette[8],
-      9: baseOrange.palette[9],
-      10: baseOrange.palette[10]
-    },
-    cyan: {
-      1: baseCyan.palette[1],
-      2: baseCyan.palette[2],
-      3: baseCyan.palette[3],
-      4: baseCyan.palette[4],
-      5: baseCyan.palette[5],
-      6: baseCyan.palette[6],
-      // 主色
-      7: baseCyan.palette[7],
-      8: baseCyan.palette[8],
-      9: baseCyan.palette[9],
-      10: baseCyan.palette[10]
-    }
+    blue: colorBlue,
+    teal: colorTeal,
+    purple: colorPurple,
+    green: colorGreen,
+    red: colorRed,
+    orange: colorOrange,
+    cyan: colorCyan,
+    indigo: colorIndigo
   },
   color: {
     // ============ Neutral 中性色系统 ============
@@ -125,12 +56,26 @@ var defaultTheme = {
       9: neutralSeries[9],
       10: neutralSeries[10]
     },
-    // ============ 品牌主题色（自动生成）============
+    // ============ 品牌主题色（引用 indigo）============
     brand: {
-      primary: brandColors.primary,
-      primaryHover: brandColors.hover,
-      primaryActive: brandColors.active,
-      primaryLight: brandColors.light
+      1: colorIndigo[1],
+      2: colorIndigo[2],
+      3: colorIndigo[3],
+      4: colorIndigo[4],
+      5: colorIndigo[5],
+      6: colorIndigo[6],
+      7: colorIndigo[7],
+      8: colorIndigo[8],
+      9: colorIndigo[9],
+      10: colorIndigo[10],
+      primary: colorIndigo.primary,
+      // indigo[6]
+      primaryHover: colorIndigo.hover,
+      // indigo[7]
+      primaryActive: colorIndigo.active,
+      // indigo[8]
+      primaryLight: colorIndigo.light
+      // indigo[2]
     },
     // ============ 语义化颜色（基于 neutral） ============
     text: {
@@ -173,20 +118,20 @@ var defaultTheme = {
       // border 使用通用的 border.strong，不单独定义
     },
     status: {
-      pending: basePurple.palette[6],
+      pending: colorPurple.primary,
       // 使用紫色系主色
-      completed: baseGreen.palette[6]
+      completed: colorGreen.primary
       // 使用绿色系主色
     },
     // ============ 交互元素颜色 ============
     interactive: {
-      link: brandColors.primary,
-      // 使用品牌主色
-      linkHover: brandColors.hover,
-      // 使用 hover 变体
-      linkVisited: basePurple.palette[7],
+      link: colorIndigo.primary,
+      // 使用 indigo 主色
+      linkHover: colorIndigo.hover,
+      // 使用 indigo hover
+      linkVisited: colorPurple.dark,
       // 使用紫色系深色表示访问过
-      checked: baseGreen.palette[6]
+      checked: colorGreen.primary
       // 使用绿色系主色表示选中
     }
   },
@@ -196,8 +141,8 @@ var defaultTheme = {
       mono: "'Fira Code', 'SF Mono', 'Monaco', 'Consolas', monospace"
     },
     fontSize: {
-      xs: "11px",
-      sm: "12px",
+      xs: "12px",
+      sm: "13px",
       base: "14px",
       md: "16px",
       lg: "18px",
@@ -237,9 +182,34 @@ var defaultTheme = {
     }
   },
   shadow: {
-    sm: "0 1px 2px rgba(0, 0, 0, 0.05)",
-    md: "0 4px 6px rgba(0, 0, 0, 0.1)",
-    lg: "0 10px 15px rgba(0, 0, 0, 0.1)"
+    // 基础阴影（使用深蓝色基底，更有质感）
+    sm: "0 2px 4px rgba(0, 19, 48, 0.06)",
+    md: "0 2px 12px rgba(0, 19, 48, 0.08)",
+    lg: "0 2px 16px rgba(0, 19, 48, 0.12)",
+    center: "0 0 8px rgba(0, 19, 48, 0.08)",
+    // 方向性阴影 - 一级（轻量）
+    level1: {
+      down: "0 2px 4px rgba(0, 19, 48, 0.06)",
+      up: "0 -2px 4px rgba(0, 19, 48, 0.06)",
+      left: "-2px 0 8px rgba(0, 19, 48, 0.06)",
+      right: "2px 0 8px rgba(0, 19, 48, 0.06)"
+    },
+    // 方向性阴影 - 二级（中等）
+    level2: {
+      down: "0 2px 12px rgba(0, 19, 48, 0.08)",
+      up: "0 -2px 12px rgba(0, 19, 48, 0.08)",
+      left: "-2px 0 12px rgba(0, 19, 48, 0.08)",
+      right: "2px 0 12px rgba(0, 19, 48, 0.08)"
+    },
+    // 方向性阴影 - 三级（强调）
+    level3: {
+      down: "0 2px 16px rgba(0, 19, 48, 0.12)",
+      up: "0 -2px 16px rgba(0, 19, 48, 0.12)",
+      left: "-2px 0 16px rgba(0, 19, 48, 0.12)",
+      right: "2px 0 16px rgba(0, 19, 48, 0.12)"
+    },
+    // 品牌色卡片阴影
+    brandCard: "0 2px 12px rgba(1, 69, 197, 0.12)"
   },
   animation: {
     duration: {
@@ -253,9 +223,9 @@ var defaultTheme = {
     }
   }
 };
-var darkBrandColors = generateBrand("#60a5fa");
-var darkBasePurple = generateBrand("#c084fc");
-var darkBaseGreen = generateBrand("#34d399");
+var darkColorIndigo = generateColorSystem("#7D95FF");
+var darkColorPurple = generateColorSystem("#c084fc");
+var darkColorGreen = generateColorSystem("#34d399");
 var darkNeutralSeries = {
   1: "#0a1628",
   2: "#162033",
@@ -270,8 +240,18 @@ var darkNeutralSeries = {
 };
 var darkTheme = {
   ...defaultTheme,
-  // 继承亮色主题的基础色系统（baseColors 保持一致）
-  baseColors: defaultTheme.baseColors,
+  // ============ 基础色系统 ============
+  baseColors: {
+    blue: defaultTheme.baseColors.blue,
+    teal: defaultTheme.baseColors.teal,
+    indigo: darkColorIndigo,
+    purple: darkColorPurple,
+    green: darkColorGreen,
+    // 其他颜色继承默认主题
+    red: defaultTheme.baseColors.red,
+    orange: defaultTheme.baseColors.orange,
+    cyan: defaultTheme.baseColors.cyan
+  },
   color: {
     // ============ Neutral 中性色系统（暗色模式反转） ============
     neutral: {
@@ -286,12 +266,26 @@ var darkTheme = {
       9: darkNeutralSeries[9],
       10: darkNeutralSeries[10]
     },
-    // ============ 品牌主题色（暗色模式自动生成）============
+    // ============ 品牌主题色（暗色模式引用 indigo）============
     brand: {
-      primary: darkBrandColors.primary,
-      primaryHover: darkBrandColors.hover,
-      primaryActive: darkBrandColors.active,
-      primaryLight: darkBrandColors.light
+      1: darkColorIndigo[1],
+      2: darkColorIndigo[2],
+      3: darkColorIndigo[3],
+      4: darkColorIndigo[4],
+      5: darkColorIndigo[5],
+      6: darkColorIndigo[6],
+      7: darkColorIndigo[7],
+      8: darkColorIndigo[8],
+      9: darkColorIndigo[9],
+      10: darkColorIndigo[10],
+      primary: darkColorIndigo.primary,
+      // indigo[6]
+      primaryHover: darkColorIndigo.hover,
+      // indigo[7]
+      primaryActive: darkColorIndigo.active,
+      // indigo[8]
+      primaryLight: darkColorIndigo[9]
+      // 暗色模式用深色调
     },
     // ============ 语义化颜色 ============
     text: {
@@ -333,20 +327,20 @@ var darkTheme = {
       // border 使用通用的 border.strong，不单独定义
     },
     status: {
-      pending: darkBasePurple.palette[6],
+      pending: darkColorPurple.primary,
       // 使用暗色紫色系主色
-      completed: darkBaseGreen.palette[6]
+      completed: darkColorGreen.primary
       // 使用暗色绿色系主色
     },
     // ============ 交互元素颜色 ============
     interactive: {
-      link: darkBrandColors.primary,
-      // 使用暗色品牌主色
-      linkHover: darkBrandColors.hover,
+      link: darkColorIndigo.primary,
+      // 使用暗色 indigo 主色
+      linkHover: darkColorIndigo.hover,
       // 使用 hover 变体
-      linkVisited: darkBasePurple.palette[4],
+      linkVisited: darkColorPurple.lighter,
       // 使用暗色紫色系浅色
-      checked: darkBaseGreen.palette[6]
+      checked: darkColorGreen.primary
       // 使用暗色绿色系主色
     }
   },
@@ -358,6 +352,69 @@ var darkTheme = {
   animation: defaultTheme.animation
 };
 
+// src/themes/index.ts
+function createTheme(brandColor) {
+  const colorSystem = brandColor ? generateColorSystem(brandColor) : defaultTheme.baseColors.indigo;
+  return {
+    ...defaultTheme,
+    color: {
+      ...defaultTheme.color,
+      brand: {
+        1: colorSystem[1],
+        2: colorSystem[2],
+        3: colorSystem[3],
+        4: colorSystem[4],
+        5: colorSystem[5],
+        6: colorSystem[6],
+        7: colorSystem[7],
+        8: colorSystem[8],
+        9: colorSystem[9],
+        10: colorSystem[10],
+        primary: colorSystem.primary,
+        primaryHover: colorSystem.hover,
+        primaryActive: colorSystem.active,
+        primaryLight: colorSystem.light
+      },
+      // 同步更新 link 颜色
+      interactive: {
+        ...defaultTheme.color.interactive,
+        link: colorSystem.primary,
+        linkHover: colorSystem.hover
+      }
+    }
+  };
+}
+function createDarkTheme(brandColor) {
+  const defaultDarkColor = brandColor ? generateColorSystem(brandColor) : darkTheme.baseColors.indigo;
+  return {
+    ...darkTheme,
+    color: {
+      ...darkTheme.color,
+      brand: {
+        1: defaultDarkColor[1],
+        2: defaultDarkColor[2],
+        3: defaultDarkColor[3],
+        4: defaultDarkColor[4],
+        5: defaultDarkColor[5],
+        6: defaultDarkColor[6],
+        7: defaultDarkColor[7],
+        8: defaultDarkColor[8],
+        9: defaultDarkColor[9],
+        10: defaultDarkColor[10],
+        primary: defaultDarkColor.primary,
+        primaryHover: defaultDarkColor.hover,
+        primaryActive: defaultDarkColor.active,
+        primaryLight: defaultDarkColor[9]
+      },
+      interactive: {
+        ...darkTheme.color.interactive,
+        link: defaultDarkColor.primary,
+        linkHover: defaultDarkColor.hover
+      }
+    }
+  };
+}
+
 // src/utils/generate-css-vars.ts
 function objectToCSSVars(obj, prefix, result = []) {
   for (const [key, value] of Object.entries(obj)) {
@@ -435,6 +492,6 @@ function applyTheme(element = document, theme) {
   target.style.cssText = cssVars;
 }
 
-export { applyTheme, darkTheme, defaultTheme, generateCSSVars, mergeTheme };
+export { applyTheme, createDarkTheme, createTheme, darkTheme, defaultTheme, generateCSSVars, mergeTheme };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map