@incremark/colors 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.md

@@ -0,0 +1,177 @@
+# @incremark/colors
+
+Incremark 颜色生成工具 - 自动生成色阶和主题色
+
+## 特性
+
+- 🎨 **自动生成色阶** - 基于单个颜色生成 10 级色阶
+- 🌈 **品牌色系统** - 自动生成 primary、hover、active、light 等状态色
+- 🎯 **零依赖** - 纯 TypeScript 实现，无外部依赖
+- 📦 **轻量级** - 体积小，性能好
+- 🔧 **灵活易用** - 简单的 API，易于集成
+
+## 算法说明
+
+本包参考了 [Arco Design](https://arco.design/palette/list) 的颜色生成原理，基于 HSV 色彩空间实现：
+
+- **色阶 1-5**：提高明度，降低饱和度（更浅的颜色）
+- **色阶 6**：主色（基础颜色）
+- **色阶 7-10**：降低明度，提高饱和度（更深的颜色）
+
+## 安装
+
+```bash
+pnpm add @incremark/colors
+```
+
+## 基础用法
+
+### 生成 10 级色阶
+
+```typescript
+import { generatePalette } from '@incremark/colors'
+
+// 基于蓝色生成 10 级色阶
+const palette = generatePalette('#3b82f6')
+console.log(palette)
+// [
+//   '#E8F3FF',  // 色阶 1 - 最浅
+//   '#C5E2FF',  // 色阶 2
+//   '#A3D1FF',  // 色阶 3
+//   '#81C0FF',  // 色阶 4
+//   '#5FAFFF',  // 色阶 5
+//   '#3B82F6',  // 色阶 6 - 主色
+//   '#2D6BDE',  // 色阶 7
+//   '#1F54C6',  // 色阶 8
+//   '#113DAE',  // 色阶 9
+//   '#032696'   // 色阶 10 - 最深
+// ]
+```
+
+### 生成品牌色系统
+
+```typescript
+import { generateBrand } from '@incremark/colors'
+
+const brand = generateBrand('#3b82f6')
+console.log(brand)
+// {
+//   primary: '#3B82F6',       // 主色
+//   hover: '#2D6BDE',         // hover 状态
+//   active: '#1F54C6',        // active/pressed 状态
+//   light: '#C5E2FF',         // 浅色背景
+//   palette: {                // 完整 10 级色阶
+//     1: '#E8F3FF',
+//     2: '#C5E2FF',
+//     // ...
+//     10: '#032696'
+//   }
+// }
+```
+
+### 使用预设颜色
+
+```typescript
+import { presets } from '@incremark/colors'
+
+console.log(presets.blue.primary)    // '#3B82F6'
+console.log(presets.purple.primary)  // '#A855F7'
+console.log(presets.green.primary)   // '#10B981'
+
+// 可用的预设：
+// blue, purple, green, orange, red, cyan, pink, indigo, yellow, teal
+```
+
+## 高级用法
+
+### 生成指定色阶
+
+```typescript
+import { generateColorAt } from '@incremark/colors'
+
+// 生成第 3 级色阶（较浅）
+const light = generateColorAt('#3b82f6', 3)
+
+// 生成第 8 级色阶（较深）
+const dark = generateColorAt('#3b82f6', 8)
+```
+
+### 颜色空间转换
+
+```typescript
+import { hexToRgb, rgbToHex, hexToHsv, hsvToHex } from '@incremark/colors'
+
+// HEX 转 RGB
+const rgb = hexToRgb('#3b82f6')
+// { r: 59, g: 130, b: 246 }
+
+// RGB 转 HEX
+const hex = rgbToHex({ r: 59, g: 130, b: 246 })
+// '#3B82F6'
+
+// HEX 转 HSV
+const hsv = hexToHsv('#3b82f6')
+// { h: 217, s: 76, v: 96 }
+
+// HSV 转 HEX
+const hex2 = hsvToHex({ h: 217, s: 76, v: 96 })
+// '#3B82F6'
+```
+
+## 在主题系统中使用
+
+```typescript
+import { generateBrand } from '@incremark/colors'
+
+const brandColors = generateBrand('#3b82f6')
+
+export const theme = {
+  colors: {
+    brand: {
+      primary: brandColors.primary,
+      hover: brandColors.hover,
+      active: brandColors.active,
+      light: brandColors.light
+    },
+    // 或者使用完整色阶
+    blue: brandColors.palette
+  }
+}
+```
+
+## API 参考
+
+### `generatePalette(baseColor: string): string[]`
+
+生成完整的 10 级色阶
+
+- **参数**：`baseColor` - 基础颜色（HEX 格式）
+- **返回**：10 级色阶数组（索引 0-9 对应色阶 1-10）
+
+### `generateBrand(primaryColor: string): BrandColors`
+
+生成品牌色系统
+
+- **参数**：`primaryColor` - 品牌主色（HEX 格式）
+- **返回**：包含 primary、hover、active、light 和完整色阶的对象
+
+### `generateColorAt(baseColor: string, index: number): string`
+
+生成指定色阶
+
+- **参数**：
+  - `baseColor` - 基础颜色（HEX 格式）
+  - `index` - 色阶索引（1-10，6 为主色）
+- **返回**：指定色阶的颜色（HEX 格式）
+
+## 最佳实践
+
+1. **选择合适的基础色**：建议选择饱和度适中的颜色作为基础色（色阶 6）
+2. **保持一致性**：在整个项目中使用相同的品牌色生成逻辑
+3. **考虑可访问性**：确保生成的颜色对比度符合 WCAG 标准
+4. **暗色模式适配**：对于暗色模式，可以选择稍微调亮的基础色
+
+## License
+
+MIT © [Incremark](https://www.incremark.com/)
+

package/dist/index.d.ts

@@ -0,0 +1,278 @@
+/**
+ * 颜色生成工具
+ *
+ * 参考 Arco Design 的颜色生成算法，重新实现
+ * 基于 HSV 色彩空间生成 10 级色阶
+ *
+ * @see https://arco.design/palette/list
+ */
+/**
+ * HSV 颜色模型
+ */
+interface HSV {
+    h: number;
+    s: number;
+    v: number;
+}
+/**
+ * RGB 颜色模型
+ */
+interface RGB {
+    r: number;
+    g: number;
+    b: number;
+}
+/**
+ * HEX 转 RGB
+ */
+declare function hexToRgb(hex: string): RGB;
+/**
+ * RGB 转 HEX
+ */
+declare function rgbToHex(rgb: RGB): string;
+/**
+ * RGB 转 HSV
+ */
+declare function rgbToHsv(rgb: RGB): HSV;
+/**
+ * HSV 转 RGB
+ */
+declare function hsvToRgb(hsv: HSV): RGB;
+/**
+ * HEX 转 HSV
+ */
+declare function hexToHsv(hex: string): HSV;
+/**
+ * HSV 转 HEX
+ */
+declare function hsvToHex(hsv: HSV): string;
+/**
+ * 生成单个色阶
+ *
+ * 基于 Arco Design 的算法原理：
+ * - 色阶 1-5: 提高明度，降低饱和度（更浅）
+ * - 色阶 6: 主色
+ * - 色阶 7-10: 降低明度，提高饱和度（更深）
+ *
+ * @param baseColor 基础颜色（hex）
+ * @param index 色阶索引（1-10，6 为主色）
+ */
+declare function generateColorAt(baseColor: string, index: number): string;
+/**
+ * 生成完整的 10 级色阶
+ *
+ * @param baseColor 基础颜色（hex）
+ * @returns 10 级色阶数组，索引 0-9 对应色阶 1-10
+ */
+declare function generatePalette(baseColor: string): string[];
+/**
+ * 生成品牌色系统
+ *
+ * @param primaryColor 品牌主色
+ * @returns 品牌色对象
+ */
+declare function generateBrand(primaryColor: string): {
+    primary: string;
+    hover: string;
+    active: string;
+    light: string;
+    palette: {
+        1: string;
+        2: string;
+        3: string;
+        4: string;
+        5: string;
+        6: string;
+        7: string;
+        8: string;
+        9: string;
+        10: string;
+    };
+};
+/**
+ * 预设品牌色
+ */
+declare const presets: {
+    blue: {
+        primary: string;
+        hover: string;
+        active: string;
+        light: string;
+        palette: {
+            1: string;
+            2: string;
+            3: string;
+            4: string;
+            5: string;
+            6: string;
+            7: string;
+            8: string;
+            9: string;
+            10: string;
+        };
+    };
+    purple: {
+        primary: string;
+        hover: string;
+        active: string;
+        light: string;
+        palette: {
+            1: string;
+            2: string;
+            3: string;
+            4: string;
+            5: string;
+            6: string;
+            7: string;
+            8: string;
+            9: string;
+            10: string;
+        };
+    };
+    green: {
+        primary: string;
+        hover: string;
+        active: string;
+        light: string;
+        palette: {
+            1: string;
+            2: string;
+            3: string;
+            4: string;
+            5: string;
+            6: string;
+            7: string;
+            8: string;
+            9: string;
+            10: string;
+        };
+    };
+    orange: {
+        primary: string;
+        hover: string;
+        active: string;
+        light: string;
+        palette: {
+            1: string;
+            2: string;
+            3: string;
+            4: string;
+            5: string;
+            6: string;
+            7: string;
+            8: string;
+            9: string;
+            10: string;
+        };
+    };
+    red: {
+        primary: string;
+        hover: string;
+        active: string;
+        light: string;
+        palette: {
+            1: string;
+            2: string;
+            3: string;
+            4: string;
+            5: string;
+            6: string;
+            7: string;
+            8: string;
+            9: string;
+            10: string;
+        };
+    };
+    cyan: {
+        primary: string;
+        hover: string;
+        active: string;
+        light: string;
+        palette: {
+            1: string;
+            2: string;
+            3: string;
+            4: string;
+            5: string;
+            6: string;
+            7: string;
+            8: string;
+            9: string;
+            10: string;
+        };
+    };
+    pink: {
+        primary: string;
+        hover: string;
+        active: string;
+        light: string;
+        palette: {
+            1: string;
+            2: string;
+            3: string;
+            4: string;
+            5: string;
+            6: string;
+            7: string;
+            8: string;
+            9: string;
+            10: string;
+        };
+    };
+    indigo: {
+        primary: string;
+        hover: string;
+        active: string;
+        light: string;
+        palette: {
+            1: string;
+            2: string;
+            3: string;
+            4: string;
+            5: string;
+            6: string;
+            7: string;
+            8: string;
+            9: string;
+            10: string;
+        };
+    };
+    yellow: {
+        primary: string;
+        hover: string;
+        active: string;
+        light: string;
+        palette: {
+            1: string;
+            2: string;
+            3: string;
+            4: string;
+            5: string;
+            6: string;
+            7: string;
+            8: string;
+            9: string;
+            10: string;
+        };
+    };
+    teal: {
+        primary: string;
+        hover: string;
+        active: string;
+        light: string;
+        palette: {
+            1: string;
+            2: string;
+            3: string;
+            4: string;
+            5: string;
+            6: string;
+            7: string;
+            8: string;
+            9: string;
+            10: string;
+        };
+    };
+};
+
+export { type HSV, type RGB, generateBrand, generateColorAt, generatePalette, hexToHsv, hexToRgb, hsvToHex, hsvToRgb, presets, rgbToHex, rgbToHsv };

package/dist/index.js

@@ -0,0 +1,164 @@
+// src/index.ts
+function hexToRgb(hex) {
+  const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
+  if (!result) {
+    throw new Error(`Invalid hex color: ${hex}`);
+  }
+  return {
+    r: parseInt(result[1], 16),
+    g: parseInt(result[2], 16),
+    b: parseInt(result[3], 16)
+  };
+}
+function rgbToHex(rgb) {
+  const toHex = (n) => {
+    const hex = Math.round(n).toString(16);
+    return hex.length === 1 ? "0" + hex : hex;
+  };
+  return `#${toHex(rgb.r)}${toHex(rgb.g)}${toHex(rgb.b)}`.toUpperCase();
+}
+function rgbToHsv(rgb) {
+  const r = rgb.r / 255;
+  const g = rgb.g / 255;
+  const b = rgb.b / 255;
+  const max = Math.max(r, g, b);
+  const min = Math.min(r, g, b);
+  const diff = max - min;
+  let h = 0;
+  if (diff !== 0) {
+    if (max === r) {
+      h = 60 * ((g - b) / diff % 6);
+    } else if (max === g) {
+      h = 60 * ((b - r) / diff + 2);
+    } else {
+      h = 60 * ((r - g) / diff + 4);
+    }
+  }
+  if (h < 0) {
+    h += 360;
+  }
+  const s = max === 0 ? 0 : diff / max * 100;
+  const v = max * 100;
+  return { h, s, v };
+}
+function hsvToRgb(hsv) {
+  const h = hsv.h;
+  const s = hsv.s / 100;
+  const v = hsv.v / 100;
+  const c = v * s;
+  const x = c * (1 - Math.abs(h / 60 % 2 - 1));
+  const m = v - c;
+  let r = 0, g = 0, b = 0;
+  if (h >= 0 && h < 60) {
+    r = c;
+    g = x;
+    b = 0;
+  } else if (h >= 60 && h < 120) {
+    r = x;
+    g = c;
+    b = 0;
+  } else if (h >= 120 && h < 180) {
+    r = 0;
+    g = c;
+    b = x;
+  } else if (h >= 180 && h < 240) {
+    r = 0;
+    g = x;
+    b = c;
+  } else if (h >= 240 && h < 300) {
+    r = x;
+    g = 0;
+    b = c;
+  } else {
+    r = c;
+    g = 0;
+    b = x;
+  }
+  return {
+    r: (r + m) * 255,
+    g: (g + m) * 255,
+    b: (b + m) * 255
+  };
+}
+function hexToHsv(hex) {
+  return rgbToHsv(hexToRgb(hex));
+}
+function hsvToHex(hsv) {
+  return rgbToHex(hsvToRgb(hsv));
+}
+function generateColorAt(baseColor, index) {
+  if (index < 1 || index > 10) {
+    throw new Error("Index must be between 1 and 10");
+  }
+  if (index === 6) {
+    return baseColor.toUpperCase();
+  }
+  const hsv = hexToHsv(baseColor);
+  const offset = index - 6;
+  const isLight = offset < 0;
+  const step = Math.abs(offset);
+  let newHsv;
+  if (isLight) {
+    newHsv = {
+      h: hsv.h,
+      s: Math.max(0, hsv.s - step * 15),
+      // 逐步降低饱和度
+      v: Math.min(100, hsv.v + step * 8)
+      // 逐步提高明度
+    };
+  } else {
+    newHsv = {
+      h: hsv.h,
+      s: Math.min(100, hsv.s + step * 5),
+      // 逐步提高饱和度
+      v: Math.max(0, hsv.v - step * 12)
+      // 逐步降低明度
+    };
+  }
+  return hsvToHex(newHsv);
+}
+function generatePalette(baseColor) {
+  return Array.from({ length: 10 }, (_, i) => generateColorAt(baseColor, i + 1));
+}
+function generateBrand(primaryColor) {
+  const palette = generatePalette(primaryColor);
+  return {
+    // 主色（索引 6）
+    primary: palette[5],
+    // hover 状态（索引 7）
+    hover: palette[6],
+    // active/pressed 状态（索引 8）
+    active: palette[7],
+    // 浅色背景（索引 2）
+    light: palette[1],
+    // 完整色阶
+    palette: {
+      1: palette[0],
+      2: palette[1],
+      3: palette[2],
+      4: palette[3],
+      5: palette[4],
+      6: palette[5],
+      7: palette[6],
+      8: palette[7],
+      9: palette[8],
+      10: palette[9]
+    }
+  };
+}
+var presets = {
+  blue: generateBrand("#3b82f6"),
+  purple: generateBrand("#a855f7"),
+  green: generateBrand("#10b981"),
+  orange: generateBrand("#f97316"),
+  red: generateBrand("#ef4444"),
+  cyan: generateBrand("#06b6d4"),
+  pink: generateBrand("#ec4899"),
+  indigo: generateBrand("#6366f1"),
+  yellow: generateBrand("#eab308"),
+  teal: generateBrand("#14b8a6")
+};
+
+export { generateBrand, generateColorAt, generatePalette, hexToHsv, hexToRgb, hsvToHex, hsvToRgb, presets, rgbToHex, rgbToHsv };
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/index.ts"],"names":[],"mappings":"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","file":"index.js","sourcesContent":["/**\n * 颜色生成工具\n * \n * 参考 Arco Design 的颜色生成算法，重新实现\n * 基于 HSV 色彩空间生成 10 级色阶\n * \n * @see https://arco.design/palette/list\n */\n\n/**\n * HSV 颜色模型\n */\nexport interface HSV {\n  h: number  // 色调 0-360\n  s: number  // 饱和度 0-100\n  v: number  // 明度 0-100\n}\n\n/**\n * RGB 颜色模型\n */\nexport interface RGB {\n  r: number  // 红色 0-255\n  g: number  // 绿色 0-255\n  b: number  // 蓝色 0-255\n}\n\n/**\n * HEX 转 RGB\n */\nexport function hexToRgb(hex: string): RGB {\n  const result = /^#?([a-f\\d]{2})([a-f\\d]{2})([a-f\\d]{2})$/i.exec(hex)\n  if (!result) {\n    throw new Error(`Invalid hex color: ${hex}`)\n  }\n  return {\n    r: parseInt(result[1], 16),\n    g: parseInt(result[2], 16),\n    b: parseInt(result[3], 16)\n  }\n}\n\n/**\n * RGB 转 HEX\n */\nexport function rgbToHex(rgb: RGB): string {\n  const toHex = (n: number) => {\n    const hex = Math.round(n).toString(16)\n    return hex.length === 1 ? '0' + hex : hex\n  }\n  return `#${toHex(rgb.r)}${toHex(rgb.g)}${toHex(rgb.b)}`.toUpperCase()\n}\n\n/**\n * RGB 转 HSV\n */\nexport function rgbToHsv(rgb: RGB): HSV {\n  const r = rgb.r / 255\n  const g = rgb.g / 255\n  const b = rgb.b / 255\n\n  const max = Math.max(r, g, b)\n  const min = Math.min(r, g, b)\n  const diff = max - min\n\n  let h = 0\n  if (diff !== 0) {\n    if (max === r) {\n      h = 60 * (((g - b) / diff) % 6)\n    } else if (max === g) {\n      h = 60 * ((b - r) / diff + 2)\n    } else {\n      h = 60 * ((r - g) / diff + 4)\n    }\n  }\n  if (h < 0) {\n    h += 360\n  }\n\n  const s = max === 0 ? 0 : (diff / max) * 100\n  const v = max * 100\n\n  return { h, s, v }\n}\n\n/**\n * HSV 转 RGB\n */\nexport function hsvToRgb(hsv: HSV): RGB {\n  const h = hsv.h\n  const s = hsv.s / 100\n  const v = hsv.v / 100\n\n  const c = v * s\n  const x = c * (1 - Math.abs(((h / 60) % 2) - 1))\n  const m = v - c\n\n  let r = 0, g = 0, b = 0\n  if (h >= 0 && h < 60) {\n    r = c; g = x; b = 0\n  } else if (h >= 60 && h < 120) {\n    r = x; g = c; b = 0\n  } else if (h >= 120 && h < 180) {\n    r = 0; g = c; b = x\n  } else if (h >= 180 && h < 240) {\n    r = 0; g = x; b = c\n  } else if (h >= 240 && h < 300) {\n    r = x; g = 0; b = c\n  } else {\n    r = c; g = 0; b = x\n  }\n\n  return {\n    r: (r + m) * 255,\n    g: (g + m) * 255,\n    b: (b + m) * 255\n  }\n}\n\n/**\n * HEX 转 HSV\n */\nexport function hexToHsv(hex: string): HSV {\n  return rgbToHsv(hexToRgb(hex))\n}\n\n/**\n * HSV 转 HEX\n */\nexport function hsvToHex(hsv: HSV): string {\n  return rgbToHex(hsvToRgb(hsv))\n}\n\n/**\n * 生成单个色阶\n * \n * 基于 Arco Design 的算法原理：\n * - 色阶 1-5: 提高明度，降低饱和度（更浅）\n * - 色阶 6: 主色\n * - 色阶 7-10: 降低明度，提高饱和度（更深）\n * \n * @param baseColor 基础颜色（hex）\n * @param index 色阶索引（1-10，6 为主色）\n */\nexport function generateColorAt(baseColor: string, index: number): string {\n  if (index < 1 || index > 10) {\n    throw new Error('Index must be between 1 and 10')\n  }\n\n  // 索引 6 返回原色\n  if (index === 6) {\n    return baseColor.toUpperCase()\n  }\n\n  const hsv = hexToHsv(baseColor)\n  \n  // 计算偏移量（1-5: 负偏移，7-10: 正偏移）\n  const offset = index - 6\n  const isLight = offset < 0\n  const step = Math.abs(offset)\n\n  let newHsv: HSV\n\n  if (isLight) {\n    // 浅色：提高明度，降低饱和度\n    newHsv = {\n      h: hsv.h,\n      s: Math.max(0, hsv.s - step * 15),      // 逐步降低饱和度\n      v: Math.min(100, hsv.v + step * 8)      // 逐步提高明度\n    }\n  } else {\n    // 深色：降低明度，提高饱和度\n    newHsv = {\n      h: hsv.h,\n      s: Math.min(100, hsv.s + step * 5),     // 逐步提高饱和度\n      v: Math.max(0, hsv.v - step * 12)       // 逐步降低明度\n    }\n  }\n\n  return hsvToHex(newHsv)\n}\n\n/**\n * 生成完整的 10 级色阶\n * \n * @param baseColor 基础颜色（hex）\n * @returns 10 级色阶数组，索引 0-9 对应色阶 1-10\n */\nexport function generatePalette(baseColor: string): string[] {\n  return Array.from({ length: 10 }, (_, i) => generateColorAt(baseColor, i + 1))\n}\n\n/**\n * 生成品牌色系统\n * \n * @param primaryColor 品牌主色\n * @returns 品牌色对象\n */\nexport function generateBrand(primaryColor: string) {\n  const palette = generatePalette(primaryColor)\n  \n  return {\n    // 主色（索引 6）\n    primary: palette[5],\n    // hover 状态（索引 7）\n    hover: palette[6],\n    // active/pressed 状态（索引 8）\n    active: palette[7],\n    // 浅色背景（索引 2）\n    light: palette[1],\n    // 完整色阶\n    palette: {\n      1: palette[0],\n      2: palette[1],\n      3: palette[2],\n      4: palette[3],\n      5: palette[4],\n      6: palette[5],\n      7: palette[6],\n      8: palette[7],\n      9: palette[8],\n      10: palette[9]\n    }\n  }\n}\n\n/**\n * 预设品牌色\n */\nexport const presets = {\n  blue: generateBrand('#3b82f6'),\n  purple: generateBrand('#a855f7'),\n  green: generateBrand('#10b981'),\n  orange: generateBrand('#f97316'),\n  red: generateBrand('#ef4444'),\n  cyan: generateBrand('#06b6d4'),\n  pink: generateBrand('#ec4899'),\n  indigo: generateBrand('#6366f1'),\n  yellow: generateBrand('#eab308'),\n  teal: generateBrand('#14b8a6')\n}\n\n"]}

package/package.json

@@ -0,0 +1,40 @@
+{
+  "name": "@incremark/colors",
+  "version": "0.2.3",
+  "description": "Incremark 颜色生成工具 - 自动生成色阶和主题色",
+  "type": "module",
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    }
+  },
+  "files": [
+    "dist",
+    "README.md"
+  ],
+  "keywords": [
+    "colors",
+    "palette",
+    "theme",
+    "color-generation"
+  ],
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/kingshuaishuai/incremark.git",
+    "directory": "packages/colors"
+  },
+  "homepage": "https://www.incremark.com/",
+  "devDependencies": {
+    "tsup": "^8.0.0",
+    "typescript": "^5.3.0"
+  },
+  "scripts": {
+    "build": "tsup",
+    "dev": "tsup --watch"
+  }
+}