@aviala-design/color 0.2.2 → 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/dist/index.js +1 -1
- package/dist/index.mjs +187 -185
- package/package.json +2 -1
package/dist/index.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
(function(d,
|
|
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,33 +1,33 @@
|
|
|
1
1
|
import m from "color";
|
|
2
|
-
function U(
|
|
3
|
-
return m(
|
|
2
|
+
function U(t) {
|
|
3
|
+
return m(t).rgb().round().color.join(",");
|
|
4
4
|
}
|
|
5
|
-
const
|
|
6
|
-
function
|
|
7
|
-
return !
|
|
5
|
+
const z = ["hex", "rgb", "hsl"];
|
|
6
|
+
function B(t) {
|
|
7
|
+
return !t || z.indexOf(t) < 0 ? "hex" : t;
|
|
8
8
|
}
|
|
9
|
-
function F(
|
|
10
|
-
const a =
|
|
11
|
-
return a === "hex" ?
|
|
9
|
+
function F(t, o) {
|
|
10
|
+
const a = B(o);
|
|
11
|
+
return a === "hex" ? t[a]().toLowerCase() : t[a]().round().string();
|
|
12
12
|
}
|
|
13
|
-
function E(
|
|
14
|
-
const e = m(
|
|
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
|
-
return
|
|
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);
|
|
18
18
|
}
|
|
19
19
|
function g(b, w) {
|
|
20
20
|
let x;
|
|
21
21
|
if (b)
|
|
22
|
-
x =
|
|
22
|
+
x = s <= f ? s : s - (s - f) / 5.5 * Math.pow(w, 1.05);
|
|
23
23
|
else {
|
|
24
|
-
const
|
|
25
|
-
x =
|
|
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
29
|
function p(b, w) {
|
|
30
|
-
return b ? Math.min(
|
|
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
32
|
const M = o < 6, S = M ? 6 - o : o - 6, y = o === 6 ? e : m({
|
|
33
33
|
h: d(M, S),
|
|
@@ -36,222 +36,222 @@ function E(n, o, a) {
|
|
|
36
36
|
});
|
|
37
37
|
return F(y, a);
|
|
38
38
|
}
|
|
39
|
-
function v(
|
|
40
|
-
const e = m(E(
|
|
41
|
-
h:
|
|
42
|
-
s:
|
|
43
|
-
v:
|
|
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
|
+
h: n.hue(),
|
|
42
|
+
s: h(6),
|
|
43
|
+
v: n.value()
|
|
44
44
|
}).saturationv(), l = Math.ceil((c - 9) / 4), f = Math.ceil((100 - c) / 5);
|
|
45
|
-
function
|
|
45
|
+
function h(d) {
|
|
46
46
|
if (d < 6)
|
|
47
47
|
return c + (6 - d) * f;
|
|
48
48
|
if (d === 6) {
|
|
49
|
-
if (
|
|
50
|
-
return
|
|
51
|
-
if (
|
|
52
|
-
return
|
|
53
|
-
if (
|
|
54
|
-
return
|
|
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
|
-
const
|
|
58
|
+
const u = m({
|
|
59
59
|
h: e.hue(),
|
|
60
|
-
s:
|
|
60
|
+
s: h(o),
|
|
61
61
|
v: e.value()
|
|
62
62
|
});
|
|
63
|
-
return F(
|
|
63
|
+
return F(u, a);
|
|
64
64
|
}
|
|
65
|
-
function I(
|
|
66
|
-
const { dark: a, list: e, index:
|
|
65
|
+
function I(t, o = {}) {
|
|
66
|
+
const { dark: a, list: e, index: n = 6, format: s = "hex" } = o;
|
|
67
67
|
if (e) {
|
|
68
|
-
const
|
|
68
|
+
const r = [], i = a ? v : E;
|
|
69
69
|
for (let c = 1; c <= 10; c++)
|
|
70
|
-
|
|
71
|
-
return
|
|
70
|
+
r.push(i(t, c, s));
|
|
71
|
+
return r;
|
|
72
72
|
}
|
|
73
|
-
return a ? v(
|
|
73
|
+
return a ? v(t, n, s) : E(t, n, s);
|
|
74
74
|
}
|
|
75
|
-
async function
|
|
75
|
+
async function V(t) {
|
|
76
76
|
try {
|
|
77
|
-
const o = await
|
|
78
|
-
return
|
|
77
|
+
const o = await G(t), a = O(o);
|
|
78
|
+
return T(a);
|
|
79
79
|
} catch (o) {
|
|
80
80
|
throw console.error("提取图片颜色失败:", o), o;
|
|
81
81
|
}
|
|
82
82
|
}
|
|
83
|
-
async function
|
|
83
|
+
async function G(t) {
|
|
84
84
|
return new Promise((o, a) => {
|
|
85
85
|
try {
|
|
86
|
-
const e = document.createElement("canvas"),
|
|
87
|
-
e.width =
|
|
88
|
-
const c =
|
|
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
|
+
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
89
|
o(c);
|
|
90
90
|
} catch (e) {
|
|
91
91
|
a(e);
|
|
92
92
|
}
|
|
93
93
|
});
|
|
94
94
|
}
|
|
95
|
-
function
|
|
96
|
-
const o =
|
|
97
|
-
for (let
|
|
98
|
-
const
|
|
99
|
-
if (o[
|
|
100
|
-
const l = Math.round(
|
|
101
|
-
a.has(
|
|
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
|
+
a.has(u) ? a.set(u, a.get(u) + 1) : a.set(u, 1);
|
|
102
102
|
}
|
|
103
103
|
const e = [];
|
|
104
|
-
return a.forEach((
|
|
105
|
-
const [
|
|
106
|
-
e.push({ r
|
|
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
|
|
110
|
-
|
|
111
|
-
const o =
|
|
112
|
-
const { r, g:
|
|
113
|
-
return
|
|
114
|
-
}), a = o.length > 0 ? o[0] :
|
|
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
|
+
return h > 0.15 && u > 0.2 && u < 0.8;
|
|
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 K(
|
|
117
|
+
function K(t) {
|
|
118
118
|
return new Promise((o, a) => {
|
|
119
|
-
if (!
|
|
119
|
+
if (!t.type.startsWith("image/")) {
|
|
120
120
|
a(new Error("请选择图片文件"));
|
|
121
121
|
return;
|
|
122
122
|
}
|
|
123
123
|
const e = new FileReader();
|
|
124
|
-
e.onload = async (
|
|
124
|
+
e.onload = async (n) => {
|
|
125
125
|
try {
|
|
126
|
-
const
|
|
127
|
-
|
|
126
|
+
const s = new Image();
|
|
127
|
+
s.onload = async () => {
|
|
128
128
|
try {
|
|
129
|
-
const
|
|
130
|
-
o(
|
|
131
|
-
} catch (
|
|
132
|
-
a(
|
|
129
|
+
const r = await V(s);
|
|
130
|
+
o(r);
|
|
131
|
+
} catch (r) {
|
|
132
|
+
a(r);
|
|
133
133
|
}
|
|
134
|
-
},
|
|
135
|
-
} catch (
|
|
136
|
-
a(
|
|
134
|
+
}, s.onerror = () => a(new Error("图片加载失败")), s.src = n.target.result;
|
|
135
|
+
} catch (s) {
|
|
136
|
+
a(s);
|
|
137
137
|
}
|
|
138
|
-
}, e.onerror = () => a(new Error("文件读取失败")), e.readAsDataURL(
|
|
138
|
+
}, e.onerror = () => a(new Error("文件读取失败")), e.readAsDataURL(t);
|
|
139
139
|
});
|
|
140
140
|
}
|
|
141
|
-
function $(
|
|
142
|
-
const { steps: e = 10, format:
|
|
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
|
|
146
|
-
for (let
|
|
147
|
-
const
|
|
148
|
-
!
|
|
145
|
+
const r = m(t), i = m(o), c = [], l = s ? e : e + 2, f = 1 / (l - 1);
|
|
146
|
+
for (let h = 0; h < l; h++) {
|
|
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 W(
|
|
152
|
+
function W(t = {}) {
|
|
153
153
|
const {
|
|
154
154
|
startGray: o = "#ffffff",
|
|
155
155
|
endGray: a = "#000000",
|
|
156
156
|
steps: e = 10,
|
|
157
|
-
format:
|
|
158
|
-
} =
|
|
159
|
-
return $(o, a, { steps: e, format:
|
|
157
|
+
format: n = "hex"
|
|
158
|
+
} = t;
|
|
159
|
+
return $(o, a, { steps: e, format: n, includeEnds: !0 });
|
|
160
160
|
}
|
|
161
|
-
function J(
|
|
162
|
-
const { steps: a = 10, format: e = "hex", lightnessRange:
|
|
163
|
-
h:
|
|
164
|
-
s:
|
|
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
|
-
}),
|
|
167
|
-
h:
|
|
168
|
-
s:
|
|
166
|
+
}), h = m({
|
|
167
|
+
h: r.hue(),
|
|
168
|
+
s: r.saturationl(),
|
|
169
169
|
l
|
|
170
170
|
});
|
|
171
|
-
return $(f.hex(),
|
|
171
|
+
return $(f.hex(), h.hex(), { steps: a, format: e, includeEnds: !0 });
|
|
172
172
|
}
|
|
173
|
-
function Q(
|
|
174
|
-
const { steps: e = 10, format:
|
|
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
|
|
178
|
-
let
|
|
179
|
-
const d =
|
|
180
|
-
Math.abs(d) > 180 && (d > 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
|
+
const d = u - h;
|
|
180
|
+
Math.abs(d) > 180 && (d > 0 ? h += 360 : u += 360);
|
|
181
181
|
for (let g = 0; g < l; g++) {
|
|
182
182
|
const p = g * f;
|
|
183
|
-
let M =
|
|
184
|
-
const S =
|
|
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
185
|
M = M % 360, M < 0 && (M += 360);
|
|
186
186
|
const b = m({ h: M, s: S, l: y });
|
|
187
|
-
!
|
|
187
|
+
!s && (g === 0 || g === l - 1) || c.push(F(b, n));
|
|
188
188
|
}
|
|
189
189
|
return c;
|
|
190
190
|
}
|
|
191
|
-
function C(
|
|
192
|
-
const o =
|
|
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 && (
|
|
195
|
-
const l = Math.round((0.299 * a + 0.587 * e + 0.114 *
|
|
196
|
-
return { h: c, c:
|
|
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
|
+
return { h: c, c: u, t: l };
|
|
197
197
|
}
|
|
198
|
-
function D(
|
|
199
|
-
const { h: o, c: a, t: e } =
|
|
200
|
-
let
|
|
201
|
-
|
|
198
|
+
function D(t) {
|
|
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
|
+
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
202
|
const p = (M) => {
|
|
203
|
-
const S = Math.max(0, Math.min(1, M +
|
|
203
|
+
const S = Math.max(0, Math.min(1, M + h)), y = Math.round(S * 255).toString(16);
|
|
204
204
|
return y.length === 1 ? "0" + y : y;
|
|
205
205
|
};
|
|
206
|
-
return `#${p(
|
|
206
|
+
return `#${p(u)}${p(d)}${p(g)}`;
|
|
207
207
|
}
|
|
208
|
-
function R(
|
|
209
|
-
const e = C(
|
|
210
|
-
let
|
|
211
|
-
Math.abs(i) > 180 && (i > 0 ?
|
|
212
|
-
const c = (
|
|
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 X(
|
|
220
|
-
const e = C(
|
|
221
|
-
let
|
|
222
|
-
Math.abs(i) > 180 && (i > 0 ?
|
|
223
|
-
const c = (
|
|
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
|
-
c:
|
|
226
|
+
c: n.c,
|
|
227
227
|
// 保持原有色度
|
|
228
|
-
t:
|
|
228
|
+
t: n.t
|
|
229
229
|
// 保持原有色调
|
|
230
230
|
});
|
|
231
231
|
}
|
|
232
|
-
function
|
|
233
|
-
const a = C(
|
|
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(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((
|
|
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
|
-
t
|
|
238
|
+
t: n
|
|
239
239
|
}));
|
|
240
240
|
}
|
|
241
|
-
function
|
|
241
|
+
function q(t, o, a = 0.2) {
|
|
242
242
|
const e = {};
|
|
243
|
-
for (const [
|
|
244
|
-
e[
|
|
243
|
+
for (const [n, s] of Object.entries(o))
|
|
244
|
+
e[n] = R(t, s, a);
|
|
245
245
|
return e;
|
|
246
246
|
}
|
|
247
|
-
function
|
|
248
|
-
const { baseGray: a = "#666666" } = o, { blendRatio: e = 0.08, isDark:
|
|
249
|
-
return (
|
|
250
|
-
const f = { h:
|
|
251
|
-
|
|
252
|
-
}),
|
|
247
|
+
function L(t, o = {}) {
|
|
248
|
+
const { baseGray: a = "#666666" } = o, { blendRatio: e = 0.08, isDark: n = !1 } = o, s = C(a), r = {};
|
|
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) => {
|
|
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;
|
|
253
253
|
}
|
|
254
|
-
function
|
|
254
|
+
function A(t, o = {}) {
|
|
255
255
|
const {
|
|
256
256
|
semanticColors: a = {
|
|
257
257
|
success: "#52c41a",
|
|
@@ -260,49 +260,49 @@ function L(n, o = {}) {
|
|
|
260
260
|
info: "#1890ff"
|
|
261
261
|
},
|
|
262
262
|
blendRatio: e = 0.12,
|
|
263
|
-
isDark:
|
|
264
|
-
} = o,
|
|
265
|
-
return Object.entries(a).forEach(([
|
|
263
|
+
isDark: n = !1
|
|
264
|
+
} = o, s = {};
|
|
265
|
+
return Object.entries(a).forEach(([r, i]) => {
|
|
266
266
|
const c = {}, l = C(i);
|
|
267
|
-
(
|
|
268
|
-
const d = { h: l.h, c: l.c, t:
|
|
269
|
-
c[`${
|
|
270
|
-
}), Object.assign(
|
|
271
|
-
}),
|
|
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) => {
|
|
268
|
+
const d = { h: l.h, c: l.c, t: h }, g = R(D(d), t, e);
|
|
269
|
+
c[`${r}-${u + 1}`] = g;
|
|
270
|
+
}), Object.assign(s, c);
|
|
271
|
+
}), s;
|
|
272
272
|
}
|
|
273
|
-
function
|
|
274
|
-
const { isDark: a = !1 } = o, e = C(
|
|
275
|
-
return (a ? [90, 80, 70, 60, 50, 40, 30, 25, 20, 15] : [15, 25, 35, 45, 55, 65, 75, 85, 90, 95]).forEach((
|
|
276
|
-
const c = { h: e.h, c: e.c, t:
|
|
277
|
-
|
|
278
|
-
}),
|
|
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 };
|
|
277
|
+
n[`theme-${i + 1}`] = D(c);
|
|
278
|
+
}), n;
|
|
279
279
|
}
|
|
280
|
-
function Y(
|
|
280
|
+
function Y(t, o = {}) {
|
|
281
281
|
const {
|
|
282
282
|
baseGray: a = "#666666",
|
|
283
283
|
isDark: e = !1,
|
|
284
|
-
semanticColors:
|
|
285
|
-
controlBlendRatio:
|
|
286
|
-
semanticBlendRatio:
|
|
284
|
+
semanticColors: n,
|
|
285
|
+
controlBlendRatio: s = 0.08,
|
|
286
|
+
semanticBlendRatio: r = 0.12
|
|
287
287
|
} = o;
|
|
288
288
|
return {
|
|
289
289
|
// 1. 基础控件颜色(灰色系1-12)
|
|
290
|
-
controls:
|
|
290
|
+
controls: L(t, {
|
|
291
291
|
baseGray: a,
|
|
292
|
-
blendRatio:
|
|
292
|
+
blendRatio: s,
|
|
293
293
|
isDark: e
|
|
294
294
|
}),
|
|
295
295
|
// 2. 表意色(1-10)
|
|
296
|
-
semantic:
|
|
297
|
-
semanticColors:
|
|
298
|
-
blendRatio:
|
|
296
|
+
semantic: A(t, {
|
|
297
|
+
semanticColors: n,
|
|
298
|
+
blendRatio: r,
|
|
299
299
|
isDark: e
|
|
300
300
|
}),
|
|
301
301
|
// 3. 主题色(1-10)
|
|
302
|
-
theme:
|
|
302
|
+
theme: P(t, { isDark: e })
|
|
303
303
|
};
|
|
304
304
|
}
|
|
305
|
-
function Z(
|
|
305
|
+
function Z(t, o = {}) {
|
|
306
306
|
const {
|
|
307
307
|
semanticColors: a = {
|
|
308
308
|
success: "#52c41a",
|
|
@@ -316,23 +316,25 @@ function Z(n, o = {}) {
|
|
|
316
316
|
border: "#d9d9d9",
|
|
317
317
|
disabled: "#f5f5f5"
|
|
318
318
|
},
|
|
319
|
-
harmonizeRatio:
|
|
320
|
-
blendRatio:
|
|
321
|
-
|
|
322
|
-
|
|
323
|
-
|
|
324
|
-
|
|
319
|
+
harmonizeRatio: n = 0.15,
|
|
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] = {};
|
|
325
326
|
for (let u = 1; u <= 10; u++) {
|
|
326
|
-
const
|
|
327
|
-
|
|
327
|
+
const d = `${h}-${u}`;
|
|
328
|
+
c[d] && (l[h][u] = c[d]);
|
|
328
329
|
}
|
|
329
330
|
});
|
|
330
|
-
const
|
|
331
|
-
theme:
|
|
332
|
-
semantic:
|
|
333
|
-
ui:
|
|
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 })
|
|
334
336
|
};
|
|
335
|
-
return
|
|
337
|
+
return i && (f.variants = N(t)), f;
|
|
336
338
|
}
|
|
337
339
|
const H = {
|
|
338
340
|
red: "#F53F3F",
|
|
@@ -350,10 +352,10 @@ const H = {
|
|
|
350
352
|
magenta: "#F5319D"
|
|
351
353
|
};
|
|
352
354
|
function _() {
|
|
353
|
-
const
|
|
355
|
+
const t = {};
|
|
354
356
|
return Object.keys(H).forEach((o) => {
|
|
355
|
-
|
|
356
|
-
}),
|
|
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];
|
|
358
|
+
}), t.gray = {}, t.gray.light = [
|
|
357
359
|
"#f7f8fa",
|
|
358
360
|
"#f2f3f5",
|
|
359
361
|
"#e5e6eb",
|
|
@@ -364,7 +366,7 @@ function _() {
|
|
|
364
366
|
"#4e5969",
|
|
365
367
|
"#272e3b",
|
|
366
368
|
"#1d2129"
|
|
367
|
-
],
|
|
369
|
+
], t.gray.dark = [
|
|
368
370
|
"#17171a",
|
|
369
371
|
"#2e2e30",
|
|
370
372
|
"#484849",
|
|
@@ -375,25 +377,25 @@ function _() {
|
|
|
375
377
|
"#c5c5c5",
|
|
376
378
|
"#dfdfdf",
|
|
377
379
|
"#f6f6f6"
|
|
378
|
-
],
|
|
380
|
+
], t.gray.primary = t.gray.light[6], t;
|
|
379
381
|
}
|
|
380
382
|
export {
|
|
381
383
|
R as blendInHct,
|
|
382
|
-
|
|
384
|
+
q as blendUIColors,
|
|
383
385
|
H as colorList,
|
|
384
386
|
K as extractColorFromFile,
|
|
385
|
-
|
|
387
|
+
V as extractColorFromImage,
|
|
386
388
|
I as generate,
|
|
387
|
-
|
|
389
|
+
L as generateControlColors,
|
|
388
390
|
W as generateGrayLinear,
|
|
389
391
|
Y as generateInterfaceColorSystem,
|
|
390
392
|
$ as generateLinear,
|
|
391
393
|
Q as generateLinearHSL,
|
|
392
394
|
J as generateMonochromeLinear,
|
|
393
|
-
|
|
394
|
-
|
|
395
|
+
A as generateSemanticColors,
|
|
396
|
+
P as generateThemeColors,
|
|
395
397
|
Z as generateThemePalette,
|
|
396
|
-
|
|
398
|
+
N as generateThemeVariants,
|
|
397
399
|
_ as getPresetColors,
|
|
398
400
|
U as getRgbStr,
|
|
399
401
|
X as harmonizeColor,
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@aviala-design/color",
|
|
3
|
-
"version": "0.2.
|
|
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": [
|