@aviala-design/color 0.2.1 → 0.2.3

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
@@ -7,7 +7,7 @@ This library provides four core functionalities:
7
7
  1. **Color Palette Generation**: Generate gradient swatches containing ten colors using algorithms, supporting both light and dark modes.
8
8
  2. **Image Color Extraction**: Extract dominant colors from images for generating matching palettes or theme colors.
9
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.
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.
11
11
 
12
12
  ## Usage
13
13
 
@@ -22,6 +22,7 @@ import {
22
22
  getRgbStr,
23
23
  extractColorFromImage,
24
24
  generateInterfaceColorSystem,
25
+ generateThemePalette,
25
26
  blendInHct,
26
27
  rgbToHct,
27
28
  hctToRgb
@@ -56,6 +57,19 @@ console.log(colorSystem.warning); // Warning colors
56
57
  console.log(colorSystem.error); // Error colors
57
58
  console.log(colorSystem.info); // Info colors
58
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
+
59
73
  // Theme blending
60
74
  const blended = blendInHct([64, 196, 255], [255, 87, 34], 'overlay', 0.5);
61
75
  console.log(blended); // Blended RGB color
@@ -150,6 +164,45 @@ const customColorSystem = generateInterfaceColorSystem('#3491FA', {
150
164
  });
151
165
  ```
152
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
+
153
206
  ### rgbToHct(rgb: number[])
154
207
 
155
208
  Convert RGB color to HCT color space.
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,m){typeof exports=="object"&&typeof module<"u"?m(exports,require("color")):typeof define=="function"&&define.amd?define(["exports","color"],m):(d=typeof globalThis<"u"?globalThis:d||self,m(d.AvialaColor={},d.Color))})(this,function(d,m){"use strict";function V(t){return m(t).rgb().round().color.join(",")}const G=["hex","rgb","hsl"];function O(t){return!t||G.indexOf(t)<0?"hex":t}function E(t,o){const s=O(o);return s==="hex"?t[s]().toLowerCase():t[s]().round().string()}function L(t,o,s){const n=m(t),e=n.hue(),a=n.saturationv(),r=n.value(),c=(M=>M>=60&&M<=240?2.5:M>=0&&M<60||M>300&&M<=360?1.5:2)(e),l=100,f=9,h=100,u=30;function g(M,y){let p;return e>=60&&e<=240?p=M?e-c*y:e+c*y:p=M?e+c*y:e-c*y,p<0?p+=360:p>=360&&(p-=360),Math.round(p)}function b(M,y){let p;if(M)p=a<=f?a:a-(a-f)/5.5*Math.pow(y,1.05);else{const _=Math.min(l,a+30);p=a+(_-a)/4.2*Math.pow(y,.95)}return Math.max(0,Math.min(100,p))}function S(M,y){return M?Math.min(h,r+(h-r)/5.2*Math.pow(y,.9)):r<=u?r:Math.max(u,r-(r-u)/4.2*Math.pow(y,1.05))}const w=o<6,x=w?6-o:o-6,D=o===6?n:m({h:g(w,x),s:b(w,x),v:S(w,x)});return E(D,s)}function A(t,o,s){const n=m(L(t,10-o+1)),e=m(t),a=e.hue(),r=e.saturationv(),c=m({h:e.hue(),s:h(6),v:e.value()}).saturationv(),l=Math.ceil((c-9)/4),f=Math.ceil((100-c)/5);function h(g){if(g<6)return c+(6-g)*f;if(g===6){if(a>=0&&a<50)return r-15;if(a>=50&&a<191)return r-20;if(a>=191&&a<=360)return r-15}return c-l*(g-6)}const u=m({h:n.hue(),s:h(o),v:n.value()});return E(u,s)}function v(t,o={}){const{dark:s,list:n,index:e=6,format:a="hex"}=o;if(n){const r=[],i=s?A:L;for(let c=1;c<=10;c++)r.push(i(t,c,a));return r}return s?A(t,e,a):L(t,e,a)}async function z(t){try{const o=await q(t),s=N(o);return j(s)}catch(o){throw console.error("提取图片颜色失败:",o),o}}async function q(t){return new Promise((o,s)=>{try{const n=document.createElement("canvas"),e=n.getContext("2d"),a=Math.min(t.width,100),r=Math.min(t.height,100),i=Math.min(a/t.width,r/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);o(c)}catch(n){s(n)}})}function N(t){const o=t.data,s=new Map;for(let e=0;e<o.length;e+=4){const a=o[e],r=o[e+1],i=o[e+2];if(o[e+3]<128)continue;const l=Math.round(a/16)*16,f=Math.round(r/16)*16,h=Math.round(i/16)*16,u=`${l},${f},${h}`;s.has(u)?s.set(u,s.get(u)+1):s.set(u,1)}const n=[];return s.forEach((e,a)=>{const[r,i,c]=a.split(",").map(Number);n.push({r,g:i,b:c,count:e})}),n}function j(t){t.sort((e,a)=>a.count-e.count);const o=t.filter(e=>{const{r:a,g:r,b:i}=e,c=Math.max(a,r,i),l=Math.min(a,r,i),f=c-l,h=c===0?0:f/c,u=c/255;return h>.15&&u>.2&&u<.8}),s=o.length>0?o[0]:t[0];return m({r:s.r,g:s.g,b:s.b}).hex()}function U(t){return new Promise((o,s)=>{if(!t.type.startsWith("image/")){s(new Error("请选择图片文件"));return}const n=new FileReader;n.onload=async e=>{try{const a=new Image;a.onload=async()=>{try{const r=await z(a);o(r)}catch(r){s(r)}},a.onerror=()=>s(new Error("图片加载失败")),a.src=e.target.result}catch(a){s(a)}},n.onerror=()=>s(new Error("文件读取失败")),n.readAsDataURL(t)})}function I(t,o,s={}){const{steps:n=10,format:e="hex",includeEnds:a=!0}=s;if(n<2)throw new Error("步数必须至少为2");const r=m(t),i=m(o),c=[],l=a?n:n+2,f=1/(l-1);for(let h=0;h<l;h++){const u=h*f,g=Math.round(r.red()+(i.red()-r.red())*u),b=Math.round(r.green()+(i.green()-r.green())*u),S=Math.round(r.blue()+(i.blue()-r.blue())*u),w=m({r:g,g:b,b:S});!a&&(h===0||h===l-1)||c.push(E(w,e))}return c}function K(t={}){const{startGray:o="#ffffff",endGray:s="#000000",steps:n=10,format:e="hex"}=t;return I(o,s,{steps:n,format:e,includeEnds:!0})}function W(t,o={}){const{steps:s=10,format:n="hex",lightnessRange:e=80}=o,r=m(t).hsl(),i=r.lightness(),c=Math.min(95,i+e/2),l=Math.max(5,i-e/2),f=m({h:r.hue(),s:r.saturationl(),l:c}),h=m({h:r.hue(),s:r.saturationl(),l});return I(f.hex(),h.hex(),{steps:s,format:n,includeEnds:!0})}function J(t,o,s={}){const{steps:n=10,format:e="hex",includeEnds:a=!0}=s;if(n<2)throw new Error("步数必须至少为2");const r=m(t).hsl(),i=m(o).hsl(),c=[],l=a?n:n+2,f=1/(l-1);let h=r.hue()||0,u=i.hue()||0;const g=u-h;Math.abs(g)>180&&(g>0?h+=360:u+=360);for(let b=0;b<l;b++){const S=b*f;let w=h+(u-h)*S;const x=r.saturationl()+(i.saturationl()-r.saturationl())*S,D=r.lightness()+(i.lightness()-r.lightness())*S;w=w%360,w<0&&(w+=360);const M=m({h:w,s:x,l:D});!a&&(b===0||b===l-1)||c.push(E(M,e))}return c}function C(t){const o=t.replace("#",""),s=parseInt(o.substr(0,2),16)/255,n=parseInt(o.substr(2,2),16)/255,e=parseInt(o.substr(4,2),16)/255,a=Math.max(s,n,e),r=Math.min(s,n,e),i=a-r;let c=0;i!==0&&(a===s?c=(n-e)/i%6:a===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),f=(a+r)/2,h=i===0?0:i/(1-Math.abs(2*f-1)),u=Math.round(h*Math.min(l,100-l));return{h:c,c:u,t:l}}function H(t){const{h:o,c:s,t:n}=t,e=(o%360+360)%360,a=Math.max(0,Math.min(150,s)),r=Math.max(0,Math.min(100,n)),i=r/100,c=r===0||r===100?0:a/Math.min(r,100-r),l=(1-Math.abs(2*i-1))*Math.min(1,c),f=l*(1-Math.abs(e/60%2-1)),h=i-l/2;let u,g,b;e>=0&&e<60?[u,g,b]=[l,f,0]:e>=60&&e<120?[u,g,b]=[f,l,0]:e>=120&&e<180?[u,g,b]=[0,l,f]:e>=180&&e<240?[u,g,b]=[0,f,l]:e>=240&&e<300?[u,g,b]=[f,0,l]:[u,g,b]=[l,0,f];const S=w=>{const x=Math.max(0,Math.min(1,w+h)),D=Math.round(x*255).toString(16);return D.length===1?"0"+D:D};return`#${S(u)}${S(g)}${S(b)}`}function R(t,o,s=.5){const n=C(t),e=C(o);let a=n.h,r=e.h,i=r-a;Math.abs(i)>180&&(i>0?a+=360:r+=360);const c=(a+(r-a)*s)%360,l=n.c+(e.c-n.c)*s,f=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(f)))})}function Q(t,o,s=.15){const n=C(t),e=C(o);let a=e.h,r=n.h,i=r-a;Math.abs(i)>180&&(i>0?a+=360:r+=360,i=r-a);const c=(a+i*s)%360;return H({h:c<0?c+360:c,c:e.c,t:e.t})}function k(t,o=[10,20,30,40,50,60,70,80,90]){const s=C(t);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(e=>H({h:s.h,c:s.c,t:e}))}function B(t,o,s=.2){const n={};for(const[e,a]of Object.entries(o))n[e]=R(t,a,s);return n}function T(t,o={}){const{baseGray:s="#666666"}=o,{blendRatio:n=.08,isDark:e=!1}=o,a=C(s),r={};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 f={h:a.h,c:a.c,t:c},h=R(H(f),t,n);r[`gray-${l+1}`]=h}),r}function P(t,o={}){const{semanticColors:s={success:"#52c41a",warning:"#faad14",error:"#ff4d4f",info:"#1890ff"},blendRatio:n=.12,isDark:e=!1}=o,a={};return Object.entries(s).forEach(([r,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 g={h:l.h,c:l.c,t:h},b=R(H(g),t,n);c[`${r}-${u+1}`]=b}),Object.assign(a,c)}),a}function $(t,o={}){const{isDark:s=!1}=o,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((r,i)=>{const c={h:n.h,c:n.c,t:r};e[`theme-${i+1}`]=H(c)}),e}function X(t,o={}){const{baseGray:s="#666666",isDark:n=!1,semanticColors:e,controlBlendRatio:a=.08,semanticBlendRatio:r=.12}=o;return{controls:T(t,{baseGray:s,blendRatio:a,isDark:n}),semantic:P(t,{semanticColors:e,blendRatio:r,isDark:n}),theme:$(t,{isDark:n})}}function Y(t,o={}){const{semanticColors:s={success:"#52c41a",warning:"#faad14",error:"#ff4d4f",info:"#1890ff"},uiColors:n={background:"#ffffff",surface:"#fafafa",border:"#d9d9d9",disabled:"#f5f5f5"},harmonizeRatio:e=.15,blendRatio:a=.12,isDark:r=!1,generateVariants:i=!0}=o,c=P(t,{semanticColors:s,blendRatio:e,isDark:r}),l={};Object.entries(s).forEach(([h])=>{l[h]={};for(let u=1;u<=10;u++){const g=`${h}-${u}`;c[g]&&(l[h][u]=c[g])}});const f={theme:$(t,{isDark:r}),semantic:l,ui:B(t,n,a),controls:T(t,{blendRatio:a,isDark:r})};return i&&(f.variants=k(t)),f}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 t={};return Object.keys(F).forEach(o=>{t[o]={},t[o].light=v(F[o],{list:!0}),t[o].dark=v(F[o],{list:!0,dark:!0}),t[o].primary=F[o]}),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}d.blendInHct=R,d.blendUIColors=B,d.colorList=F,d.extractColorFromFile=U,d.extractColorFromImage=z,d.generate=v,d.generateControlColors=T,d.generateGrayLinear=K,d.generateInterfaceColorSystem=X,d.generateLinear=I,d.generateLinearHSL=J,d.generateMonochromeLinear=W,d.generateSemanticColors=P,d.generateThemeColors=$,d.generateThemePalette=Y,d.generateThemeVariants=k,d.getPresetColors=Z,d.getRgbStr=V,d.harmonizeColor=Q,d.hctToRgb=H,d.rgbToHct=C,Object.defineProperty(d,Symbol.toStringTag,{value:"Module"})});
package/dist/index.mjs CHANGED
@@ -1,17 +1,17 @@
1
1
  import m from "color";
2
- function W(t) {
2
+ function U(t) {
3
3
  return m(t).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 z = ["hex", "rgb", "hsl"];
6
+ function B(t) {
7
+ return !t || z.indexOf(t) < 0 ? "hex" : t;
8
8
  }
9
- function F(t, r) {
10
- const a = P(r);
9
+ function F(t, o) {
10
+ const a = B(o);
11
11
  return a === "hex" ? t[a]().toLowerCase() : t[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(t, o, a) {
14
+ const e = m(t), n = e.hue(), s = e.saturationv(), r = 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;
15
15
  function d(b, w) {
16
16
  let x;
17
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);
@@ -19,25 +19,25 @@ function E(t, r, a) {
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 = s <= f ? s : s - (s - 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 k = Math.min(l, s + 30);
25
+ x = s + (k - s) / 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(h, r + (h - r) / 5.2 * Math.pow(w, 0.9)) : r <= u ? r : Math.max(u, r - (r - u) / 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({
39
+ function v(t, o, a) {
40
+ const e = m(E(t, 10 - o + 1)), n = m(t), s = n.hue(), r = n.saturationv(), c = m({
41
41
  h: n.hue(),
42
42
  s: h(6),
43
43
  v: n.value()
@@ -46,76 +46,76 @@ function v(t, r, a) {
46
46
  if (d < 6)
47
47
  return c + (6 - d) * f;
48
48
  if (d === 6) {
49
- if (o >= 0 && o < 50)
50
- return s - 15;
51
- if (o >= 50 && o < 191)
52
- return s - 20;
53
- if (o >= 191 && o <= 360)
54
- return s - 15;
49
+ if (s >= 0 && s < 50)
50
+ return r - 15;
51
+ if (s >= 50 && s < 191)
52
+ return r - 20;
53
+ if (s >= 191 && s <= 360)
54
+ return r - 15;
55
55
  }
56
56
  return c - l * (d - 6);
57
57
  }
58
58
  const u = m({
59
59
  h: e.hue(),
60
- s: h(r),
60
+ s: h(o),
61
61
  v: e.value()
62
62
  });
63
63
  return F(u, a);
64
64
  }
65
- function I(t, r = {}) {
66
- const { dark: a, list: e, index: n = 6, format: o = "hex" } = r;
65
+ function I(t, o = {}) {
66
+ const { dark: a, list: e, index: n = 6, format: s = "hex" } = o;
67
67
  if (e) {
68
- const s = [], i = a ? v : E;
68
+ const r = [], i = a ? v : E;
69
69
  for (let c = 1; c <= 10; c++)
70
- s.push(i(t, c, o));
71
- return s;
70
+ r.push(i(t, c, s));
71
+ return r;
72
72
  }
73
- return a ? v(t, n, o) : E(t, n, o);
73
+ return a ? v(t, n, s) : E(t, n, s);
74
74
  }
75
- async function $(t) {
75
+ async function V(t) {
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 G(t), a = O(o);
78
+ return T(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 G(t) {
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);
86
+ const e = document.createElement("canvas"), n = e.getContext("2d"), s = Math.min(t.width, 100), r = Math.min(t.height, 100), i = Math.min(s / t.width, r / t.height);
87
87
  e.width = t.width * i, e.height = t.height * i, n.drawImage(t, 0, 0, e.width, e.height);
88
88
  const c = n.getImageData(0, 0, e.width, e.height);
89
- r(c);
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}`;
95
+ function O(t) {
96
+ const o = t.data, a = /* @__PURE__ */ new Map();
97
+ for (let n = 0; n < o.length; n += 4) {
98
+ const s = o[n], r = o[n + 1], i = o[n + 2];
99
+ if (o[n + 3] < 128) continue;
100
+ const l = Math.round(s / 16) * 16, f = Math.round(r / 16) * 16, h = Math.round(i / 16) * 16, u = `${l},${f},${h}`;
101
101
  a.has(u) ? a.set(u, a.get(u) + 1) : a.set(u, 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((n, s) => {
105
+ const [r, i, c] = s.split(",").map(Number);
106
+ e.push({ r, g: i, b: c, count: n });
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;
109
+ function T(t) {
110
+ t.sort((n, s) => s.count - n.count);
111
+ const o = t.filter((n) => {
112
+ const { r: s, g: r, b: i } = n, c = Math.max(s, r, i), l = Math.min(s, r, i), f = c - l, h = c === 0 ? 0 : f / c, u = c / 255;
113
113
  return h > 0.15 && u > 0.2 && u < 0.8;
114
- }), a = r.length > 0 ? r[0] : t[0];
114
+ }), a = o.length > 0 ? o[0] : t[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) => {
117
+ function K(t) {
118
+ return new Promise((o, a) => {
119
119
  if (!t.type.startsWith("image/")) {
120
120
  a(new Error("请选择图片文件"));
121
121
  return;
@@ -123,104 +123,104 @@ function J(t) {
123
123
  const e = new FileReader();
124
124
  e.onload = async (n) => {
125
125
  try {
126
- const o = new Image();
127
- o.onload = async () => {
126
+ const s = new Image();
127
+ s.onload = async () => {
128
128
  try {
129
- const s = await $(o);
130
- r(s);
131
- } catch (s) {
132
- a(s);
129
+ const r = await V(s);
130
+ o(r);
131
+ } catch (r) {
132
+ a(r);
133
133
  }
134
- }, o.onerror = () => a(new Error("图片加载失败")), o.src = n.target.result;
135
- } catch (o) {
136
- a(o);
134
+ }, s.onerror = () => a(new Error("图片加载失败")), s.src = n.target.result;
135
+ } catch (s) {
136
+ a(s);
137
137
  }
138
138
  }, e.onerror = () => a(new Error("文件读取失败")), e.readAsDataURL(t);
139
139
  });
140
140
  }
141
- function L(t, r, a = {}) {
142
- const { steps: e = 10, format: n = "hex", includeEnds: o = !0 } = a;
141
+ function $(t, o, a = {}) {
142
+ const { steps: e = 10, format: n = "hex", includeEnds: s = !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);
145
+ const r = m(t), i = m(o), c = [], l = s ? e : e + 2, f = 1 / (l - 1);
146
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));
147
+ const u = h * f, d = Math.round(r.red() + (i.red() - r.red()) * u), g = Math.round(r.green() + (i.green() - r.green()) * u), p = Math.round(r.blue() + (i.blue() - r.blue()) * u), M = m({ r: d, g, b: p });
148
+ !s && (h === 0 || h === l - 1) || c.push(F(M, n));
149
149
  }
150
150
  return c;
151
151
  }
152
- function Q(t = {}) {
152
+ function W(t = {}) {
153
153
  const {
154
- startGray: r = "#ffffff",
154
+ startGray: o = "#ffffff",
155
155
  endGray: a = "#000000",
156
156
  steps: e = 10,
157
157
  format: n = "hex"
158
158
  } = t;
159
- return L(r, a, { steps: e, format: n, includeEnds: !0 });
159
+ return $(o, a, { steps: e, format: n, 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({
163
- h: s.hue(),
164
- s: s.saturationl(),
161
+ function J(t, o = {}) {
162
+ const { steps: a = 10, format: e = "hex", lightnessRange: n = 80 } = o, r = m(t).hsl(), i = r.lightness(), c = Math.min(95, i + n / 2), l = Math.max(5, i - n / 2), f = m({
163
+ h: r.hue(),
164
+ s: r.saturationl(),
165
165
  l: c
166
166
  }), h = m({
167
- h: s.hue(),
168
- s: s.saturationl(),
167
+ h: r.hue(),
168
+ s: r.saturationl(),
169
169
  l
170
170
  });
171
- return L(f.hex(), h.hex(), { steps: a, format: e, includeEnds: !0 });
171
+ return $(f.hex(), h.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(t, o, a = {}) {
174
+ const { steps: e = 10, format: n = "hex", includeEnds: s = !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;
177
+ const r = m(t).hsl(), i = m(o).hsl(), c = [], l = s ? e : e + 2, f = 1 / (l - 1);
178
+ let h = r.hue() || 0, u = i.hue() || 0;
179
179
  const d = u - h;
180
180
  Math.abs(d) > 180 && (d > 0 ? h += 360 : u += 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 = h + (u - h) * p;
184
+ const S = r.saturationl() + (i.saturationl() - r.saturationl()) * p, y = r.lightness() + (i.lightness() - r.lightness()) * p;
185
+ M = M % 360, M < 0 && (M += 360);
186
+ const b = m({ h: M, s: S, l: y });
187
+ !s && (g === 0 || g === l - 1) || c.push(F(b, n));
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(t) {
192
+ const o = t.replace("#", ""), a = parseInt(o.substr(0, 2), 16) / 255, e = parseInt(o.substr(2, 2), 16) / 255, n = parseInt(o.substr(4, 2), 16) / 255, s = Math.max(a, e, n), r = Math.min(a, e, n), i = s - r;
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));
194
+ i !== 0 && (s === a ? c = (e - n) / i % 6 : s === 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 = (s + r) / 2, h = i === 0 ? 0 : i / (1 - Math.abs(2 * f - 1)), u = Math.round(h * Math.min(l, 100 - l));
196
196
  return { h: c, c: u, t: l };
197
197
  }
198
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;
199
+ const { h: o, c: a, t: e } = t, n = (o % 360 + 360) % 360, s = Math.max(0, Math.min(150, a)), r = Math.max(0, Math.min(100, e)), i = r / 100, c = r === 0 || r === 100 ? 0 : s / Math.min(r, 100 - r), 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
200
  let u, d, g;
201
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;
202
+ const p = (M) => {
203
+ const S = Math.max(0, Math.min(1, M + h)), 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(u)}${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(t, o, a = 0.5) {
209
+ const e = C(t), n = C(o);
210
+ let s = e.h, r = n.h, i = r - s;
211
+ Math.abs(i) > 180 && (i > 0 ? s += 360 : r += 360);
212
+ const c = (s + (r - s) * a) % 360, l = e.c + (n.c - e.c) * a, f = e.t + (n.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(t, o, a = 0.15) {
220
+ const e = C(t), n = C(o);
221
+ let s = n.h, r = e.h, i = r - s;
222
+ Math.abs(i) > 180 && (i > 0 ? s += 360 : r += 360, i = r - s);
223
+ const c = (s + i * a) % 360;
224
224
  return D({
225
225
  h: c < 0 ? c + 360 : c,
226
226
  c: n.c,
@@ -229,35 +229,29 @@ function G(t, r, a = 0.15) {
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 N(t, o = [10, 20, 30, 40, 50, 60, 70, 80, 90]) {
233
+ const a = C(t);
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((n) => D({
236
236
  h: a.h,
237
237
  c: a.c,
238
238
  t: n
239
239
  }));
240
240
  }
241
- function T(t, r, a = 0.15) {
242
- const e = {};
243
- for (const [n, o] of Object.entries(r))
244
- e[n] = G(t, o, a);
245
- return e;
246
- }
247
- function N(t, r, a = 0.2) {
241
+ function q(t, o, a = 0.2) {
248
242
  const e = {};
249
- for (const [n, o] of Object.entries(r))
250
- e[n] = R(t, o, a);
243
+ for (const [n, s] of Object.entries(o))
244
+ e[n] = R(t, s, a);
251
245
  return e;
252
246
  }
253
- function q(t, r = {}) {
254
- const { baseGray: a = "#666666" } = r, { blendRatio: e = 0.08, isDark: n = !1 } = r, o = y(a), s = {};
247
+ function L(t, o = {}) {
248
+ const { baseGray: a = "#666666" } = o, { blendRatio: e = 0.08, isDark: n = !1 } = o, s = C(a), r = {};
255
249
  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;
258
- }), s;
250
+ const f = { h: s.h, c: s.c, t: c }, h = R(D(f), t, e);
251
+ r[`gray-${l + 1}`] = h;
252
+ }), r;
259
253
  }
260
- function j(t, r = {}) {
254
+ function A(t, o = {}) {
261
255
  const {
262
256
  semanticColors: a = {
263
257
  success: "#52c41a",
@@ -267,82 +261,80 @@ function j(t, r = {}) {
267
261
  },
268
262
  blendRatio: e = 0.12,
269
263
  isDark: n = !1
270
- } = r, o = {};
271
- return Object.entries(a).forEach(([s, i]) => {
272
- const c = {}, l = y(i);
264
+ } = o, s = {};
265
+ return Object.entries(a).forEach(([r, i]) => {
266
+ const c = {}, l = C(i);
273
267
  (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
268
  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;
269
+ c[`${r}-${u + 1}`] = g;
270
+ }), Object.assign(s, c);
271
+ }), s;
278
272
  }
279
- function U(t, r = {}) {
280
- const { isDark: a = !1 } = r, e = y(t), n = {};
281
- 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
- const c = { h: e.h, c: e.c, t: s };
273
+ function P(t, o = {}) {
274
+ const { isDark: a = !1 } = o, e = C(t), n = {};
275
+ return (a ? [90, 80, 70, 60, 50, 40, 30, 25, 20, 15] : [15, 25, 35, 45, 55, 65, 75, 85, 90, 95]).forEach((r, i) => {
276
+ const c = { h: e.h, c: e.c, t: r };
283
277
  n[`theme-${i + 1}`] = D(c);
284
278
  }), n;
285
279
  }
286
- function Z(t, r = {}) {
280
+ function Y(t, o = {}) {
287
281
  const {
288
282
  baseGray: a = "#666666",
289
283
  isDark: e = !1,
290
284
  semanticColors: n,
291
- controlBlendRatio: o = 0.08,
292
- semanticBlendRatio: s = 0.12
293
- } = r;
285
+ controlBlendRatio: s = 0.08,
286
+ semanticBlendRatio: r = 0.12
287
+ } = o;
294
288
  return {
295
289
  // 1. 基础控件颜色(灰色系1-12)
296
- controls: q(t, {
290
+ controls: L(t, {
297
291
  baseGray: a,
298
- blendRatio: o,
292
+ blendRatio: s,
299
293
  isDark: e
300
294
  }),
301
295
  // 2. 表意色(1-10)
302
- semantic: j(t, {
296
+ semantic: A(t, {
303
297
  semanticColors: n,
304
- blendRatio: s,
298
+ blendRatio: r,
305
299
  isDark: e
306
300
  }),
307
301
  // 3. 主题色(1-10)
308
- theme: U(t, { isDark: e })
302
+ theme: P(t, { isDark: e })
309
303
  };
310
304
  }
311
- function _(t, r = {}) {
305
+ function Z(t, 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
319
  harmonizeRatio: n = 0.15,
338
- blendRatio: o = 0.12,
339
- generateVariants: s = !0
340
- } = r, i = {
341
- theme: t,
342
- semantic: T(t, a, n),
343
- ui: N(t, e, o)
320
+ blendRatio: s = 0.12,
321
+ isDark: r = !1,
322
+ generateVariants: i = !0
323
+ } = o, c = A(t, { semanticColors: a, blendRatio: n, isDark: r }), l = {};
324
+ Object.entries(a).forEach(([h]) => {
325
+ l[h] = {};
326
+ for (let u = 1; u <= 10; u++) {
327
+ const d = `${h}-${u}`;
328
+ c[d] && (l[h][u] = c[d]);
329
+ }
330
+ });
331
+ const f = {
332
+ theme: P(t, { isDark: r }),
333
+ semantic: l,
334
+ ui: q(t, e, s),
335
+ controls: L(t, { blendRatio: s, isDark: r })
344
336
  };
345
- return s && (i.variants = O(t)), i;
337
+ return i && (f.variants = N(t)), f;
346
338
  }
347
339
  const H = {
348
340
  red: "#F53F3F",
@@ -359,10 +351,10 @@ const H = {
359
351
  pinkpurple: "#D91AD9",
360
352
  magenta: "#F5319D"
361
353
  };
362
- function tt() {
354
+ function _() {
363
355
  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];
356
+ return Object.keys(H).forEach((o) => {
357
+ t[o] = {}, t[o].light = I(H[o], { list: !0 }), t[o].dark = I(H[o], { list: !0, dark: !0 }), t[o].primary = H[o];
366
358
  }), t.gray = {}, t.gray.light = [
367
359
  "#f7f8fa",
368
360
  "#f2f3f5",
@@ -389,25 +381,24 @@ function tt() {
389
381
  }
390
382
  export {
391
383
  R as blendInHct,
392
- T as blendSemanticColors,
393
- N as blendUIColors,
384
+ q as blendUIColors,
394
385
  H as colorList,
395
- J as extractColorFromFile,
396
- $ as extractColorFromImage,
386
+ K as extractColorFromFile,
387
+ V as extractColorFromImage,
397
388
  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,
407
- O as generateThemeVariants,
408
- tt as getPresetColors,
409
- W as getRgbStr,
410
- G as harmonizeColor,
389
+ L as generateControlColors,
390
+ W as generateGrayLinear,
391
+ Y as generateInterfaceColorSystem,
392
+ $ as generateLinear,
393
+ Q as generateLinearHSL,
394
+ J as generateMonochromeLinear,
395
+ A as generateSemanticColors,
396
+ P as generateThemeColors,
397
+ Z as generateThemePalette,
398
+ N as generateThemeVariants,
399
+ _ as getPresetColors,
400
+ U as getRgbStr,
401
+ X as harmonizeColor,
411
402
  D as hctToRgb,
412
- y as rgbToHct
403
+ C as rgbToHct
413
404
  };
@@ -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.1",
3
+ "version": "0.2.3",
4
4
  "description": "Aviala Design color utils",
5
5
  "main": "./dist/index.js",
6
6
  "module": "./dist/index.mjs",
@@ -16,6 +16,7 @@
16
16
  "test": "jest",
17
17
  "build": "vite build",
18
18
  "preview": "vite preview",
19
+ "dev": "vite --host",
19
20
  "prepublishOnly": "npm run build"
20
21
  },
21
22
  "keywords": [