@aviala-design/color 0.2.0 → 0.2.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/README.md CHANGED
@@ -1,8 +1,13 @@
1
- # ArcoDesign Color
1
+ # Aviala Design Color
2
2
 
3
- ArcoDesign Color Utils.
3
+ Aviala Design Color - A powerful color processing utility library.
4
4
 
5
- For a given color, a gradient swatch containing ten colors is generated with an algorithm. This works for both light and dark modes.
5
+ This library provides four core functionalities:
6
+
7
+ 1. **Color Palette Generation**: Generate gradient swatches containing ten colors using algorithms, supporting both light and dark modes.
8
+ 2. **Image Color Extraction**: Extract dominant colors from images for generating matching palettes or theme colors.
9
+ 3. **Interface Color System**: Generate complete interface color systems based on primary colors, including semantic colors (success, warning, error, info).
10
+ 4. **Theme Blending**: Advanced theme blending functionality based on HCT color space with multiple blending modes, supporting complete interface color system generation with brand customization.
6
11
 
7
12
  ## Usage
8
13
 
@@ -11,10 +16,22 @@ npm i @arco-design/color
11
16
  ```
12
17
 
13
18
  ```js
14
- import { generate, getPresetColors } from '@arco-design/color';
19
+ import {
20
+ generate,
21
+ getPresetColors,
22
+ getRgbStr,
23
+ extractColorFromImage,
24
+ generateInterfaceColorSystem,
25
+ generateThemePalette,
26
+ blendInHct,
27
+ rgbToHct,
28
+ hctToRgb
29
+ } from '@aviala-design/color';
15
30
 
31
+ // Generate color palette
16
32
  console.log(generate('#123456'));
17
33
 
34
+ // Get preset colors
18
35
  console.log(getPresetColors());
19
36
  // {
20
37
  // red: {...},
@@ -32,6 +49,30 @@ console.log(getPresetColors());
32
49
  // magenta: {...},
33
50
  // gray: {...}
34
51
  // }
52
+
53
+ // Generate interface color system
54
+ const colorSystem = generateInterfaceColorSystem('#3491FA');
55
+ console.log(colorSystem.success); // Success colors
56
+ console.log(colorSystem.warning); // Warning colors
57
+ console.log(colorSystem.error); // Error colors
58
+ console.log(colorSystem.info); // Info colors
59
+
60
+ // Generate complete theme palette with brand customization
61
+ const themePalette = generateThemePalette('#3491FA', {
62
+ semanticColors: {
63
+ success: '#00C853',
64
+ warning: '#FF9800',
65
+ error: '#F44336'
66
+ },
67
+ semanticBlendRatio: 0.1 // 10% brand influence on semantic colors
68
+ });
69
+ console.log(themePalette.control); // Control colors (primary, gray)
70
+ console.log(themePalette.semantic); // Semantic colors with brand influence
71
+ console.log(themePalette.theme); // Theme color variations
72
+
73
+ // Theme blending
74
+ const blended = blendInHct([64, 196, 255], [255, 87, 34], 'overlay', 0.5);
75
+ console.log(blended); // Blended RGB color
35
76
  ```
36
77
 
37
78
  ## API
@@ -87,3 +128,192 @@ For a given color, get the r, g, b value in string
87
128
  ```js
88
129
  getRgbStr('#F53F3F') // 245,63,63
89
130
  ```
131
+
132
+ ### generateInterfaceColorSystem(primaryColor: string, options?: Object)
133
+
134
+ Generate a complete interface color system based on a primary color, including semantic colors.
135
+
136
+ **Parameters:**
137
+ - `primaryColor`: string - Primary color in hex format (e.g., '#3491FA')
138
+ - `options`: Object - Optional configuration
139
+ - `successBase`: string - Custom success color base, defaults to green
140
+ - `warningBase`: string - Custom warning color base, defaults to orange
141
+ - `errorBase`: string - Custom error color base, defaults to red
142
+ - `infoBase`: string - Custom info color base, defaults to blue
143
+
144
+ **Returns:**
145
+ - `Object` - Complete color system object
146
+ - `primary`: string[] - Primary color palette (10 colors)
147
+ - `success`: string[] - Success color palette (10 colors)
148
+ - `warning`: string[] - Warning color palette (10 colors)
149
+ - `error`: string[] - Error color palette (10 colors)
150
+ - `info`: string[] - Info color palette (10 colors)
151
+
152
+ ```js
153
+ // Generate default interface color system
154
+ const colorSystem = generateInterfaceColorSystem('#3491FA');
155
+ console.log(colorSystem.primary); // Primary color palette
156
+ console.log(colorSystem.success); // Success color palette
157
+
158
+ // Custom semantic color bases
159
+ const customColorSystem = generateInterfaceColorSystem('#3491FA', {
160
+ successBase: '#00C853',
161
+ warningBase: '#FF9800',
162
+ errorBase: '#F44336',
163
+ infoBase: '#2196F3'
164
+ });
165
+ ```
166
+
167
+ ### generateThemePalette(themeColor: string, options?: Object)
168
+
169
+ Generate a complete theme palette with advanced brand customization and semantic color blending.
170
+
171
+ **Parameters:**
172
+ - `themeColor`: string - Primary theme color in hex format
173
+ - `options`: Object - Optional configuration
174
+ - `semanticColors`: Object - Custom semantic color bases
175
+ - `success`: string - Success color base
176
+ - `warning`: string - Warning color base
177
+ - `error`: string - Error color base
178
+ - `info`: string - Info color base
179
+ - `semanticBlendRatio`: number - Brand influence on semantic colors (0-1, default: 0.08)
180
+ - `controlBlendRatio`: number - Brand influence on control colors (0-1, default: 0.05)
181
+
182
+ **Returns:**
183
+ - `Object` - Complete theme palette
184
+ - `control`: Object - Control colors (primary, gray)
185
+ - `semantic`: Object - Semantic colors with brand influence
186
+ - `theme`: string[] - Theme color variations (10 colors)
187
+
188
+ ```js
189
+ // Basic theme palette
190
+ const basicPalette = generateThemePalette('#3491FA');
191
+
192
+ // Advanced customization with brand influence
193
+ const brandPalette = generateThemePalette('#3491FA', {
194
+ semanticColors: {
195
+ success: '#00C853',
196
+ warning: '#FF9800',
197
+ error: '#F44336',
198
+ info: '#2196F3'
199
+ },
200
+ semanticBlendRatio: 0.12, // 12% brand influence
201
+ controlBlendRatio: 0.08 // 8% brand influence
202
+ });
203
+ console.log(brandPalette.semantic.success); // Brand-influenced success colors
204
+ ```
205
+
206
+ ### rgbToHct(rgb: number[])
207
+
208
+ Convert RGB color to HCT color space.
209
+
210
+ **Parameters:**
211
+ - `rgb`: number[] - RGB color array [r, g, b], range 0-255
212
+
213
+ **Returns:**
214
+ - `number[]` - HCT color array [h, c, t], hue(0-360), chroma(0-100+), tone(0-100)
215
+
216
+ ### hctToRgb(hct: number[])
217
+
218
+ Convert HCT color to RGB color space.
219
+
220
+ **Parameters:**
221
+ - `hct`: number[] - HCT color array [h, c, t]
222
+
223
+ **Returns:**
224
+ - `number[]` - RGB color array [r, g, b], range 0-255
225
+
226
+ ### blendInHct(color1: number[], color2: number[], mode: string, ratio: number)
227
+
228
+ Blend two colors in HCT color space.
229
+
230
+ **Parameters:**
231
+ - `color1`: number[] - First color RGB array
232
+ - `color2`: number[] - Second color RGB array
233
+ - `mode`: string - Blend mode: 'multiply', 'screen', 'overlay', 'softLight'
234
+ - `ratio`: number - Blend ratio, range 0-1
235
+
236
+ **Returns:**
237
+ - `number[]` - Blended RGB color array
238
+
239
+ ```js
240
+ // RGB to HCT conversion
241
+ const hct = rgbToHct([64, 196, 255]);
242
+ console.log(hct); // [200, 45, 80]
243
+
244
+ // HCT to RGB conversion
245
+ const rgb = hctToRgb([200, 45, 80]);
246
+ console.log(rgb); // [64, 196, 255]
247
+
248
+ // Color blending
249
+ const blended = blendInHct(
250
+ [64, 196, 255], // Blue
251
+ [255, 87, 34], // Orange
252
+ 'overlay', // Overlay mode
253
+ 0.5 // 50% blend
254
+ );
255
+ console.log(blended); // Blended color
256
+
257
+ // Different blend modes
258
+ const multiply = blendInHct([255, 0, 0], [0, 255, 0], 'multiply', 0.5);
259
+ const screen = blendInHct([255, 0, 0], [0, 255, 0], 'screen', 0.5);
260
+ const softLight = blendInHct([255, 0, 0], [0, 255, 0], 'softLight', 0.5);
261
+ ```
262
+
263
+ ### extractColorFromImage(image: HTMLImageElement)
264
+
265
+ Extract dominant color from a loaded image element.
266
+
267
+ **Parameters:**
268
+ - `image`: HTMLImageElement - Loaded image element
269
+
270
+ **Returns:**
271
+ - `Promise<string>` - Extracted dominant color (hex format)
272
+
273
+ ```js
274
+ const image = document.getElementById('myImage');
275
+ extractColorFromImage(image).then(color => {
276
+ console.log('Extracted color:', color);
277
+ // Generate palette from extracted color
278
+ const palette = generate(color, { list: true });
279
+ });
280
+ ```
281
+
282
+ ### extractColorFromFile(file: File)
283
+
284
+ Read image from file object and extract dominant color.
285
+
286
+ **Parameters:**
287
+ - `file`: File - Image file object
288
+
289
+ **Returns:**
290
+ - `Promise<string>` - Extracted dominant color (hex format)
291
+
292
+ ```js
293
+ // Use in file input event
294
+ document.getElementById('fileInput').addEventListener('change', (event) => {
295
+ const file = event.target.files[0];
296
+ if (file) {
297
+ extractColorFromFile(file).then(color => {
298
+ console.log('Extracted color:', color);
299
+ });
300
+ }
301
+ });
302
+ ```
303
+
304
+ ## Version History
305
+
306
+ ### v0.2.0 (Latest)
307
+ - ✨ Added interface color system functionality
308
+ - ✨ Added HCT color space-based theme blending
309
+ - 📚 Enhanced API documentation and examples
310
+ - 🔧 Optimized code structure and performance
311
+
312
+ ### v0.1.1
313
+ - 🐛 Fixed edge cases in color palette generation
314
+ - 📚 Updated documentation and examples
315
+
316
+ ### v0.1.0
317
+ - 🎉 Initial release
318
+ - ✨ Color palette generation
319
+ - ✨ Image color extraction
package/README.zh-CN.md CHANGED
@@ -1,13 +1,15 @@
1
1
  # ArcoDesign Color
2
2
 
3
- ArcoDesign Color Utils - 一个强大的颜色处理工具库。
3
+ Aviala Design Color - 一个强大的颜色处理工具库。
4
4
 
5
5
  ## 功能概述
6
6
 
7
- 本库提供两大核心功能:
7
+ 本库提供四大核心功能:
8
8
 
9
9
  1. **色盘生成**:根据给定颜色通过算法生成包含十个颜色的梯度色板,支持亮色模式和暗色模式。
10
10
  2. **图片取色**:从图片中提取主色调,可用于生成与图片匹配的调色板或主题色。
11
+ 3. **界面色彩系统**:基于主色生成完整的界面色彩系统,包括语义色彩(成功、警告、错误、信息)。
12
+ 4. **主题混合**:基于 HCT 色彩空间的高级主题混合功能,支持多种混合模式。
11
13
 
12
14
  ## 安装
13
15
 
@@ -17,7 +19,16 @@ npm install @aviala-design/color```
17
19
  ## 基本使用
18
20
 
19
21
  ```js
20
- import { generate, getPresetColors, getRgbStr, extractColorFromImage } from '@arco-design/color';
22
+ import {
23
+ generate,
24
+ getPresetColors,
25
+ getRgbStr,
26
+ extractColorFromImage,
27
+ generateInterfaceColorSystem,
28
+ blendInHct,
29
+ rgbToHct,
30
+ hctToRgb
31
+ } from '@aviala-design/color';
21
32
 
22
33
  // 生成色盘
23
34
  const colorPalette = generate('#3491FA', { list: true });
@@ -32,6 +43,17 @@ console.log(arcoblue.primary); // arco蓝的主色
32
43
  // 获取RGB字符串
33
44
  const rgbStr = getRgbStr('#F53F3F');
34
45
  console.log(rgbStr); // 245,63,63
46
+
47
+ // 生成界面色彩系统
48
+ const colorSystem = generateInterfaceColorSystem('#3491FA');
49
+ console.log(colorSystem.success); // 成功色
50
+ console.log(colorSystem.warning); // 警告色
51
+ console.log(colorSystem.error); // 错误色
52
+ console.log(colorSystem.info); // 信息色
53
+
54
+ // 主题混合
55
+ const blended = blendInHct([64, 196, 255], [255, 87, 34], 'overlay', 0.5);
56
+ console.log(blended); // 混合后的RGB颜色
35
57
  ```
36
58
 
37
59
  ## API 详解
@@ -171,6 +193,109 @@ document.getElementById('fileInput').addEventListener('change', (event) => {
171
193
  });
172
194
  ```
173
195
 
196
+ ### 界面色彩系统功能
197
+
198
+ #### generateInterfaceColorSystem(primaryColor: string, options?: Object)
199
+
200
+ 基于主色生成完整的界面色彩系统,包括语义色彩。
201
+
202
+ **参数:**
203
+ - `primaryColor`: string - 主色,支持十六进制格式(如 '#3491FA')
204
+ - `options`: Object - 可选配置项
205
+ - `successBase`: string - 自定义成功色基础色,默认为绿色
206
+ - `warningBase`: string - 自定义警告色基础色,默认为橙色
207
+ - `errorBase`: string - 自定义错误色基础色,默认为红色
208
+ - `infoBase`: string - 自定义信息色基础色,默认为蓝色
209
+
210
+ **返回值:**
211
+ - `Object` - 包含完整色彩系统的对象
212
+ - `primary`: string[] - 主色色盘(10个颜色)
213
+ - `success`: string[] - 成功色色盘(10个颜色)
214
+ - `warning`: string[] - 警告色色盘(10个颜色)
215
+ - `error`: string[] - 错误色色盘(10个颜色)
216
+ - `info`: string[] - 信息色色盘(10个颜色)
217
+
218
+ **示例:**
219
+
220
+ ```js
221
+ // 生成默认界面色彩系统
222
+ const colorSystem = generateInterfaceColorSystem('#3491FA');
223
+ console.log(colorSystem.primary); // 主色色盘
224
+ console.log(colorSystem.success); // 成功色色盘
225
+ console.log(colorSystem.warning); // 警告色色盘
226
+ console.log(colorSystem.error); // 错误色色盘
227
+ console.log(colorSystem.info); // 信息色色盘
228
+
229
+ // 自定义语义色基础色
230
+ const customColorSystem = generateInterfaceColorSystem('#3491FA', {
231
+ successBase: '#00C853',
232
+ warningBase: '#FF9800',
233
+ errorBase: '#F44336',
234
+ infoBase: '#2196F3'
235
+ });
236
+ ```
237
+
238
+ ### 主题混合功能
239
+
240
+ #### rgbToHct(rgb: number[])
241
+
242
+ 将 RGB 颜色转换为 HCT 色彩空间。
243
+
244
+ **参数:**
245
+ - `rgb`: number[] - RGB 颜色数组 [r, g, b],范围 0-255
246
+
247
+ **返回值:**
248
+ - `number[]` - HCT 颜色数组 [h, c, t],色相(0-360)、色度(0-100+)、色调(0-100)
249
+
250
+ #### hctToRgb(hct: number[])
251
+
252
+ 将 HCT 颜色转换为 RGB 色彩空间。
253
+
254
+ **参数:**
255
+ - `hct`: number[] - HCT 颜色数组 [h, c, t]
256
+
257
+ **返回值:**
258
+ - `number[]` - RGB 颜色数组 [r, g, b],范围 0-255
259
+
260
+ #### blendInHct(color1: number[], color2: number[], mode: string, ratio: number)
261
+
262
+ 在 HCT 色彩空间中混合两个颜色。
263
+
264
+ **参数:**
265
+ - `color1`: number[] - 第一个颜色的 RGB 数组
266
+ - `color2`: number[] - 第二个颜色的 RGB 数组
267
+ - `mode`: string - 混合模式,可选值:'multiply'、'screen'、'overlay'、'softLight'
268
+ - `ratio`: number - 混合比例,范围 0-1
269
+
270
+ **返回值:**
271
+ - `number[]` - 混合后的 RGB 颜色数组
272
+
273
+ **示例:**
274
+
275
+ ```js
276
+ // RGB 到 HCT 转换
277
+ const hct = rgbToHct([64, 196, 255]);
278
+ console.log(hct); // [200, 45, 80]
279
+
280
+ // HCT 到 RGB 转换
281
+ const rgb = hctToRgb([200, 45, 80]);
282
+ console.log(rgb); // [64, 196, 255]
283
+
284
+ // 颜色混合
285
+ const blended = blendInHct(
286
+ [64, 196, 255], // 蓝色
287
+ [255, 87, 34], // 橙色
288
+ 'overlay', // 叠加模式
289
+ 0.5 // 50% 混合
290
+ );
291
+ console.log(blended); // 混合后的颜色
292
+
293
+ // 不同混合模式示例
294
+ const multiply = blendInHct([255, 0, 0], [0, 255, 0], 'multiply', 0.5);
295
+ const screen = blendInHct([255, 0, 0], [0, 255, 0], 'screen', 0.5);
296
+ const softLight = blendInHct([255, 0, 0], [0, 255, 0], 'softLight', 0.5);
297
+ ```
298
+
174
299
  ## 实现原理
175
300
 
176
301
  ### 色盘生成算法
@@ -190,3 +315,42 @@ document.getElementById('fileInput').addEventListener('change', (event) => {
190
315
  2. **像素量化**:将RGB颜色空间从256^3种可能的颜色减少到16^3种
191
316
  3. **颜色频率统计**:统计每种颜色的出现频率
192
317
  4. **主色调提取**:过滤掉灰色和接近白色/黑色的颜色,选择出现频率最高的颜色
318
+
319
+ ### 界面色彩系统算法
320
+
321
+ 界面色彩系统基于色彩理论和无障碍访问性原则:
322
+
323
+ 1. **语义色彩映射**:将功能语义(成功、警告、错误、信息)映射到合适的色相区域
324
+ 2. **色彩调和**:确保生成的语义色彩与主色形成和谐的色彩关系
325
+ 3. **对比度优化**:自动调整颜色的明度以满足 WCAG 无障碍访问标准
326
+ 4. **一致性保证**:所有语义色彩使用相同的饱和度和明度调整算法
327
+
328
+ ### 主题混合算法
329
+
330
+ 主题混合功能基于 Material Design 3 的 HCT 色彩空间:
331
+
332
+ 1. **HCT 色彩空间**:使用色相(Hue)、色度(Chroma)、色调(Tone)三个维度描述颜色
333
+ 2. **感知均匀性**:HCT 空间在视觉感知上更加均匀,混合结果更自然
334
+ 3. **多种混合模式**:
335
+ - **multiply**: 相乘混合,产生更深的颜色
336
+ - **screen**: 屏幕混合,产生更亮的颜色
337
+ - **overlay**: 叠加混合,结合相乘和屏幕的效果
338
+ - **softLight**: 柔光混合,产生柔和的混合效果
339
+ 4. **比例控制**:支持精确的混合比例控制,实现渐进式颜色过渡
340
+
341
+ ## 版本历史
342
+
343
+ ### v0.2.0 (最新)
344
+ - ✨ 新增界面色彩系统功能
345
+ - ✨ 新增基于 HCT 色彩空间的主题混合功能
346
+ - 📚 完善 API 文档和使用示例
347
+ - 🔧 优化代码结构和性能
348
+
349
+ ### v0.1.1
350
+ - 🐛 修复色盘生成的边界情况
351
+ - 📚 更新文档和示例
352
+
353
+ ### v0.1.0
354
+ - 🎉 初始版本发布
355
+ - ✨ 色盘生成功能
356
+ - ✨ 图片取色功能
package/dist/index.d.ts CHANGED
@@ -2,7 +2,7 @@ import { default as generate } from './generate.js';
2
2
  import { getRgbStr } from './utils.js';
3
3
  import { extractColorFromImage, extractColorFromFile } from './image-color.js';
4
4
  import { generateLinear, generateGrayLinear, generateMonochromeLinear, generateLinearHSL } from './linear.js';
5
- import { rgbToHct, hctToRgb, blendInHct, harmonizeColor, generateThemeVariants, blendSemanticColors, blendUIColors, generateThemePalette, generateControlColors, generateSemanticColors, generateThemeColors, generateInterfaceColorSystem } from './theme-blend.js';
5
+ import { rgbToHct, hctToRgb, blendInHct, harmonizeColor, generateThemeVariants, blendUIColors, generateThemePalette, generateControlColors, generateSemanticColors, generateThemeColors, generateInterfaceColorSystem } from './theme-blend.js';
6
6
  export namespace colorList {
7
7
  let red: string;
8
8
  let orangered: string;
@@ -25,4 +25,4 @@ export function getPresetColors(): {
25
25
  primary: string;
26
26
  };
27
27
  };
28
- export { generate, getRgbStr, extractColorFromImage, extractColorFromFile, generateLinear, generateGrayLinear, generateMonochromeLinear, generateLinearHSL, rgbToHct, hctToRgb, blendInHct, harmonizeColor, generateThemeVariants, blendSemanticColors, blendUIColors, generateThemePalette, generateControlColors, generateSemanticColors, generateThemeColors, generateInterfaceColorSystem };
28
+ export { generate, getRgbStr, extractColorFromImage, extractColorFromFile, generateLinear, generateGrayLinear, generateMonochromeLinear, generateLinearHSL, rgbToHct, hctToRgb, blendInHct, harmonizeColor, generateThemeVariants, blendUIColors, generateThemePalette, generateControlColors, generateSemanticColors, generateThemeColors, generateInterfaceColorSystem };
package/dist/index.js CHANGED
@@ -1 +1 @@
1
- (function(f,g){typeof exports=="object"&&typeof module<"u"?g(exports,require("color")):typeof define=="function"&&define.amd?define(["exports","color"],g):(f=typeof globalThis<"u"?globalThis:f||self,g(f.AvialaColor={},f.Color))})(this,function(f,g){"use strict";function O(t){return g(t).rgb().round().color.join(",")}const q=["hex","rgb","hsl"];function N(t){return!t||q.indexOf(t)<0?"hex":t}function E(t,r){const s=N(r);return s==="hex"?t[s]().toLowerCase():t[s]().round().string()}function R(t,r,s){const n=g(t),e=n.hue(),o=n.saturationv(),a=n.value(),c=(M=>M>=60&&M<=240?2.5:M>=0&&M<60||M>300&&M<=360?1.5:2)(e),l=100,d=9,h=100,u=30;function m(M,w){let S;return e>=60&&e<=240?S=M?e-c*w:e+c*w:S=M?e+c*w:e-c*w,S<0?S+=360:S>=360&&(S-=360),Math.round(S)}function b(M,w){let S;if(M)S=o<=d?o:o-(o-d)/5.5*Math.pow(w,1.05);else{const tt=Math.min(l,o+30);S=o+(tt-o)/4.2*Math.pow(w,.95)}return Math.max(0,Math.min(100,S))}function p(M,w){return M?Math.min(h,a+(h-a)/5.2*Math.pow(w,.9)):a<=u?a:Math.max(u,a-(a-u)/4.2*Math.pow(w,1.05))}const y=r<6,x=y?6-r:r-6,D=r===6?n:g({h:m(y,x),s:b(y,x),v:p(y,x)});return E(D,s)}function T(t,r,s){const n=g(R(t,10-r+1)),e=g(t),o=e.hue(),a=e.saturationv(),c=g({h:e.hue(),s:h(6),v:e.value()}).saturationv(),l=Math.ceil((c-9)/4),d=Math.ceil((100-c)/5);function h(m){if(m<6)return c+(6-m)*d;if(m===6){if(o>=0&&o<50)return a-15;if(o>=50&&o<191)return a-20;if(o>=191&&o<=360)return a-15}return c-l*(m-6)}const u=g({h:n.hue(),s:h(r),v:n.value()});return E(u,s)}function v(t,r={}){const{dark:s,list:n,index:e=6,format:o="hex"}=r;if(n){const a=[],i=s?T:R;for(let c=1;c<=10;c++)a.push(i(t,c,o));return a}return s?T(t,e,o):R(t,e,o)}async function P(t){try{const r=await j(t),s=U(r);return K(s)}catch(r){throw console.error("提取图片颜色失败:",r),r}}async function j(t){return new Promise((r,s)=>{try{const n=document.createElement("canvas"),e=n.getContext("2d"),o=Math.min(t.width,100),a=Math.min(t.height,100),i=Math.min(o/t.width,a/t.height);n.width=t.width*i,n.height=t.height*i,e.drawImage(t,0,0,n.width,n.height);const c=e.getImageData(0,0,n.width,n.height);r(c)}catch(n){s(n)}})}function U(t){const r=t.data,s=new Map;for(let e=0;e<r.length;e+=4){const o=r[e],a=r[e+1],i=r[e+2];if(r[e+3]<128)continue;const l=Math.round(o/16)*16,d=Math.round(a/16)*16,h=Math.round(i/16)*16,u=`${l},${d},${h}`;s.has(u)?s.set(u,s.get(u)+1):s.set(u,1)}const n=[];return s.forEach((e,o)=>{const[a,i,c]=o.split(",").map(Number);n.push({r:a,g:i,b:c,count:e})}),n}function K(t){t.sort((e,o)=>o.count-e.count);const r=t.filter(e=>{const{r:o,g:a,b:i}=e,c=Math.max(o,a,i),l=Math.min(o,a,i),d=c-l,h=c===0?0:d/c,u=c/255;return h>.15&&u>.2&&u<.8}),s=r.length>0?r[0]:t[0];return g({r:s.r,g:s.g,b:s.b}).hex()}function W(t){return new Promise((r,s)=>{if(!t.type.startsWith("image/")){s(new Error("请选择图片文件"));return}const n=new FileReader;n.onload=async e=>{try{const o=new Image;o.onload=async()=>{try{const a=await P(o);r(a)}catch(a){s(a)}},o.onerror=()=>s(new Error("图片加载失败")),o.src=e.target.result}catch(o){s(o)}},n.onerror=()=>s(new Error("文件读取失败")),n.readAsDataURL(t)})}function I(t,r,s={}){const{steps:n=10,format:e="hex",includeEnds:o=!0}=s;if(n<2)throw new Error("步数必须至少为2");const a=g(t),i=g(r),c=[],l=o?n:n+2,d=1/(l-1);for(let h=0;h<l;h++){const u=h*d,m=Math.round(a.red()+(i.red()-a.red())*u),b=Math.round(a.green()+(i.green()-a.green())*u),p=Math.round(a.blue()+(i.blue()-a.blue())*u),y=g({r:m,g:b,b:p});!o&&(h===0||h===l-1)||c.push(E(y,e))}return c}function J(t={}){const{startGray:r="#ffffff",endGray:s="#000000",steps:n=10,format:e="hex"}=t;return I(r,s,{steps:n,format:e,includeEnds:!0})}function Q(t,r={}){const{steps:s=10,format:n="hex",lightnessRange:e=80}=r,a=g(t).hsl(),i=a.lightness(),c=Math.min(95,i+e/2),l=Math.max(5,i-e/2),d=g({h:a.hue(),s:a.saturationl(),l:c}),h=g({h:a.hue(),s:a.saturationl(),l});return I(d.hex(),h.hex(),{steps:s,format:n,includeEnds:!0})}function X(t,r,s={}){const{steps:n=10,format:e="hex",includeEnds:o=!0}=s;if(n<2)throw new Error("步数必须至少为2");const a=g(t).hsl(),i=g(r).hsl(),c=[],l=o?n:n+2,d=1/(l-1);let h=a.hue()||0,u=i.hue()||0;const m=u-h;Math.abs(m)>180&&(m>0?h+=360:u+=360);for(let b=0;b<l;b++){const p=b*d;let y=h+(u-h)*p;const x=a.saturationl()+(i.saturationl()-a.saturationl())*p,D=a.lightness()+(i.lightness()-a.lightness())*p;y=y%360,y<0&&(y+=360);const M=g({h:y,s:x,l:D});!o&&(b===0||b===l-1)||c.push(E(M,e))}return c}function C(t){const r=t.replace("#",""),s=parseInt(r.substr(0,2),16)/255,n=parseInt(r.substr(2,2),16)/255,e=parseInt(r.substr(4,2),16)/255,o=Math.max(s,n,e),a=Math.min(s,n,e),i=o-a;let c=0;i!==0&&(o===s?c=(n-e)/i%6:o===n?c=(e-s)/i+2:c=(s-n)/i+4),c=Math.round(c*60),c<0&&(c+=360);const l=Math.round((.299*s+.587*n+.114*e)*100),d=(o+a)/2,h=i===0?0:i/(1-Math.abs(2*d-1)),u=Math.round(h*Math.min(l,100-l));return{h:c,c:u,t:l}}function H(t){const{h:r,c:s,t:n}=t,e=(r%360+360)%360,o=Math.max(0,Math.min(150,s)),a=Math.max(0,Math.min(100,n)),i=a/100,c=a===0||a===100?0:o/Math.min(a,100-a),l=(1-Math.abs(2*i-1))*Math.min(1,c),d=l*(1-Math.abs(e/60%2-1)),h=i-l/2;let u,m,b;e>=0&&e<60?[u,m,b]=[l,d,0]:e>=60&&e<120?[u,m,b]=[d,l,0]:e>=120&&e<180?[u,m,b]=[0,l,d]:e>=180&&e<240?[u,m,b]=[0,d,l]:e>=240&&e<300?[u,m,b]=[d,0,l]:[u,m,b]=[l,0,d];const p=y=>{const x=Math.max(0,Math.min(1,y+h)),D=Math.round(x*255).toString(16);return D.length===1?"0"+D:D};return`#${p(u)}${p(m)}${p(b)}`}function L(t,r,s=.5){const n=C(t),e=C(r);let o=n.h,a=e.h,i=a-o;Math.abs(i)>180&&(i>0?o+=360:a+=360);const c=(o+(a-o)*s)%360,l=n.c+(e.c-n.c)*s,d=n.t+(e.t-n.t)*s;return H({h:c<0?c+360:c,c:Math.max(0,Math.round(l)),t:Math.max(0,Math.min(100,Math.round(d)))})}function A(t,r,s=.15){const n=C(t),e=C(r);let o=e.h,a=n.h,i=a-o;Math.abs(i)>180&&(i>0?o+=360:a+=360,i=a-o);const c=(o+i*s)%360;return H({h:c<0?c+360:c,c:e.c,t:e.t})}function k(t,r=[10,20,30,40,50,60,70,80,90]){const s=C(t);let n;return Array.isArray(r)?n=r:r&&r.tones&&Array.isArray(r.tones)?n=r.tones:n=[10,20,30,40,50,60,70,80,90],n.map(e=>H({h:s.h,c:s.c,t:e}))}function z(t,r,s=.15){const n={};for(const[e,o]of Object.entries(r))n[e]=A(t,o,s);return n}function $(t,r,s=.2){const n={};for(const[e,o]of Object.entries(r))n[e]=L(t,o,s);return n}function B(t,r={}){const{baseGray:s="#666666"}=r,{blendRatio:n=.08,isDark:e=!1}=r,o=C(s),a={};return(e?[95,90,85,80,70,60,50,40,30,20,15,10]:[10,15,20,30,40,50,60,70,80,85,90,95]).forEach((c,l)=>{const d={h:o.h,c:o.c,t:c},h=L(H(d),t,n);a[`gray-${l+1}`]=h}),a}function V(t,r={}){const{semanticColors:s={success:"#52c41a",warning:"#faad14",error:"#ff4d4f",info:"#1890ff"},blendRatio:n=.12,isDark:e=!1}=r,o={};return Object.entries(s).forEach(([a,i])=>{const c={},l=C(i);(e?[90,80,70,60,50,40,30,25,20,15]:[15,25,35,45,55,65,75,85,90,95]).forEach((h,u)=>{const m={h:l.h,c:l.c,t:h},b=L(H(m),t,n);c[`${a}-${u+1}`]=b}),Object.assign(o,c)}),o}function G(t,r={}){const{isDark:s=!1}=r,n=C(t),e={};return(s?[90,80,70,60,50,40,30,25,20,15]:[15,25,35,45,55,65,75,85,90,95]).forEach((a,i)=>{const c={h:n.h,c:n.c,t:a};e[`theme-${i+1}`]=H(c)}),e}function Y(t,r={}){const{baseGray:s="#666666",isDark:n=!1,semanticColors:e,controlBlendRatio:o=.08,semanticBlendRatio:a=.12}=r;return{controls:B(t,{baseGray:s,blendRatio:o,isDark:n}),semantic:V(t,{semanticColors:e,blendRatio:a,isDark:n}),theme:G(t,{isDark:n})}}function Z(t,r={}){const{semanticColors:s={success:"#4caf50",warning:"#ff9800",error:"#f44336",info:"#2196f3"},uiColors:n={primary:t,"primary-light":"#ffffff","primary-lighter":"#f8f9ff","primary-dark":"#000000","primary-darker":"#0a0a0a",accent:"#722ed1","neutral-1":"#f7f8fa","neutral-2":"#f2f3f5","neutral-3":"#e5e6eb","neutral-4":"#c9cdd4","neutral-5":"#a9aeb8","neutral-6":"#86909c",background:"#ffffff",surface:"#f8f9fa",border:"#e5e6eb",disabled:"#c9cdd4"},harmonizeRatio:e=.15,blendRatio:o=.12,generateVariants:a=!0}=r,i={theme:t,semantic:z(t,s,e),ui:$(t,n,o)};return a&&(i.variants=k(t)),i}const F={red:"#F53F3F",orangered:"#F77234",orange:"#FF7D00",gold:"#F7BA1E",yellow:"#FADC19",lime:"#9FDB1D",green:"#00B42A",cyan:"#14C9C9",blue:"#3491FA",arcoblue:"#165DFF",purple:"#722ED1",pinkpurple:"#D91AD9",magenta:"#F5319D"};function _(){const t={};return Object.keys(F).forEach(r=>{t[r]={},t[r].light=v(F[r],{list:!0}),t[r].dark=v(F[r],{list:!0,dark:!0}),t[r].primary=F[r]}),t.gray={},t.gray.light=["#f7f8fa","#f2f3f5","#e5e6eb","#c9cdd4","#a9aeb8","#86909c","#6b7785","#4e5969","#272e3b","#1d2129"],t.gray.dark=["#17171a","#2e2e30","#484849","#5f5f60","#78787a","#929293","#ababac","#c5c5c5","#dfdfdf","#f6f6f6"],t.gray.primary=t.gray.light[6],t}f.blendInHct=L,f.blendSemanticColors=z,f.blendUIColors=$,f.colorList=F,f.extractColorFromFile=W,f.extractColorFromImage=P,f.generate=v,f.generateControlColors=B,f.generateGrayLinear=J,f.generateInterfaceColorSystem=Y,f.generateLinear=I,f.generateLinearHSL=X,f.generateMonochromeLinear=Q,f.generateSemanticColors=V,f.generateThemeColors=G,f.generateThemePalette=Z,f.generateThemeVariants=k,f.getPresetColors=_,f.getRgbStr=O,f.harmonizeColor=A,f.hctToRgb=H,f.rgbToHct=C,Object.defineProperty(f,Symbol.toStringTag,{value:"Module"})});
1
+ (function(d,g){typeof exports=="object"&&typeof module<"u"?g(exports,require("color")):typeof define=="function"&&define.amd?define(["exports","color"],g):(d=typeof globalThis<"u"?globalThis:d||self,g(d.AvialaColor={},d.Color))})(this,function(d,g){"use strict";function k(e){return g(e).rgb().round().color.join(",")}const G=["hex","rgb","hsl"];function O(e){return!e||G.indexOf(e)<0?"hex":e}function E(e,o){const s=O(o);return s==="hex"?e[s]().toLowerCase():e[s]().round().string()}function L(e,o,s){const n=g(e),t=n.hue(),r=n.saturationv(),a=n.value(),c=(M=>M>=60&&M<=240?2.5:M>=0&&M<60||M>300&&M<=360?1.5:2)(t),u=100,f=9,l=100,h=30;function m(M,y){let p;return t>=60&&t<=240?p=M?t-c*y:t+c*y:p=M?t+c*y:t-c*y,p<0?p+=360:p>=360&&(p-=360),Math.round(p)}function b(M,y){let p;if(M)p=r<=f?r:r-(r-f)/5.5*Math.pow(y,1.05);else{const _=Math.min(u,r+30);p=r+(_-r)/4.2*Math.pow(y,.95)}return Math.max(0,Math.min(100,p))}function S(M,y){return M?Math.min(l,a+(l-a)/5.2*Math.pow(y,.9)):a<=h?a:Math.max(h,a-(a-h)/4.2*Math.pow(y,1.05))}const w=o<6,x=w?6-o:o-6,D=o===6?n:g({h:m(w,x),s:b(w,x),v:S(w,x)});return E(D,s)}function P(e,o,s){const n=g(L(e,10-o+1)),t=g(e),r=t.hue(),a=t.saturationv(),c=g({h:t.hue(),s:l(6),v:t.value()}).saturationv(),u=Math.ceil((c-9)/4),f=Math.ceil((100-c)/5);function l(m){if(m<6)return c+(6-m)*f;if(m===6){if(r>=0&&r<50)return a-15;if(r>=50&&r<191)return a-20;if(r>=191&&r<=360)return a-15}return c-u*(m-6)}const h=g({h:n.hue(),s:l(o),v:n.value()});return E(h,s)}function v(e,o={}){const{dark:s,list:n,index:t=6,format:r="hex"}=o;if(n){const a=[],i=s?P:L;for(let c=1;c<=10;c++)a.push(i(e,c,r));return a}return s?P(e,t,r):L(e,t,r)}async function $(e){try{const o=await q(e),s=N(o);return j(s)}catch(o){throw console.error("提取图片颜色失败:",o),o}}async function q(e){return new Promise((o,s)=>{try{const n=document.createElement("canvas"),t=n.getContext("2d"),r=Math.min(e.width,100),a=Math.min(e.height,100),i=Math.min(r/e.width,a/e.height);n.width=e.width*i,n.height=e.height*i,t.drawImage(e,0,0,n.width,n.height);const c=t.getImageData(0,0,n.width,n.height);o(c)}catch(n){s(n)}})}function N(e){const o=e.data,s=new Map;for(let t=0;t<o.length;t+=4){const r=o[t],a=o[t+1],i=o[t+2];if(o[t+3]<128)continue;const u=Math.round(r/16)*16,f=Math.round(a/16)*16,l=Math.round(i/16)*16,h=`${u},${f},${l}`;s.has(h)?s.set(h,s.get(h)+1):s.set(h,1)}const n=[];return s.forEach((t,r)=>{const[a,i,c]=r.split(",").map(Number);n.push({r:a,g:i,b:c,count:t})}),n}function j(e){e.sort((t,r)=>r.count-t.count);const o=e.filter(t=>{const{r,g:a,b:i}=t,c=Math.max(r,a,i),u=Math.min(r,a,i),f=c-u,l=c===0?0:f/c,h=c/255;return l>.15&&h>.2&&h<.8}),s=o.length>0?o[0]:e[0];return g({r:s.r,g:s.g,b:s.b}).hex()}function U(e){return new Promise((o,s)=>{if(!e.type.startsWith("image/")){s(new Error("请选择图片文件"));return}const n=new FileReader;n.onload=async t=>{try{const r=new Image;r.onload=async()=>{try{const a=await $(r);o(a)}catch(a){s(a)}},r.onerror=()=>s(new Error("图片加载失败")),r.src=t.target.result}catch(r){s(r)}},n.onerror=()=>s(new Error("文件读取失败")),n.readAsDataURL(e)})}function I(e,o,s={}){const{steps:n=10,format:t="hex",includeEnds:r=!0}=s;if(n<2)throw new Error("步数必须至少为2");const a=g(e),i=g(o),c=[],u=r?n:n+2,f=1/(u-1);for(let l=0;l<u;l++){const h=l*f,m=Math.round(a.red()+(i.red()-a.red())*h),b=Math.round(a.green()+(i.green()-a.green())*h),S=Math.round(a.blue()+(i.blue()-a.blue())*h),w=g({r:m,g:b,b:S});!r&&(l===0||l===u-1)||c.push(E(w,t))}return c}function K(e={}){const{startGray:o="#ffffff",endGray:s="#000000",steps:n=10,format:t="hex"}=e;return I(o,s,{steps:n,format:t,includeEnds:!0})}function W(e,o={}){const{steps:s=10,format:n="hex",lightnessRange:t=80}=o,a=g(e).hsl(),i=a.lightness(),c=Math.min(95,i+t/2),u=Math.max(5,i-t/2),f=g({h:a.hue(),s:a.saturationl(),l:c}),l=g({h:a.hue(),s:a.saturationl(),l:u});return I(f.hex(),l.hex(),{steps:s,format:n,includeEnds:!0})}function J(e,o,s={}){const{steps:n=10,format:t="hex",includeEnds:r=!0}=s;if(n<2)throw new Error("步数必须至少为2");const a=g(e).hsl(),i=g(o).hsl(),c=[],u=r?n:n+2,f=1/(u-1);let l=a.hue()||0,h=i.hue()||0;const m=h-l;Math.abs(m)>180&&(m>0?l+=360:h+=360);for(let b=0;b<u;b++){const S=b*f;let w=l+(h-l)*S;const x=a.saturationl()+(i.saturationl()-a.saturationl())*S,D=a.lightness()+(i.lightness()-a.lightness())*S;w=w%360,w<0&&(w+=360);const M=g({h:w,s:x,l:D});!r&&(b===0||b===u-1)||c.push(E(M,t))}return c}function C(e){const o=e.replace("#",""),s=parseInt(o.substr(0,2),16)/255,n=parseInt(o.substr(2,2),16)/255,t=parseInt(o.substr(4,2),16)/255,r=Math.max(s,n,t),a=Math.min(s,n,t),i=r-a;let c=0;i!==0&&(r===s?c=(n-t)/i%6:r===n?c=(t-s)/i+2:c=(s-n)/i+4),c=Math.round(c*60),c<0&&(c+=360);const u=Math.round((.299*s+.587*n+.114*t)*100),f=(r+a)/2,l=i===0?0:i/(1-Math.abs(2*f-1)),h=Math.round(l*Math.min(u,100-u));return{h:c,c:h,t:u}}function H(e){const{h:o,c:s,t:n}=e,t=(o%360+360)%360,r=Math.max(0,Math.min(150,s)),a=Math.max(0,Math.min(100,n)),i=a/100,c=a===0||a===100?0:r/Math.min(a,100-a),u=(1-Math.abs(2*i-1))*Math.min(1,c),f=u*(1-Math.abs(t/60%2-1)),l=i-u/2;let h,m,b;t>=0&&t<60?[h,m,b]=[u,f,0]:t>=60&&t<120?[h,m,b]=[f,u,0]:t>=120&&t<180?[h,m,b]=[0,u,f]:t>=180&&t<240?[h,m,b]=[0,f,u]:t>=240&&t<300?[h,m,b]=[f,0,u]:[h,m,b]=[u,0,f];const S=w=>{const x=Math.max(0,Math.min(1,w+l)),D=Math.round(x*255).toString(16);return D.length===1?"0"+D:D};return`#${S(h)}${S(m)}${S(b)}`}function R(e,o,s=.5){const n=C(e),t=C(o);let r=n.h,a=t.h,i=a-r;Math.abs(i)>180&&(i>0?r+=360:a+=360);const c=(r+(a-r)*s)%360,u=n.c+(t.c-n.c)*s,f=n.t+(t.t-n.t)*s;return H({h:c<0?c+360:c,c:Math.max(0,Math.round(u)),t:Math.max(0,Math.min(100,Math.round(f)))})}function Q(e,o,s=.15){const n=C(e),t=C(o);let r=t.h,a=n.h,i=a-r;Math.abs(i)>180&&(i>0?r+=360:a+=360,i=a-r);const c=(r+i*s)%360;return H({h:c<0?c+360:c,c:t.c,t:t.t})}function A(e,o=[10,20,30,40,50,60,70,80,90]){const s=C(e);let n;return Array.isArray(o)?n=o:o&&o.tones&&Array.isArray(o.tones)?n=o.tones:n=[10,20,30,40,50,60,70,80,90],n.map(t=>H({h:s.h,c:s.c,t}))}function z(e,o,s=.2){const n={};for(const[t,r]of Object.entries(o))n[t]=R(e,r,s);return n}function B(e,o={}){const{baseGray:s="#666666"}=o,{blendRatio:n=.08,isDark:t=!1}=o,r=C(s),a={};return(t?[95,90,85,80,70,60,50,40,30,20,15,10]:[10,15,20,30,40,50,60,70,80,85,90,95]).forEach((c,u)=>{const f={h:r.h,c:r.c,t:c},l=R(H(f),e,n);a[`gray-${u+1}`]=l}),a}function T(e,o={}){const{semanticColors:s={success:"#52c41a",warning:"#faad14",error:"#ff4d4f",info:"#1890ff"},blendRatio:n=.12,isDark:t=!1}=o,r={};return Object.entries(s).forEach(([a,i])=>{const c={},u=C(i);(t?[90,80,70,60,50,40,30,25,20,15]:[15,25,35,45,55,65,75,85,90,95]).forEach((l,h)=>{const m={h:u.h,c:u.c,t:l},b=R(H(m),e,n);c[`${a}-${h+1}`]=b}),Object.assign(r,c)}),r}function V(e,o={}){const{isDark:s=!1}=o,n=C(e),t={};return(s?[90,80,70,60,50,40,30,25,20,15]:[15,25,35,45,55,65,75,85,90,95]).forEach((a,i)=>{const c={h:n.h,c:n.c,t:a};t[`theme-${i+1}`]=H(c)}),t}function X(e,o={}){const{baseGray:s="#666666",isDark:n=!1,semanticColors:t,controlBlendRatio:r=.08,semanticBlendRatio:a=.12}=o;return{controls:B(e,{baseGray:s,blendRatio:r,isDark:n}),semantic:T(e,{semanticColors:t,blendRatio:a,isDark:n}),theme:V(e,{isDark:n})}}function Y(e,o={}){const{semanticColors:s={success:"#52c41a",warning:"#faad14",error:"#ff4d4f",info:"#1890ff"},uiColors:n={background:"#ffffff",surface:"#fafafa",border:"#d9d9d9",disabled:"#f5f5f5"},harmonizeRatio:t=.15,blendRatio:r=.12,generateVariants:a=!0}=o,i=T(e,{semanticColors:s,blendRatio:t}),c={};Object.entries(s).forEach(([f])=>{c[f]={};for(let l=1;l<=10;l++){const h=`${f}-${l}`;i[h]&&(c[f][l]=i[h])}});const u={theme:e,semantic:c,ui:z(e,n,r)};return a&&(u.variants=A(e)),u}const F={red:"#F53F3F",orangered:"#F77234",orange:"#FF7D00",gold:"#F7BA1E",yellow:"#FADC19",lime:"#9FDB1D",green:"#00B42A",cyan:"#14C9C9",blue:"#3491FA",arcoblue:"#165DFF",purple:"#722ED1",pinkpurple:"#D91AD9",magenta:"#F5319D"};function Z(){const e={};return Object.keys(F).forEach(o=>{e[o]={},e[o].light=v(F[o],{list:!0}),e[o].dark=v(F[o],{list:!0,dark:!0}),e[o].primary=F[o]}),e.gray={},e.gray.light=["#f7f8fa","#f2f3f5","#e5e6eb","#c9cdd4","#a9aeb8","#86909c","#6b7785","#4e5969","#272e3b","#1d2129"],e.gray.dark=["#17171a","#2e2e30","#484849","#5f5f60","#78787a","#929293","#ababac","#c5c5c5","#dfdfdf","#f6f6f6"],e.gray.primary=e.gray.light[6],e}d.blendInHct=R,d.blendUIColors=z,d.colorList=F,d.extractColorFromFile=U,d.extractColorFromImage=$,d.generate=v,d.generateControlColors=B,d.generateGrayLinear=K,d.generateInterfaceColorSystem=X,d.generateLinear=I,d.generateLinearHSL=J,d.generateMonochromeLinear=W,d.generateSemanticColors=T,d.generateThemeColors=V,d.generateThemePalette=Y,d.generateThemeVariants=A,d.getPresetColors=Z,d.getRgbStr=k,d.harmonizeColor=Q,d.hctToRgb=H,d.rgbToHct=C,Object.defineProperty(d,Symbol.toStringTag,{value:"Module"})});
package/dist/index.mjs CHANGED
@@ -1,263 +1,257 @@
1
1
  import m from "color";
2
- function W(t) {
3
- return m(t).rgb().round().color.join(",");
2
+ function U(n) {
3
+ return m(n).rgb().round().color.join(",");
4
4
  }
5
- const A = ["hex", "rgb", "hsl"];
6
- function P(t) {
7
- return !t || A.indexOf(t) < 0 ? "hex" : t;
5
+ const P = ["hex", "rgb", "hsl"];
6
+ function z(n) {
7
+ return !n || P.indexOf(n) < 0 ? "hex" : n;
8
8
  }
9
- function F(t, r) {
10
- const a = P(r);
11
- return a === "hex" ? t[a]().toLowerCase() : t[a]().round().string();
9
+ function F(n, o) {
10
+ const a = z(o);
11
+ return a === "hex" ? n[a]().toLowerCase() : n[a]().round().string();
12
12
  }
13
- function E(t, r, a) {
14
- const e = m(t), n = e.hue(), o = e.saturationv(), s = e.value(), c = ((b) => b >= 60 && b <= 240 ? 2.5 : b >= 0 && b < 60 || b > 300 && b <= 360 ? 1.5 : 2)(n), l = 100, f = 9, h = 100, u = 30;
13
+ function E(n, o, a) {
14
+ const e = m(n), t = e.hue(), r = e.saturationv(), s = e.value(), c = ((b) => b >= 60 && b <= 240 ? 2.5 : b >= 0 && b < 60 || b > 300 && b <= 360 ? 1.5 : 2)(t), l = 100, f = 9, u = 100, h = 30;
15
15
  function d(b, w) {
16
16
  let x;
17
- return n >= 60 && n <= 240 ? x = b ? n - c * w : n + c * w : x = b ? n + c * w : n - c * w, x < 0 ? x += 360 : x >= 360 && (x -= 360), Math.round(x);
17
+ return t >= 60 && t <= 240 ? x = b ? t - c * w : t + c * w : x = b ? t + c * w : t - c * w, x < 0 ? x += 360 : x >= 360 && (x -= 360), Math.round(x);
18
18
  }
19
19
  function g(b, w) {
20
20
  let x;
21
21
  if (b)
22
- x = o <= f ? o : o - (o - f) / 5.5 * Math.pow(w, 1.05);
22
+ x = r <= f ? r : r - (r - f) / 5.5 * Math.pow(w, 1.05);
23
23
  else {
24
- const k = Math.min(l, o + 30);
25
- x = o + (k - o) / 4.2 * Math.pow(w, 0.95);
24
+ const A = Math.min(l, r + 30);
25
+ x = r + (A - r) / 4.2 * Math.pow(w, 0.95);
26
26
  }
27
27
  return Math.max(0, Math.min(100, x));
28
28
  }
29
- function M(b, w) {
30
- return b ? Math.min(h, s + (h - s) / 5.2 * Math.pow(w, 0.9)) : s <= u ? s : Math.max(u, s - (s - u) / 4.2 * Math.pow(w, 1.05));
29
+ function p(b, w) {
30
+ return b ? Math.min(u, s + (u - s) / 5.2 * Math.pow(w, 0.9)) : s <= h ? s : Math.max(h, s - (s - h) / 4.2 * Math.pow(w, 1.05));
31
31
  }
32
- const p = r < 6, C = p ? 6 - r : r - 6, S = r === 6 ? e : m({
33
- h: d(p, C),
34
- s: g(p, C),
35
- v: M(p, C)
32
+ const M = o < 6, S = M ? 6 - o : o - 6, y = o === 6 ? e : m({
33
+ h: d(M, S),
34
+ s: g(M, S),
35
+ v: p(M, S)
36
36
  });
37
- return F(S, a);
37
+ return F(y, a);
38
38
  }
39
- function v(t, r, a) {
40
- const e = m(E(t, 10 - r + 1)), n = m(t), o = n.hue(), s = n.saturationv(), c = m({
41
- h: n.hue(),
42
- s: h(6),
43
- v: n.value()
39
+ function v(n, o, a) {
40
+ const e = m(E(n, 10 - o + 1)), t = m(n), r = t.hue(), s = t.saturationv(), c = m({
41
+ h: t.hue(),
42
+ s: u(6),
43
+ v: t.value()
44
44
  }).saturationv(), l = Math.ceil((c - 9) / 4), f = Math.ceil((100 - c) / 5);
45
- function h(d) {
45
+ function u(d) {
46
46
  if (d < 6)
47
47
  return c + (6 - d) * f;
48
48
  if (d === 6) {
49
- if (o >= 0 && o < 50)
49
+ if (r >= 0 && r < 50)
50
50
  return s - 15;
51
- if (o >= 50 && o < 191)
51
+ if (r >= 50 && r < 191)
52
52
  return s - 20;
53
- if (o >= 191 && o <= 360)
53
+ if (r >= 191 && r <= 360)
54
54
  return s - 15;
55
55
  }
56
56
  return c - l * (d - 6);
57
57
  }
58
- const u = m({
58
+ const h = m({
59
59
  h: e.hue(),
60
- s: h(r),
60
+ s: u(o),
61
61
  v: e.value()
62
62
  });
63
- return F(u, a);
63
+ return F(h, a);
64
64
  }
65
- function I(t, r = {}) {
66
- const { dark: a, list: e, index: n = 6, format: o = "hex" } = r;
65
+ function I(n, o = {}) {
66
+ const { dark: a, list: e, index: t = 6, format: r = "hex" } = o;
67
67
  if (e) {
68
68
  const s = [], i = a ? v : E;
69
69
  for (let c = 1; c <= 10; c++)
70
- s.push(i(t, c, o));
70
+ s.push(i(n, c, r));
71
71
  return s;
72
72
  }
73
- return a ? v(t, n, o) : E(t, n, o);
73
+ return a ? v(n, t, r) : E(n, t, r);
74
74
  }
75
- async function $(t) {
75
+ async function B(n) {
76
76
  try {
77
- const r = await z(t), a = B(r);
78
- return V(a);
79
- } catch (r) {
80
- throw console.error("提取图片颜色失败:", r), r;
77
+ const o = await k(n), a = V(o);
78
+ return G(a);
79
+ } catch (o) {
80
+ throw console.error("提取图片颜色失败:", o), o;
81
81
  }
82
82
  }
83
- async function z(t) {
84
- return new Promise((r, a) => {
83
+ async function k(n) {
84
+ return new Promise((o, a) => {
85
85
  try {
86
- const e = document.createElement("canvas"), n = e.getContext("2d"), o = Math.min(t.width, 100), s = Math.min(t.height, 100), i = Math.min(o / t.width, s / t.height);
87
- e.width = t.width * i, e.height = t.height * i, n.drawImage(t, 0, 0, e.width, e.height);
88
- const c = n.getImageData(0, 0, e.width, e.height);
89
- r(c);
86
+ const e = document.createElement("canvas"), t = e.getContext("2d"), r = Math.min(n.width, 100), s = Math.min(n.height, 100), i = Math.min(r / n.width, s / n.height);
87
+ e.width = n.width * i, e.height = n.height * i, t.drawImage(n, 0, 0, e.width, e.height);
88
+ const c = t.getImageData(0, 0, e.width, e.height);
89
+ o(c);
90
90
  } catch (e) {
91
91
  a(e);
92
92
  }
93
93
  });
94
94
  }
95
- function B(t) {
96
- const r = t.data, a = /* @__PURE__ */ new Map();
97
- for (let n = 0; n < r.length; n += 4) {
98
- const o = r[n], s = r[n + 1], i = r[n + 2];
99
- if (r[n + 3] < 128) continue;
100
- const l = Math.round(o / 16) * 16, f = Math.round(s / 16) * 16, h = Math.round(i / 16) * 16, u = `${l},${f},${h}`;
101
- a.has(u) ? a.set(u, a.get(u) + 1) : a.set(u, 1);
95
+ function V(n) {
96
+ const o = n.data, a = /* @__PURE__ */ new Map();
97
+ for (let t = 0; t < o.length; t += 4) {
98
+ const r = o[t], s = o[t + 1], i = o[t + 2];
99
+ if (o[t + 3] < 128) continue;
100
+ const l = Math.round(r / 16) * 16, f = Math.round(s / 16) * 16, u = Math.round(i / 16) * 16, h = `${l},${f},${u}`;
101
+ a.has(h) ? a.set(h, a.get(h) + 1) : a.set(h, 1);
102
102
  }
103
103
  const e = [];
104
- return a.forEach((n, o) => {
105
- const [s, i, c] = o.split(",").map(Number);
106
- e.push({ r: s, g: i, b: c, count: n });
104
+ return a.forEach((t, r) => {
105
+ const [s, i, c] = r.split(",").map(Number);
106
+ e.push({ r: s, g: i, b: c, count: t });
107
107
  }), e;
108
108
  }
109
- function V(t) {
110
- t.sort((n, o) => o.count - n.count);
111
- const r = t.filter((n) => {
112
- const { r: o, g: s, b: i } = n, c = Math.max(o, s, i), l = Math.min(o, s, i), f = c - l, h = c === 0 ? 0 : f / c, u = c / 255;
113
- return h > 0.15 && u > 0.2 && u < 0.8;
114
- }), a = r.length > 0 ? r[0] : t[0];
109
+ function G(n) {
110
+ n.sort((t, r) => r.count - t.count);
111
+ const o = n.filter((t) => {
112
+ const { r, g: s, b: i } = t, c = Math.max(r, s, i), l = Math.min(r, s, i), f = c - l, u = c === 0 ? 0 : f / c, h = c / 255;
113
+ return u > 0.15 && h > 0.2 && h < 0.8;
114
+ }), a = o.length > 0 ? o[0] : n[0];
115
115
  return m({ r: a.r, g: a.g, b: a.b }).hex();
116
116
  }
117
- function J(t) {
118
- return new Promise((r, a) => {
119
- if (!t.type.startsWith("image/")) {
117
+ function K(n) {
118
+ return new Promise((o, a) => {
119
+ if (!n.type.startsWith("image/")) {
120
120
  a(new Error("请选择图片文件"));
121
121
  return;
122
122
  }
123
123
  const e = new FileReader();
124
- e.onload = async (n) => {
124
+ e.onload = async (t) => {
125
125
  try {
126
- const o = new Image();
127
- o.onload = async () => {
126
+ const r = new Image();
127
+ r.onload = async () => {
128
128
  try {
129
- const s = await $(o);
130
- r(s);
129
+ const s = await B(r);
130
+ o(s);
131
131
  } catch (s) {
132
132
  a(s);
133
133
  }
134
- }, o.onerror = () => a(new Error("图片加载失败")), o.src = n.target.result;
135
- } catch (o) {
136
- a(o);
134
+ }, r.onerror = () => a(new Error("图片加载失败")), r.src = t.target.result;
135
+ } catch (r) {
136
+ a(r);
137
137
  }
138
- }, e.onerror = () => a(new Error("文件读取失败")), e.readAsDataURL(t);
138
+ }, e.onerror = () => a(new Error("文件读取失败")), e.readAsDataURL(n);
139
139
  });
140
140
  }
141
- function L(t, r, a = {}) {
142
- const { steps: e = 10, format: n = "hex", includeEnds: o = !0 } = a;
141
+ function $(n, o, a = {}) {
142
+ const { steps: e = 10, format: t = "hex", includeEnds: r = !0 } = a;
143
143
  if (e < 2)
144
144
  throw new Error("步数必须至少为2");
145
- const s = m(t), i = m(r), c = [], l = o ? e : e + 2, f = 1 / (l - 1);
146
- for (let h = 0; h < l; h++) {
147
- const u = h * f, d = Math.round(s.red() + (i.red() - s.red()) * u), g = Math.round(s.green() + (i.green() - s.green()) * u), M = Math.round(s.blue() + (i.blue() - s.blue()) * u), p = m({ r: d, g, b: M });
148
- !o && (h === 0 || h === l - 1) || c.push(F(p, n));
145
+ const s = m(n), i = m(o), c = [], l = r ? e : e + 2, f = 1 / (l - 1);
146
+ for (let u = 0; u < l; u++) {
147
+ const h = u * f, d = Math.round(s.red() + (i.red() - s.red()) * h), g = Math.round(s.green() + (i.green() - s.green()) * h), p = Math.round(s.blue() + (i.blue() - s.blue()) * h), M = m({ r: d, g, b: p });
148
+ !r && (u === 0 || u === l - 1) || c.push(F(M, t));
149
149
  }
150
150
  return c;
151
151
  }
152
- function Q(t = {}) {
152
+ function W(n = {}) {
153
153
  const {
154
- startGray: r = "#ffffff",
154
+ startGray: o = "#ffffff",
155
155
  endGray: a = "#000000",
156
156
  steps: e = 10,
157
- format: n = "hex"
158
- } = t;
159
- return L(r, a, { steps: e, format: n, includeEnds: !0 });
157
+ format: t = "hex"
158
+ } = n;
159
+ return $(o, a, { steps: e, format: t, includeEnds: !0 });
160
160
  }
161
- function X(t, r = {}) {
162
- const { steps: a = 10, format: e = "hex", lightnessRange: n = 80 } = r, s = m(t).hsl(), i = s.lightness(), c = Math.min(95, i + n / 2), l = Math.max(5, i - n / 2), f = m({
161
+ function J(n, o = {}) {
162
+ const { steps: a = 10, format: e = "hex", lightnessRange: t = 80 } = o, s = m(n).hsl(), i = s.lightness(), c = Math.min(95, i + t / 2), l = Math.max(5, i - t / 2), f = m({
163
163
  h: s.hue(),
164
164
  s: s.saturationl(),
165
165
  l: c
166
- }), h = m({
166
+ }), u = m({
167
167
  h: s.hue(),
168
168
  s: s.saturationl(),
169
169
  l
170
170
  });
171
- return L(f.hex(), h.hex(), { steps: a, format: e, includeEnds: !0 });
171
+ return $(f.hex(), u.hex(), { steps: a, format: e, includeEnds: !0 });
172
172
  }
173
- function Y(t, r, a = {}) {
174
- const { steps: e = 10, format: n = "hex", includeEnds: o = !0 } = a;
173
+ function Q(n, o, a = {}) {
174
+ const { steps: e = 10, format: t = "hex", includeEnds: r = !0 } = a;
175
175
  if (e < 2)
176
176
  throw new Error("步数必须至少为2");
177
- const s = m(t).hsl(), i = m(r).hsl(), c = [], l = o ? e : e + 2, f = 1 / (l - 1);
178
- let h = s.hue() || 0, u = i.hue() || 0;
179
- const d = u - h;
180
- Math.abs(d) > 180 && (d > 0 ? h += 360 : u += 360);
177
+ const s = m(n).hsl(), i = m(o).hsl(), c = [], l = r ? e : e + 2, f = 1 / (l - 1);
178
+ let u = s.hue() || 0, h = i.hue() || 0;
179
+ const d = h - u;
180
+ Math.abs(d) > 180 && (d > 0 ? u += 360 : h += 360);
181
181
  for (let g = 0; g < l; g++) {
182
- const M = g * f;
183
- let p = h + (u - h) * M;
184
- const C = s.saturationl() + (i.saturationl() - s.saturationl()) * M, S = s.lightness() + (i.lightness() - s.lightness()) * M;
185
- p = p % 360, p < 0 && (p += 360);
186
- const b = m({ h: p, s: C, l: S });
187
- !o && (g === 0 || g === l - 1) || c.push(F(b, n));
182
+ const p = g * f;
183
+ let M = u + (h - u) * p;
184
+ const S = s.saturationl() + (i.saturationl() - s.saturationl()) * p, y = s.lightness() + (i.lightness() - s.lightness()) * p;
185
+ M = M % 360, M < 0 && (M += 360);
186
+ const b = m({ h: M, s: S, l: y });
187
+ !r && (g === 0 || g === l - 1) || c.push(F(b, t));
188
188
  }
189
189
  return c;
190
190
  }
191
- function y(t) {
192
- const r = t.replace("#", ""), a = parseInt(r.substr(0, 2), 16) / 255, e = parseInt(r.substr(2, 2), 16) / 255, n = parseInt(r.substr(4, 2), 16) / 255, o = Math.max(a, e, n), s = Math.min(a, e, n), i = o - s;
191
+ function C(n) {
192
+ const o = n.replace("#", ""), a = parseInt(o.substr(0, 2), 16) / 255, e = parseInt(o.substr(2, 2), 16) / 255, t = parseInt(o.substr(4, 2), 16) / 255, r = Math.max(a, e, t), s = Math.min(a, e, t), i = r - s;
193
193
  let c = 0;
194
- i !== 0 && (o === a ? c = (e - n) / i % 6 : o === e ? c = (n - a) / i + 2 : c = (a - e) / i + 4), c = Math.round(c * 60), c < 0 && (c += 360);
195
- const l = Math.round((0.299 * a + 0.587 * e + 0.114 * n) * 100), f = (o + s) / 2, h = i === 0 ? 0 : i / (1 - Math.abs(2 * f - 1)), u = Math.round(h * Math.min(l, 100 - l));
196
- return { h: c, c: u, t: l };
194
+ i !== 0 && (r === a ? c = (e - t) / i % 6 : r === e ? c = (t - a) / i + 2 : c = (a - e) / i + 4), c = Math.round(c * 60), c < 0 && (c += 360);
195
+ const l = Math.round((0.299 * a + 0.587 * e + 0.114 * t) * 100), f = (r + s) / 2, u = i === 0 ? 0 : i / (1 - Math.abs(2 * f - 1)), h = Math.round(u * Math.min(l, 100 - l));
196
+ return { h: c, c: h, t: l };
197
197
  }
198
- function D(t) {
199
- const { h: r, c: a, t: e } = t, n = (r % 360 + 360) % 360, o = Math.max(0, Math.min(150, a)), s = Math.max(0, Math.min(100, e)), i = s / 100, c = s === 0 || s === 100 ? 0 : o / Math.min(s, 100 - s), l = (1 - Math.abs(2 * i - 1)) * Math.min(1, c), f = l * (1 - Math.abs(n / 60 % 2 - 1)), h = i - l / 2;
200
- let u, d, g;
201
- n >= 0 && n < 60 ? [u, d, g] = [l, f, 0] : n >= 60 && n < 120 ? [u, d, g] = [f, l, 0] : n >= 120 && n < 180 ? [u, d, g] = [0, l, f] : n >= 180 && n < 240 ? [u, d, g] = [0, f, l] : n >= 240 && n < 300 ? [u, d, g] = [f, 0, l] : [u, d, g] = [l, 0, f];
202
- const M = (p) => {
203
- const C = Math.max(0, Math.min(1, p + h)), S = Math.round(C * 255).toString(16);
204
- return S.length === 1 ? "0" + S : S;
198
+ function D(n) {
199
+ const { h: o, c: a, t: e } = n, t = (o % 360 + 360) % 360, r = Math.max(0, Math.min(150, a)), s = Math.max(0, Math.min(100, e)), i = s / 100, c = s === 0 || s === 100 ? 0 : r / Math.min(s, 100 - s), l = (1 - Math.abs(2 * i - 1)) * Math.min(1, c), f = l * (1 - Math.abs(t / 60 % 2 - 1)), u = i - l / 2;
200
+ let h, d, g;
201
+ t >= 0 && t < 60 ? [h, d, g] = [l, f, 0] : t >= 60 && t < 120 ? [h, d, g] = [f, l, 0] : t >= 120 && t < 180 ? [h, d, g] = [0, l, f] : t >= 180 && t < 240 ? [h, d, g] = [0, f, l] : t >= 240 && t < 300 ? [h, d, g] = [f, 0, l] : [h, d, g] = [l, 0, f];
202
+ const p = (M) => {
203
+ const S = Math.max(0, Math.min(1, M + u)), y = Math.round(S * 255).toString(16);
204
+ return y.length === 1 ? "0" + y : y;
205
205
  };
206
- return `#${M(u)}${M(d)}${M(g)}`;
206
+ return `#${p(h)}${p(d)}${p(g)}`;
207
207
  }
208
- function R(t, r, a = 0.5) {
209
- const e = y(t), n = y(r);
210
- let o = e.h, s = n.h, i = s - o;
211
- Math.abs(i) > 180 && (i > 0 ? o += 360 : s += 360);
212
- const c = (o + (s - o) * a) % 360, l = e.c + (n.c - e.c) * a, f = e.t + (n.t - e.t) * a;
208
+ function R(n, o, a = 0.5) {
209
+ const e = C(n), t = C(o);
210
+ let r = e.h, s = t.h, i = s - r;
211
+ Math.abs(i) > 180 && (i > 0 ? r += 360 : s += 360);
212
+ const c = (r + (s - r) * a) % 360, l = e.c + (t.c - e.c) * a, f = e.t + (t.t - e.t) * a;
213
213
  return D({
214
214
  h: c < 0 ? c + 360 : c,
215
215
  c: Math.max(0, Math.round(l)),
216
216
  t: Math.max(0, Math.min(100, Math.round(f)))
217
217
  });
218
218
  }
219
- function G(t, r, a = 0.15) {
220
- const e = y(t), n = y(r);
221
- let o = n.h, s = e.h, i = s - o;
222
- Math.abs(i) > 180 && (i > 0 ? o += 360 : s += 360, i = s - o);
223
- const c = (o + i * a) % 360;
219
+ function X(n, o, a = 0.15) {
220
+ const e = C(n), t = C(o);
221
+ let r = t.h, s = e.h, i = s - r;
222
+ Math.abs(i) > 180 && (i > 0 ? r += 360 : s += 360, i = s - r);
223
+ const c = (r + i * a) % 360;
224
224
  return D({
225
225
  h: c < 0 ? c + 360 : c,
226
- c: n.c,
226
+ c: t.c,
227
227
  // 保持原有色度
228
- t: n.t
228
+ t: t.t
229
229
  // 保持原有色调
230
230
  });
231
231
  }
232
- function O(t, r = [10, 20, 30, 40, 50, 60, 70, 80, 90]) {
233
- const a = y(t);
232
+ function O(n, o = [10, 20, 30, 40, 50, 60, 70, 80, 90]) {
233
+ const a = C(n);
234
234
  let e;
235
- return Array.isArray(r) ? e = r : r && r.tones && Array.isArray(r.tones) ? e = r.tones : e = [10, 20, 30, 40, 50, 60, 70, 80, 90], e.map((n) => D({
235
+ return Array.isArray(o) ? e = o : o && o.tones && Array.isArray(o.tones) ? e = o.tones : e = [10, 20, 30, 40, 50, 60, 70, 80, 90], e.map((t) => D({
236
236
  h: a.h,
237
237
  c: a.c,
238
- t: n
238
+ t
239
239
  }));
240
240
  }
241
- function T(t, r, a = 0.15) {
241
+ function T(n, o, a = 0.2) {
242
242
  const e = {};
243
- for (const [n, o] of Object.entries(r))
244
- e[n] = G(t, o, a);
243
+ for (const [t, r] of Object.entries(o))
244
+ e[t] = R(n, r, a);
245
245
  return e;
246
246
  }
247
- function N(t, r, a = 0.2) {
248
- const e = {};
249
- for (const [n, o] of Object.entries(r))
250
- e[n] = R(t, o, a);
251
- return e;
252
- }
253
- function q(t, r = {}) {
254
- const { baseGray: a = "#666666" } = r, { blendRatio: e = 0.08, isDark: n = !1 } = r, o = y(a), s = {};
255
- return (n ? [95, 90, 85, 80, 70, 60, 50, 40, 30, 20, 15, 10] : [10, 15, 20, 30, 40, 50, 60, 70, 80, 85, 90, 95]).forEach((c, l) => {
256
- const f = { h: o.h, c: o.c, t: c }, h = R(D(f), t, e);
257
- s[`gray-${l + 1}`] = h;
247
+ function N(n, o = {}) {
248
+ const { baseGray: a = "#666666" } = o, { blendRatio: e = 0.08, isDark: t = !1 } = o, r = C(a), s = {};
249
+ return (t ? [95, 90, 85, 80, 70, 60, 50, 40, 30, 20, 15, 10] : [10, 15, 20, 30, 40, 50, 60, 70, 80, 85, 90, 95]).forEach((c, l) => {
250
+ const f = { h: r.h, c: r.c, t: c }, u = R(D(f), n, e);
251
+ s[`gray-${l + 1}`] = u;
258
252
  }), s;
259
253
  }
260
- function j(t, r = {}) {
254
+ function L(n, o = {}) {
261
255
  const {
262
256
  semanticColors: a = {
263
257
  success: "#52c41a",
@@ -266,83 +260,79 @@ function j(t, r = {}) {
266
260
  info: "#1890ff"
267
261
  },
268
262
  blendRatio: e = 0.12,
269
- isDark: n = !1
270
- } = r, o = {};
263
+ isDark: t = !1
264
+ } = o, r = {};
271
265
  return Object.entries(a).forEach(([s, i]) => {
272
- const c = {}, l = y(i);
273
- (n ? [90, 80, 70, 60, 50, 40, 30, 25, 20, 15] : [15, 25, 35, 45, 55, 65, 75, 85, 90, 95]).forEach((h, u) => {
274
- const d = { h: l.h, c: l.c, t: h }, g = R(D(d), t, e);
275
- c[`${s}-${u + 1}`] = g;
276
- }), Object.assign(o, c);
277
- }), o;
266
+ const c = {}, l = C(i);
267
+ (t ? [90, 80, 70, 60, 50, 40, 30, 25, 20, 15] : [15, 25, 35, 45, 55, 65, 75, 85, 90, 95]).forEach((u, h) => {
268
+ const d = { h: l.h, c: l.c, t: u }, g = R(D(d), n, e);
269
+ c[`${s}-${h + 1}`] = g;
270
+ }), Object.assign(r, c);
271
+ }), r;
278
272
  }
279
- function U(t, r = {}) {
280
- const { isDark: a = !1 } = r, e = y(t), n = {};
273
+ function q(n, o = {}) {
274
+ const { isDark: a = !1 } = o, e = C(n), t = {};
281
275
  return (a ? [90, 80, 70, 60, 50, 40, 30, 25, 20, 15] : [15, 25, 35, 45, 55, 65, 75, 85, 90, 95]).forEach((s, i) => {
282
276
  const c = { h: e.h, c: e.c, t: s };
283
- n[`theme-${i + 1}`] = D(c);
284
- }), n;
277
+ t[`theme-${i + 1}`] = D(c);
278
+ }), t;
285
279
  }
286
- function Z(t, r = {}) {
280
+ function Y(n, o = {}) {
287
281
  const {
288
282
  baseGray: a = "#666666",
289
283
  isDark: e = !1,
290
- semanticColors: n,
291
- controlBlendRatio: o = 0.08,
284
+ semanticColors: t,
285
+ controlBlendRatio: r = 0.08,
292
286
  semanticBlendRatio: s = 0.12
293
- } = r;
287
+ } = o;
294
288
  return {
295
289
  // 1. 基础控件颜色(灰色系1-12)
296
- controls: q(t, {
290
+ controls: N(n, {
297
291
  baseGray: a,
298
- blendRatio: o,
292
+ blendRatio: r,
299
293
  isDark: e
300
294
  }),
301
295
  // 2. 表意色(1-10)
302
- semantic: j(t, {
303
- semanticColors: n,
296
+ semantic: L(n, {
297
+ semanticColors: t,
304
298
  blendRatio: s,
305
299
  isDark: e
306
300
  }),
307
301
  // 3. 主题色(1-10)
308
- theme: U(t, { isDark: e })
302
+ theme: q(n, { isDark: e })
309
303
  };
310
304
  }
311
- function _(t, r = {}) {
305
+ function Z(n, o = {}) {
312
306
  const {
313
307
  semanticColors: a = {
314
- success: "#4caf50",
315
- warning: "#ff9800",
316
- error: "#f44336",
317
- info: "#2196f3"
308
+ success: "#52c41a",
309
+ warning: "#faad14",
310
+ error: "#ff4d4f",
311
+ info: "#1890ff"
318
312
  },
319
313
  uiColors: e = {
320
- primary: t,
321
- "primary-light": "#ffffff",
322
- "primary-lighter": "#f8f9ff",
323
- "primary-dark": "#000000",
324
- "primary-darker": "#0a0a0a",
325
- accent: "#722ed1",
326
- "neutral-1": "#f7f8fa",
327
- "neutral-2": "#f2f3f5",
328
- "neutral-3": "#e5e6eb",
329
- "neutral-4": "#c9cdd4",
330
- "neutral-5": "#a9aeb8",
331
- "neutral-6": "#86909c",
332
314
  background: "#ffffff",
333
- surface: "#f8f9fa",
334
- border: "#e5e6eb",
335
- disabled: "#c9cdd4"
315
+ surface: "#fafafa",
316
+ border: "#d9d9d9",
317
+ disabled: "#f5f5f5"
336
318
  },
337
- harmonizeRatio: n = 0.15,
338
- blendRatio: o = 0.12,
319
+ harmonizeRatio: t = 0.15,
320
+ blendRatio: r = 0.12,
339
321
  generateVariants: s = !0
340
- } = r, i = {
341
- theme: t,
342
- semantic: T(t, a, n),
343
- ui: N(t, e, o)
322
+ } = o, i = L(n, { semanticColors: a, blendRatio: t }), c = {};
323
+ Object.entries(a).forEach(([f]) => {
324
+ c[f] = {};
325
+ for (let u = 1; u <= 10; u++) {
326
+ const h = `${f}-${u}`;
327
+ i[h] && (c[f][u] = i[h]);
328
+ }
329
+ });
330
+ const l = {
331
+ theme: n,
332
+ semantic: c,
333
+ ui: T(n, e, r)
344
334
  };
345
- return s && (i.variants = O(t)), i;
335
+ return s && (l.variants = O(n)), l;
346
336
  }
347
337
  const H = {
348
338
  red: "#F53F3F",
@@ -359,11 +349,11 @@ const H = {
359
349
  pinkpurple: "#D91AD9",
360
350
  magenta: "#F5319D"
361
351
  };
362
- function tt() {
363
- const t = {};
364
- return Object.keys(H).forEach((r) => {
365
- t[r] = {}, t[r].light = I(H[r], { list: !0 }), t[r].dark = I(H[r], { list: !0, dark: !0 }), t[r].primary = H[r];
366
- }), t.gray = {}, t.gray.light = [
352
+ function _() {
353
+ const n = {};
354
+ return Object.keys(H).forEach((o) => {
355
+ n[o] = {}, n[o].light = I(H[o], { list: !0 }), n[o].dark = I(H[o], { list: !0, dark: !0 }), n[o].primary = H[o];
356
+ }), n.gray = {}, n.gray.light = [
367
357
  "#f7f8fa",
368
358
  "#f2f3f5",
369
359
  "#e5e6eb",
@@ -374,7 +364,7 @@ function tt() {
374
364
  "#4e5969",
375
365
  "#272e3b",
376
366
  "#1d2129"
377
- ], t.gray.dark = [
367
+ ], n.gray.dark = [
378
368
  "#17171a",
379
369
  "#2e2e30",
380
370
  "#484849",
@@ -385,29 +375,28 @@ function tt() {
385
375
  "#c5c5c5",
386
376
  "#dfdfdf",
387
377
  "#f6f6f6"
388
- ], t.gray.primary = t.gray.light[6], t;
378
+ ], n.gray.primary = n.gray.light[6], n;
389
379
  }
390
380
  export {
391
381
  R as blendInHct,
392
- T as blendSemanticColors,
393
- N as blendUIColors,
382
+ T as blendUIColors,
394
383
  H as colorList,
395
- J as extractColorFromFile,
396
- $ as extractColorFromImage,
384
+ K as extractColorFromFile,
385
+ B as extractColorFromImage,
397
386
  I as generate,
398
- q as generateControlColors,
399
- Q as generateGrayLinear,
400
- Z as generateInterfaceColorSystem,
401
- L as generateLinear,
402
- Y as generateLinearHSL,
403
- X as generateMonochromeLinear,
404
- j as generateSemanticColors,
405
- U as generateThemeColors,
406
- _ as generateThemePalette,
387
+ N as generateControlColors,
388
+ W as generateGrayLinear,
389
+ Y as generateInterfaceColorSystem,
390
+ $ as generateLinear,
391
+ Q as generateLinearHSL,
392
+ J as generateMonochromeLinear,
393
+ L as generateSemanticColors,
394
+ q as generateThemeColors,
395
+ Z as generateThemePalette,
407
396
  O as generateThemeVariants,
408
- tt as getPresetColors,
409
- W as getRgbStr,
410
- G as harmonizeColor,
397
+ _ as getPresetColors,
398
+ U as getRgbStr,
399
+ X as harmonizeColor,
411
400
  D as hctToRgb,
412
- y as rgbToHct
401
+ C as rgbToHct
413
402
  };
@@ -1,31 +1,3 @@
1
- /**
2
- * 生成基础控件颜色(灰色系1-12)
3
- * @param {string} themeColor - 主题颜色
4
- * @param {Object} options - 配置选项
5
- * @returns {Object} 基础控件颜色对象
6
- */
7
- export function generateControlColors(themeColor: string, options?: Object): Object;
8
- /**
9
- * 生成表意色(1-10)
10
- * @param {string} themeColor - 主题颜色
11
- * @param {Object} options - 配置选项
12
- * @returns {Object} 表意色对象
13
- */
14
- export function generateSemanticColors(themeColor: string, options?: Object): Object;
15
- /**
16
- * 生成主题色(1-10)
17
- * @param {string} themeColor - 主题颜色
18
- * @param {Object} options - 配置选项
19
- * @returns {Object} 主题色对象
20
- */
21
- export function generateThemeColors(themeColor: string, options?: Object): Object;
22
- /**
23
- * 生成完整的界面色彩系统
24
- * @param {string} themeColor - 主题颜色
25
- * @param {Object} options - 配置选项
26
- * @returns {Object} 包含三个部分的完整色彩系统
27
- */
28
- export function generateInterfaceColorSystem(themeColor: string, options?: Object): Object;
29
1
  /**
30
2
  * 主题色混合模块
31
3
  * 基于 Material Design 3 的 HCT 颜色空间实现颜色混合和调和
@@ -71,14 +43,6 @@ export function harmonizeColor(themeColor: string, targetColor: string, harmoniz
71
43
  * @returns {Array} 主题色变体数组
72
44
  */
73
45
  export function generateThemeVariants(themeColor: string, options?: Object | any[]): any[];
74
- /**
75
- * 表意色混合 - 为成功、警告、错误等状态色添加主题色调
76
- * @param {string} themeColor - 主题色
77
- * @param {Object} semanticColors - 表意色对象,如 {success: '#4caf50', warning: '#ff9800', error: '#f44336'}
78
- * @param {number} blendRatio - 混合强度
79
- * @returns {Object} 混合后的表意色对象
80
- */
81
- export function blendSemanticColors(themeColor: string, semanticColors: Object, blendRatio?: number): Object;
82
46
  /**
83
47
  * UI 元素颜色混合 - 为按钮、卡片等 UI 元素生成主题化颜色
84
48
  * @param {string} themeColor - 主题色
@@ -87,6 +51,34 @@ export function blendSemanticColors(themeColor: string, semanticColors: Object,
87
51
  * @returns {Object} 混合后的 UI 颜色对象
88
52
  */
89
53
  export function blendUIColors(themeColor: string, uiColors: Object, blendRatio?: number): Object;
54
+ /**
55
+ * 生成基础控件颜色(灰色系1-12)
56
+ * @param {string} themeColor - 主题颜色
57
+ * @param {Object} options - 配置选项
58
+ * @returns {Object} 基础控件颜色对象
59
+ */
60
+ export function generateControlColors(themeColor: string, options?: Object): Object;
61
+ /**
62
+ * 生成表意色(1-10)
63
+ * @param {string} themeColor - 主题颜色
64
+ * @param {Object} options - 配置选项
65
+ * @returns {Object} 表意色对象
66
+ */
67
+ export function generateSemanticColors(themeColor: string, options?: Object): Object;
68
+ /**
69
+ * 生成主题色(1-10)
70
+ * @param {string} themeColor - 主题颜色
71
+ * @param {Object} options - 配置选项
72
+ * @returns {Object} 主题色对象
73
+ */
74
+ export function generateThemeColors(themeColor: string, options?: Object): Object;
75
+ /**
76
+ * 生成完整的界面色彩系统
77
+ * @param {string} themeColor - 主题颜色
78
+ * @param {Object} options - 配置选项
79
+ * @returns {Object} 包含三个部分的完整色彩系统
80
+ */
81
+ export function generateInterfaceColorSystem(themeColor: string, options?: Object): Object;
90
82
  /**
91
83
  * 生成完整的主题色板
92
84
  * @param {string} themeColor - 主题色
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@aviala-design/color",
3
- "version": "0.2.0",
3
+ "version": "0.2.2",
4
4
  "description": "Aviala Design color utils",
5
5
  "main": "./dist/index.js",
6
6
  "module": "./dist/index.mjs",