@aviala-design/color 0.2.2 → 0.3.0
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/LICENSE +20 -20
- package/README.md +322 -319
- package/README.zh-CN.md +356 -356
- package/dist/generate.d.ts +52 -14
- package/dist/generate.d.ts.map +1 -0
- package/dist/image-color.d.ts +45 -0
- package/dist/image-color.d.ts.map +1 -0
- package/dist/index.d.ts +72 -16
- package/dist/index.d.ts.map +1 -0
- package/dist/index.js +1 -1
- package/dist/index.mjs +415 -266
- package/dist/linear.d.ts +114 -30
- package/dist/linear.d.ts.map +1 -0
- package/dist/palette-dark.d.ts +9 -1
- package/dist/palette-dark.d.ts.map +1 -0
- package/dist/palette.d.ts +9 -1
- package/dist/palette.d.ts.map +1 -0
- package/dist/theme-blend.d.ts +304 -33
- package/dist/theme-blend.d.ts.map +1 -0
- package/dist/utils.d.ts +20 -2
- package/dist/utils.d.ts.map +1 -0
- package/package.json +55 -47
package/dist/index.mjs
CHANGED
|
@@ -1,340 +1,480 @@
|
|
|
1
|
-
import
|
|
2
|
-
function
|
|
3
|
-
return
|
|
1
|
+
import w from "color";
|
|
2
|
+
function K(t) {
|
|
3
|
+
return w(t).rgb().round().color.join(",");
|
|
4
4
|
}
|
|
5
|
-
const
|
|
6
|
-
function z(
|
|
7
|
-
return !
|
|
5
|
+
const k = ["hex", "rgb", "hsl"];
|
|
6
|
+
function z(t) {
|
|
7
|
+
return !t || !k.includes(
|
|
8
|
+
/** @type {any} */
|
|
9
|
+
t
|
|
10
|
+
) ? "hex" : (
|
|
11
|
+
/** @type {'hex' | 'rgb' | 'hsl'} */
|
|
12
|
+
t
|
|
13
|
+
);
|
|
8
14
|
}
|
|
9
|
-
function
|
|
10
|
-
const
|
|
11
|
-
return
|
|
15
|
+
function L(t, n) {
|
|
16
|
+
const c = z(n);
|
|
17
|
+
return c === "hex" ? t[c]().toLowerCase() : t[c]().round().string();
|
|
12
18
|
}
|
|
13
|
-
function
|
|
14
|
-
const
|
|
15
|
-
function d(
|
|
19
|
+
function D(t, n, c) {
|
|
20
|
+
const r = w(t), o = r.hue(), s = r.saturationv(), e = r.value(), a = ((p) => p >= 60 && p <= 240 ? 2.5 : p >= 0 && p < 60 || p > 300 && p <= 360 ? 1.5 : 2)(o), l = 100, f = 9, u = 100, h = 30;
|
|
21
|
+
function d(p, b) {
|
|
16
22
|
let x;
|
|
17
|
-
return
|
|
23
|
+
return o >= 60 && o <= 240 ? x = p ? o - a * b : o + a * b : x = p ? o + a * b : o - a * b, x < 0 ? x += 360 : x >= 360 && (x -= 360), Math.round(x);
|
|
18
24
|
}
|
|
19
|
-
function
|
|
25
|
+
function M(p, b) {
|
|
20
26
|
let x;
|
|
21
|
-
if (
|
|
22
|
-
x =
|
|
27
|
+
if (p)
|
|
28
|
+
x = s <= f ? s : s - (s - f) / 5.5 * Math.pow(b, 1.05);
|
|
23
29
|
else {
|
|
24
|
-
const
|
|
25
|
-
x =
|
|
30
|
+
const v = Math.min(l, s + 30);
|
|
31
|
+
x = s + (v - s) / 4.2 * Math.pow(b, 0.95);
|
|
26
32
|
}
|
|
27
33
|
return Math.max(0, Math.min(100, x));
|
|
28
34
|
}
|
|
29
|
-
function p
|
|
30
|
-
return
|
|
35
|
+
function g(p, b) {
|
|
36
|
+
return p ? Math.min(u, e + (u - e) / 5.2 * Math.pow(b, 0.9)) : e <= h ? e : Math.max(h, e - (e - h) / 4.2 * Math.pow(b, 1.05));
|
|
31
37
|
}
|
|
32
|
-
const
|
|
33
|
-
h: d(
|
|
34
|
-
s:
|
|
35
|
-
v:
|
|
38
|
+
const m = n < 6, E = m ? 6 - n : n - 6, y = n === 6 ? r : w({
|
|
39
|
+
h: d(m, E),
|
|
40
|
+
s: M(m, E),
|
|
41
|
+
v: g(m, E)
|
|
36
42
|
});
|
|
37
|
-
return
|
|
43
|
+
return L(y, c);
|
|
38
44
|
}
|
|
39
|
-
function
|
|
40
|
-
const
|
|
41
|
-
|
|
42
|
-
s: u(6),
|
|
43
|
-
v: t.value()
|
|
44
|
-
}).saturationv(), l = Math.ceil((c - 9) / 4), f = Math.ceil((100 - c) / 5);
|
|
45
|
-
function u(d) {
|
|
45
|
+
function H(t, n, c) {
|
|
46
|
+
const r = w(D(t, 10 - n + 1, "hex")), o = w(t), s = o.hue(), e = o.saturationv();
|
|
47
|
+
function i(d) {
|
|
46
48
|
if (d < 6)
|
|
47
|
-
return
|
|
49
|
+
return l + (6 - d) * u;
|
|
48
50
|
if (d === 6) {
|
|
49
|
-
if (
|
|
50
|
-
return
|
|
51
|
-
if (
|
|
52
|
-
return
|
|
53
|
-
if (
|
|
54
|
-
return
|
|
51
|
+
if (s >= 0 && s < 50)
|
|
52
|
+
return e - 15;
|
|
53
|
+
if (s >= 50 && s < 191)
|
|
54
|
+
return e - 20;
|
|
55
|
+
if (s >= 191 && s <= 360)
|
|
56
|
+
return e - 15;
|
|
55
57
|
}
|
|
56
|
-
return
|
|
58
|
+
return l - f * (d - 6);
|
|
57
59
|
}
|
|
58
|
-
const
|
|
59
|
-
h:
|
|
60
|
-
s:
|
|
61
|
-
v:
|
|
60
|
+
const l = w({
|
|
61
|
+
h: o.hue(),
|
|
62
|
+
s: i(6),
|
|
63
|
+
v: o.value()
|
|
64
|
+
}).saturationv(), f = Math.ceil((l - 9) / 4), u = Math.ceil((100 - l) / 5), h = w({
|
|
65
|
+
h: r.hue(),
|
|
66
|
+
s: i(n),
|
|
67
|
+
v: r.value()
|
|
62
68
|
});
|
|
63
|
-
return
|
|
69
|
+
return L(h, c);
|
|
64
70
|
}
|
|
65
|
-
function
|
|
66
|
-
const { dark:
|
|
67
|
-
if (
|
|
68
|
-
const
|
|
69
|
-
for (let
|
|
70
|
-
|
|
71
|
-
return
|
|
71
|
+
function B(t, n = {}) {
|
|
72
|
+
const { dark: c, list: r, index: o = 6, format: s = "hex" } = n;
|
|
73
|
+
if (r) {
|
|
74
|
+
const e = [], i = c ? H : D;
|
|
75
|
+
for (let a = 1; a <= 10; a++)
|
|
76
|
+
e.push(i(t, a, s));
|
|
77
|
+
return e;
|
|
72
78
|
}
|
|
73
|
-
return
|
|
79
|
+
return c ? H(t, o, s) : D(t, o, s);
|
|
74
80
|
}
|
|
75
|
-
async function
|
|
81
|
+
async function P(t) {
|
|
76
82
|
try {
|
|
77
|
-
const
|
|
78
|
-
return
|
|
79
|
-
} catch (
|
|
80
|
-
throw console.error("提取图片颜色失败:",
|
|
83
|
+
const n = await O(t), c = G(n);
|
|
84
|
+
return V(c);
|
|
85
|
+
} catch (n) {
|
|
86
|
+
throw console.error("提取图片颜色失败:", n), n;
|
|
81
87
|
}
|
|
82
88
|
}
|
|
83
|
-
async function
|
|
84
|
-
return new Promise((
|
|
89
|
+
async function O(t) {
|
|
90
|
+
return new Promise((n, c) => {
|
|
85
91
|
try {
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
+
if (typeof document > "u") {
|
|
93
|
+
c(new Error("图像颜色提取功能仅在浏览器环境中可用"));
|
|
94
|
+
return;
|
|
95
|
+
}
|
|
96
|
+
const r = document.createElement("canvas"), o = r.getContext("2d");
|
|
97
|
+
if (!o) {
|
|
98
|
+
c(new Error("无法获取canvas 2d context"));
|
|
99
|
+
return;
|
|
100
|
+
}
|
|
101
|
+
const s = Math.min(t.width, 100), e = Math.min(t.height, 100), i = Math.min(s / t.width, e / t.height);
|
|
102
|
+
r.width = t.width * i, r.height = t.height * i, o.drawImage(t, 0, 0, r.width, r.height);
|
|
103
|
+
const a = o.getImageData(0, 0, r.width, r.height);
|
|
104
|
+
n(a);
|
|
105
|
+
} catch (r) {
|
|
106
|
+
c(r);
|
|
92
107
|
}
|
|
93
108
|
});
|
|
94
109
|
}
|
|
95
|
-
function
|
|
96
|
-
const
|
|
97
|
-
for (let
|
|
98
|
-
const
|
|
99
|
-
if (o
|
|
100
|
-
const l = Math.round(
|
|
101
|
-
|
|
110
|
+
function G(t) {
|
|
111
|
+
const n = t.data, c = /* @__PURE__ */ new Map();
|
|
112
|
+
for (let o = 0; o < n.length; o += 4) {
|
|
113
|
+
const s = n[o], e = n[o + 1], i = n[o + 2];
|
|
114
|
+
if (n[o + 3] < 128) continue;
|
|
115
|
+
const l = Math.round(s / 16) * 16, f = Math.round(e / 16) * 16, u = Math.round(i / 16) * 16, h = `${l},${f},${u}`;
|
|
116
|
+
c.has(h) ? c.set(h, c.get(h) + 1) : c.set(h, 1);
|
|
102
117
|
}
|
|
103
|
-
const
|
|
104
|
-
return
|
|
105
|
-
const [
|
|
106
|
-
|
|
107
|
-
}),
|
|
118
|
+
const r = [];
|
|
119
|
+
return c.forEach((o, s) => {
|
|
120
|
+
const [e, i, a] = s.split(",").map(Number);
|
|
121
|
+
r.push({ r: e, g: i, b: a, count: o });
|
|
122
|
+
}), r;
|
|
108
123
|
}
|
|
109
|
-
function
|
|
110
|
-
|
|
111
|
-
const
|
|
112
|
-
const { r, g:
|
|
124
|
+
function V(t) {
|
|
125
|
+
t.sort((o, s) => s.count - o.count);
|
|
126
|
+
const n = t.filter((o) => {
|
|
127
|
+
const { r: s, g: e, b: i } = o, a = Math.max(s, e, i), l = Math.min(s, e, i), f = a - l, u = a === 0 ? 0 : f / a, h = a / 255;
|
|
113
128
|
return u > 0.15 && h > 0.2 && h < 0.8;
|
|
114
|
-
}),
|
|
115
|
-
return
|
|
129
|
+
}), c = n.length > 0 ? n[0] : t[0];
|
|
130
|
+
return w({ r: c.r, g: c.g, b: c.b }).hex();
|
|
116
131
|
}
|
|
117
|
-
function
|
|
118
|
-
return new Promise((
|
|
119
|
-
if (
|
|
120
|
-
|
|
132
|
+
function W(t) {
|
|
133
|
+
return new Promise((n, c) => {
|
|
134
|
+
if (typeof FileReader > "u" || typeof Image > "u") {
|
|
135
|
+
c(new Error("文件读取功能仅在浏览器环境中可用"));
|
|
136
|
+
return;
|
|
137
|
+
}
|
|
138
|
+
if (!t.type.startsWith("image/")) {
|
|
139
|
+
c(new Error("请选择图片文件"));
|
|
121
140
|
return;
|
|
122
141
|
}
|
|
123
|
-
const
|
|
124
|
-
|
|
142
|
+
const r = new FileReader();
|
|
143
|
+
r.onload = async (o) => {
|
|
144
|
+
var s;
|
|
125
145
|
try {
|
|
126
|
-
const
|
|
127
|
-
|
|
146
|
+
const e = new Image();
|
|
147
|
+
e.onload = async () => {
|
|
128
148
|
try {
|
|
129
|
-
const
|
|
130
|
-
|
|
131
|
-
} catch (
|
|
132
|
-
a
|
|
149
|
+
const a = await P(e);
|
|
150
|
+
n(a);
|
|
151
|
+
} catch (a) {
|
|
152
|
+
c(a);
|
|
133
153
|
}
|
|
134
|
-
},
|
|
135
|
-
|
|
136
|
-
|
|
154
|
+
}, e.onerror = () => c(new Error("图片加载失败"));
|
|
155
|
+
const i = (s = o.target) == null ? void 0 : s.result;
|
|
156
|
+
typeof i == "string" ? e.src = i : c(new Error("无法读取图片数据"));
|
|
157
|
+
} catch (e) {
|
|
158
|
+
c(e);
|
|
137
159
|
}
|
|
138
|
-
},
|
|
160
|
+
}, r.onerror = () => c(new Error("文件读取失败")), r.readAsDataURL(t);
|
|
139
161
|
});
|
|
140
162
|
}
|
|
141
|
-
function $(
|
|
142
|
-
const { steps:
|
|
143
|
-
if (
|
|
163
|
+
function $(t, n, c = {}) {
|
|
164
|
+
const { steps: r = 10, format: o = "hex", includeEnds: s = !0 } = c;
|
|
165
|
+
if (r < 2)
|
|
144
166
|
throw new Error("步数必须至少为2");
|
|
145
|
-
const
|
|
167
|
+
const e = w(t), i = w(n), a = [], l = s ? r : r + 2, f = 1 / (l - 1);
|
|
146
168
|
for (let u = 0; u < l; u++) {
|
|
147
|
-
const h = u * f, d = Math.round(
|
|
148
|
-
!
|
|
169
|
+
const h = u * f, d = Math.round(e.red() + (i.red() - e.red()) * h), M = Math.round(e.green() + (i.green() - e.green()) * h), g = Math.round(e.blue() + (i.blue() - e.blue()) * h), m = w({ r: d, g: M, b: g });
|
|
170
|
+
!s && (u === 0 || u === l - 1) || a.push(L(m, o));
|
|
149
171
|
}
|
|
150
|
-
return
|
|
172
|
+
return a;
|
|
151
173
|
}
|
|
152
|
-
function
|
|
174
|
+
function J(t = {}) {
|
|
153
175
|
const {
|
|
154
|
-
startGray:
|
|
155
|
-
endGray:
|
|
156
|
-
steps:
|
|
157
|
-
format:
|
|
158
|
-
} =
|
|
159
|
-
return $(
|
|
176
|
+
startGray: n = "#ffffff",
|
|
177
|
+
endGray: c = "#000000",
|
|
178
|
+
steps: r = 10,
|
|
179
|
+
format: o = "hex"
|
|
180
|
+
} = t;
|
|
181
|
+
return $(n, c, { steps: r, format: o, includeEnds: !0 });
|
|
160
182
|
}
|
|
161
|
-
function
|
|
162
|
-
const {
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
183
|
+
function j(t, n = {}) {
|
|
184
|
+
const {
|
|
185
|
+
steps: c = 10,
|
|
186
|
+
format: r = "hex",
|
|
187
|
+
lightnessRange: o = 80,
|
|
188
|
+
minLightness: s = null,
|
|
189
|
+
maxLightness: e = null
|
|
190
|
+
} = n, i = w(t);
|
|
191
|
+
let a, l;
|
|
192
|
+
if (s !== null && e !== null) {
|
|
193
|
+
if (s > e)
|
|
194
|
+
throw new Error("minLightness 不能大于 maxLightness");
|
|
195
|
+
a = Math.max(0, Math.min(100, e)), l = Math.max(0, Math.min(100, s));
|
|
196
|
+
} else {
|
|
197
|
+
const h = i.lightness();
|
|
198
|
+
a = Math.min(95, h + o / 2), l = Math.max(5, h - o / 2);
|
|
199
|
+
}
|
|
200
|
+
const f = w({
|
|
201
|
+
h: i.hue(),
|
|
202
|
+
s: i.saturationl(),
|
|
203
|
+
l: a
|
|
204
|
+
}), u = w({
|
|
205
|
+
h: i.hue(),
|
|
206
|
+
s: i.saturationl(),
|
|
169
207
|
l
|
|
170
208
|
});
|
|
171
|
-
return $(f.hex(), u.hex(), { steps:
|
|
209
|
+
return $(f.hex(), u.hex(), { steps: c, format: r, includeEnds: !0 });
|
|
172
210
|
}
|
|
173
|
-
function Q(
|
|
174
|
-
const { steps:
|
|
175
|
-
if (
|
|
211
|
+
function Q(t, n, c = {}) {
|
|
212
|
+
const { steps: r = 10, format: o = "hex", includeEnds: s = !0 } = c;
|
|
213
|
+
if (r < 2)
|
|
176
214
|
throw new Error("步数必须至少为2");
|
|
177
|
-
const
|
|
178
|
-
let u =
|
|
215
|
+
const e = w(t), i = w(n), a = [], l = s ? r : r + 2, f = 1 / (l - 1);
|
|
216
|
+
let u = e.hue() || 0, h = i.hue() || 0;
|
|
179
217
|
const d = h - u;
|
|
180
218
|
Math.abs(d) > 180 && (d > 0 ? u += 360 : h += 360);
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
|
|
187
|
-
|
|
219
|
+
const M = e.saturationl(), g = i.saturationl(), m = e.lightness(), E = i.lightness();
|
|
220
|
+
for (let y = 0; y < l; y++) {
|
|
221
|
+
const p = y * f;
|
|
222
|
+
let b = u + (h - u) * p;
|
|
223
|
+
const x = M + (g - M) * p, v = m + (E - m) * p;
|
|
224
|
+
b = b % 360, b < 0 && (b += 360);
|
|
225
|
+
const A = w({ h: b, s: x, l: v });
|
|
226
|
+
!s && (y === 0 || y === l - 1) || a.push(L(A, o));
|
|
188
227
|
}
|
|
189
|
-
return
|
|
228
|
+
return a;
|
|
190
229
|
}
|
|
191
|
-
function
|
|
192
|
-
|
|
193
|
-
|
|
194
|
-
|
|
195
|
-
|
|
196
|
-
|
|
230
|
+
function S(t) {
|
|
231
|
+
if (!t || typeof t != "string")
|
|
232
|
+
throw new Error("Invalid RGB color: must be a string");
|
|
233
|
+
let n = t.replace("#", "");
|
|
234
|
+
if (n.length === 8 && (n = n.substring(0, 6)), !/^[0-9A-Fa-f]{6}$/.test(n))
|
|
235
|
+
throw new Error("Invalid RGB color format: must be #rrggbb or rrggbb");
|
|
236
|
+
const c = parseInt(n.slice(0, 2), 16) / 255, r = parseInt(n.slice(2, 4), 16) / 255, o = parseInt(n.slice(4, 6), 16) / 255, s = Math.max(c, r, o), e = Math.min(c, r, o), i = s - e;
|
|
237
|
+
let a = 0;
|
|
238
|
+
i !== 0 && (s === c ? a = (r - o) / i % 6 : s === r ? a = (o - c) / i + 2 : a = (c - r) / i + 4), a = Math.round(a * 60), a < 0 && (a += 360);
|
|
239
|
+
const l = Math.round((0.299 * c + 0.587 * r + 0.114 * o) * 100), f = (s + e) / 2;
|
|
240
|
+
let u = 0;
|
|
241
|
+
i !== 0 && f !== 0 && f !== 1 && (u = i / (1 - Math.abs(2 * f - 1)));
|
|
242
|
+
let h = 0;
|
|
243
|
+
return l > 0 && l < 100 && (h = Math.round(u * Math.min(l, 100 - l))), { h: a, c: Math.max(0, h), t: Math.max(0, Math.min(100, l)) };
|
|
197
244
|
}
|
|
198
|
-
function
|
|
199
|
-
|
|
200
|
-
|
|
201
|
-
|
|
202
|
-
|
|
203
|
-
|
|
204
|
-
|
|
245
|
+
function R(t, n = {}) {
|
|
246
|
+
if (!t || typeof t != "object" || t.h === void 0 || t.c === void 0 || t.t === void 0)
|
|
247
|
+
throw new Error("Invalid HCT color: must be an object with h, c, t properties");
|
|
248
|
+
const { h: c, c: r, t: o } = t, { maxChroma: s = 200 } = n, e = (c % 360 + 360) % 360, i = Math.max(0, Math.min(s, r)), a = Math.max(0, Math.min(100, o)), l = a / 100;
|
|
249
|
+
let f = 0;
|
|
250
|
+
if (a > 0 && a < 100 && i > 0) {
|
|
251
|
+
const y = Math.min(a, 100 - a);
|
|
252
|
+
f = y > 0 ? i / y : 0;
|
|
253
|
+
}
|
|
254
|
+
const u = (1 - Math.abs(2 * l - 1)) * Math.min(1, f), h = u * (1 - Math.abs(e / 60 % 2 - 1)), d = l - u / 2;
|
|
255
|
+
let M, g, m;
|
|
256
|
+
e >= 0 && e < 60 ? [M, g, m] = [u, h, 0] : e >= 60 && e < 120 ? [M, g, m] = [h, u, 0] : e >= 120 && e < 180 ? [M, g, m] = [0, u, h] : e >= 180 && e < 240 ? [M, g, m] = [0, h, u] : e >= 240 && e < 300 ? [M, g, m] = [h, 0, u] : [M, g, m] = [u, 0, h];
|
|
257
|
+
const E = (y) => {
|
|
258
|
+
const p = Math.max(0, Math.min(1, y + d)), b = Math.round(p * 255).toString(16);
|
|
259
|
+
return b.length === 1 ? "0" + b : b;
|
|
205
260
|
};
|
|
206
|
-
return `#${
|
|
261
|
+
return `#${E(M)}${E(g)}${E(m)}`;
|
|
207
262
|
}
|
|
208
|
-
function
|
|
209
|
-
|
|
210
|
-
|
|
211
|
-
|
|
212
|
-
|
|
213
|
-
|
|
214
|
-
|
|
215
|
-
|
|
216
|
-
|
|
263
|
+
function F(t, n, c = 0.5) {
|
|
264
|
+
if (!t || !n)
|
|
265
|
+
throw new Error("Both colors are required for blending");
|
|
266
|
+
const r = Math.max(0, Math.min(1, c)), o = S(t), s = S(n);
|
|
267
|
+
let e = o.h, i = s.h, a = i - e;
|
|
268
|
+
Math.abs(a) > 180 && (a > 0 ? e += 360 : i += 360, a = i - e);
|
|
269
|
+
const l = (e + a * r) % 360, f = o.c + (s.c - o.c) * r, u = o.t + (s.t - o.t) * r;
|
|
270
|
+
return R({
|
|
271
|
+
h: l < 0 ? l + 360 : l,
|
|
272
|
+
c: Math.max(0, Math.round(f)),
|
|
273
|
+
t: Math.max(0, Math.min(100, Math.round(u)))
|
|
217
274
|
});
|
|
218
275
|
}
|
|
219
|
-
function X(
|
|
220
|
-
|
|
221
|
-
|
|
222
|
-
|
|
223
|
-
|
|
224
|
-
|
|
225
|
-
|
|
226
|
-
|
|
276
|
+
function X(t, n, c = 0.15) {
|
|
277
|
+
if (!t || !n)
|
|
278
|
+
throw new Error("Both theme color and target color are required");
|
|
279
|
+
const r = Math.max(0, Math.min(1, c)), o = S(t), s = S(n);
|
|
280
|
+
let e = s.h, i = o.h, a = i - e;
|
|
281
|
+
Math.abs(a) > 180 && (a > 0 ? e += 360 : i += 360, a = i - e);
|
|
282
|
+
const l = (e + a * r) % 360;
|
|
283
|
+
return R({
|
|
284
|
+
h: l < 0 ? l + 360 : l,
|
|
285
|
+
c: s.c,
|
|
227
286
|
// 保持原有色度
|
|
228
|
-
t:
|
|
287
|
+
t: s.t
|
|
229
288
|
// 保持原有色调
|
|
230
289
|
});
|
|
231
290
|
}
|
|
232
|
-
function
|
|
233
|
-
|
|
234
|
-
|
|
235
|
-
|
|
236
|
-
|
|
237
|
-
|
|
238
|
-
|
|
291
|
+
function Y(t, n) {
|
|
292
|
+
if (!t)
|
|
293
|
+
throw new Error("Theme color is required");
|
|
294
|
+
const c = S(t);
|
|
295
|
+
let r;
|
|
296
|
+
if (Array.isArray(n) ? r = n : n && n.tones && Array.isArray(n.tones) ? r = n.tones : r = [10, 20, 30, 40, 50, 60, 70, 80, 90], !Array.isArray(r) || r.length === 0)
|
|
297
|
+
throw new Error("Tone steps must be a non-empty array");
|
|
298
|
+
const o = r.filter((s) => typeof s == "number" && s >= 0 && s <= 100);
|
|
299
|
+
if (o.length === 0)
|
|
300
|
+
throw new Error("No valid tone values found (must be numbers between 0-100)");
|
|
301
|
+
return o.map((s) => R({
|
|
302
|
+
h: c.h,
|
|
303
|
+
c: c.c,
|
|
304
|
+
t: s
|
|
239
305
|
}));
|
|
240
306
|
}
|
|
241
|
-
function
|
|
242
|
-
|
|
243
|
-
|
|
244
|
-
|
|
245
|
-
|
|
307
|
+
function N(t, n, c = 0.2) {
|
|
308
|
+
if (!t)
|
|
309
|
+
throw new Error("Theme color is required");
|
|
310
|
+
if (!n || typeof n != "object")
|
|
311
|
+
throw new Error("UI colors must be an object");
|
|
312
|
+
const r = Math.max(0, Math.min(1, c)), o = {};
|
|
313
|
+
for (const [s, e] of Object.entries(n))
|
|
314
|
+
try {
|
|
315
|
+
o[s] = F(t, e, r);
|
|
316
|
+
} catch (i) {
|
|
317
|
+
console.warn(`Failed to blend color for key "${s}": ${/** @type {Error} */
|
|
318
|
+
i.message}`), o[s] = e;
|
|
319
|
+
}
|
|
320
|
+
return o;
|
|
246
321
|
}
|
|
247
|
-
function
|
|
248
|
-
|
|
249
|
-
|
|
250
|
-
|
|
251
|
-
|
|
252
|
-
|
|
322
|
+
function I(t, n = {}) {
|
|
323
|
+
if (!t)
|
|
324
|
+
throw new Error("Theme color is required");
|
|
325
|
+
const {
|
|
326
|
+
baseGray: c = "#989898",
|
|
327
|
+
blendRatio: r = 0.08,
|
|
328
|
+
isDark: o = !1,
|
|
329
|
+
steps: s = 12,
|
|
330
|
+
// 默认 12 个等级,可以增加到 24、36 等以获得更细腻的梯度
|
|
331
|
+
lightnessRange: e = 85,
|
|
332
|
+
// 亮度变化范围(中心扩展模式),默认 85
|
|
333
|
+
minLightness: i = null,
|
|
334
|
+
// 最小亮度(固定端点模式),优先级高于 lightnessRange
|
|
335
|
+
maxLightness: a = null
|
|
336
|
+
// 最大亮度(固定端点模式),优先级高于 lightnessRange
|
|
337
|
+
} = n, l = Math.max(0, Math.min(1, r)), f = Math.max(2, Math.min(100, Math.round(s))), u = F(c, t, l), h = {
|
|
338
|
+
steps: f,
|
|
339
|
+
format: "hex"
|
|
340
|
+
};
|
|
341
|
+
if (i !== null && a !== null)
|
|
342
|
+
h.minLightness = i, h.maxLightness = a;
|
|
343
|
+
else {
|
|
344
|
+
const m = Math.max(20, Math.min(95, e));
|
|
345
|
+
h.lightnessRange = m;
|
|
346
|
+
}
|
|
347
|
+
const d = j(u, h), M = o ? d.reverse() : d, g = {};
|
|
348
|
+
return M.forEach((m, E) => {
|
|
349
|
+
g[`gray-${E + 1}`] = m;
|
|
350
|
+
}), g;
|
|
253
351
|
}
|
|
254
|
-
function
|
|
352
|
+
function T(t, n = {}) {
|
|
353
|
+
if (!t)
|
|
354
|
+
throw new Error("Theme color is required");
|
|
255
355
|
const {
|
|
256
|
-
semanticColors:
|
|
356
|
+
semanticColors: c = {
|
|
257
357
|
success: "#52c41a",
|
|
258
358
|
warning: "#faad14",
|
|
259
359
|
error: "#ff4d4f",
|
|
260
360
|
info: "#1890ff"
|
|
261
361
|
},
|
|
262
|
-
blendRatio:
|
|
263
|
-
isDark:
|
|
264
|
-
} =
|
|
265
|
-
|
|
266
|
-
|
|
267
|
-
|
|
268
|
-
|
|
269
|
-
|
|
270
|
-
|
|
271
|
-
|
|
362
|
+
blendRatio: r = 0,
|
|
363
|
+
isDark: o = !1
|
|
364
|
+
} = n;
|
|
365
|
+
if (!c || typeof c != "object")
|
|
366
|
+
throw new Error("Semantic colors must be an object");
|
|
367
|
+
const s = Math.max(0, Math.min(1, r)), e = {};
|
|
368
|
+
return Object.entries(c).forEach(([i, a]) => {
|
|
369
|
+
if (!a || typeof a != "string") {
|
|
370
|
+
console.warn(`Invalid color for semantic color "${i}": ${a}`);
|
|
371
|
+
return;
|
|
372
|
+
}
|
|
373
|
+
try {
|
|
374
|
+
const l = {}, f = S(a);
|
|
375
|
+
(o ? [90, 80, 70, 60, 50, 40, 30, 25, 20, 15] : [15, 25, 35, 45, 55, 65, 75, 85, 90, 95]).forEach((h, d) => {
|
|
376
|
+
const M = { h: f.h, c: f.c, t: h }, g = F(R(M), t, s);
|
|
377
|
+
l[`${i}-${d + 1}`] = g;
|
|
378
|
+
}), Object.assign(e, l);
|
|
379
|
+
} catch (l) {
|
|
380
|
+
console.warn(`Failed to generate variants for semantic color "${i}": ${/** @type {Error} */
|
|
381
|
+
l.message}`);
|
|
382
|
+
}
|
|
383
|
+
}), e;
|
|
272
384
|
}
|
|
273
|
-
function q(
|
|
274
|
-
|
|
275
|
-
|
|
276
|
-
|
|
277
|
-
|
|
278
|
-
|
|
385
|
+
function q(t, n = {}) {
|
|
386
|
+
if (!t)
|
|
387
|
+
throw new Error("Theme color is required");
|
|
388
|
+
const { isDark: c = !1 } = n, r = S(t), o = {};
|
|
389
|
+
return (c ? [90, 80, 70, 60, 50, 40, 30, 25, 20, 15] : [15, 25, 35, 45, 55, 65, 75, 85, 90, 95]).forEach((e, i) => {
|
|
390
|
+
const a = { h: r.h, c: r.c, t: e };
|
|
391
|
+
o[`theme-${i + 1}`] = R(a);
|
|
392
|
+
}), o;
|
|
279
393
|
}
|
|
280
|
-
function
|
|
394
|
+
function Z(t, n = {}) {
|
|
395
|
+
if (!t)
|
|
396
|
+
throw new Error("Theme color is required");
|
|
281
397
|
const {
|
|
282
|
-
baseGray:
|
|
283
|
-
isDark:
|
|
284
|
-
semanticColors:
|
|
285
|
-
controlBlendRatio:
|
|
286
|
-
semanticBlendRatio:
|
|
287
|
-
|
|
288
|
-
|
|
289
|
-
|
|
290
|
-
|
|
291
|
-
|
|
292
|
-
|
|
293
|
-
|
|
294
|
-
|
|
398
|
+
baseGray: c = "#666666",
|
|
399
|
+
isDark: r = !1,
|
|
400
|
+
semanticColors: o,
|
|
401
|
+
controlBlendRatio: s = 0.08,
|
|
402
|
+
semanticBlendRatio: e = 0.12,
|
|
403
|
+
controlSteps: i = 12,
|
|
404
|
+
// 控件色灰度等级数
|
|
405
|
+
controlLightnessRange: a = 85,
|
|
406
|
+
// 控件色亮度变化范围(中心扩展模式)
|
|
407
|
+
controlMinLightness: l = null,
|
|
408
|
+
// 控件色最小亮度(固定端点模式)
|
|
409
|
+
controlMaxLightness: f = null
|
|
410
|
+
// 控件色最大亮度(固定端点模式)
|
|
411
|
+
} = n, u = Math.max(0, Math.min(1, s)), h = Math.max(0, Math.min(1, e)), d = {
|
|
412
|
+
baseGray: c,
|
|
413
|
+
blendRatio: u,
|
|
414
|
+
isDark: r,
|
|
415
|
+
steps: i
|
|
416
|
+
};
|
|
417
|
+
return l !== null && f !== null ? (d.minLightness = l, d.maxLightness = f) : d.lightnessRange = a, {
|
|
418
|
+
// 1. 基础控件颜色(灰色系1-12或更多)
|
|
419
|
+
controls: I(t, d),
|
|
295
420
|
// 2. 表意色(1-10)
|
|
296
|
-
semantic:
|
|
297
|
-
semanticColors:
|
|
298
|
-
blendRatio:
|
|
299
|
-
isDark:
|
|
421
|
+
semantic: T(t, {
|
|
422
|
+
semanticColors: o,
|
|
423
|
+
blendRatio: h,
|
|
424
|
+
isDark: r
|
|
300
425
|
}),
|
|
301
426
|
// 3. 主题色(1-10)
|
|
302
|
-
theme: q(
|
|
427
|
+
theme: q(t, { isDark: r })
|
|
303
428
|
};
|
|
304
429
|
}
|
|
305
|
-
function
|
|
430
|
+
function _(t, n = {}) {
|
|
431
|
+
if (!t)
|
|
432
|
+
throw new Error("Theme color is required");
|
|
306
433
|
const {
|
|
307
|
-
semanticColors:
|
|
434
|
+
semanticColors: c = {
|
|
308
435
|
success: "#52c41a",
|
|
309
436
|
warning: "#faad14",
|
|
310
437
|
error: "#ff4d4f",
|
|
311
438
|
info: "#1890ff"
|
|
312
439
|
},
|
|
313
|
-
uiColors:
|
|
440
|
+
uiColors: r = {
|
|
314
441
|
background: "#ffffff",
|
|
315
442
|
surface: "#fafafa",
|
|
316
443
|
border: "#d9d9d9",
|
|
317
444
|
disabled: "#f5f5f5"
|
|
318
445
|
},
|
|
319
|
-
harmonizeRatio:
|
|
320
|
-
blendRatio:
|
|
321
|
-
|
|
322
|
-
} =
|
|
323
|
-
|
|
324
|
-
|
|
325
|
-
|
|
326
|
-
|
|
327
|
-
|
|
446
|
+
harmonizeRatio: o = 0.15,
|
|
447
|
+
blendRatio: s = 0.12,
|
|
448
|
+
isDark: e = !1
|
|
449
|
+
} = (
|
|
450
|
+
/** @type {any} */
|
|
451
|
+
n
|
|
452
|
+
), i = Math.max(0, Math.min(1, o)), a = Math.max(0, Math.min(1, s)), l = q(t, { isDark: e }), f = I(t, {
|
|
453
|
+
blendRatio: a * 0.5,
|
|
454
|
+
// 中性色混合比例稍低
|
|
455
|
+
isDark: e
|
|
456
|
+
}), u = T(t, {
|
|
457
|
+
semanticColors: c,
|
|
458
|
+
blendRatio: i,
|
|
459
|
+
isDark: e
|
|
460
|
+
}), h = {};
|
|
461
|
+
return Object.entries(c).forEach(([M]) => {
|
|
462
|
+
h[M] = {};
|
|
463
|
+
for (let g = 1; g <= 10; g++) {
|
|
464
|
+
const m = `${M}-${g}`;
|
|
465
|
+
u[m] && (h[M][g] = u[m]);
|
|
328
466
|
}
|
|
329
|
-
})
|
|
330
|
-
|
|
331
|
-
theme
|
|
332
|
-
|
|
333
|
-
|
|
467
|
+
}), {
|
|
468
|
+
theme: l,
|
|
469
|
+
// 主题色阶 theme-1 到 theme-10
|
|
470
|
+
controls: f,
|
|
471
|
+
// 中性色阶 gray-1 到 gray-12
|
|
472
|
+
semantic: h,
|
|
473
|
+
// 功能色系
|
|
474
|
+
ui: N(t, r, a)
|
|
334
475
|
};
|
|
335
|
-
return s && (l.variants = O(n)), l;
|
|
336
476
|
}
|
|
337
|
-
const
|
|
477
|
+
const C = {
|
|
338
478
|
red: "#F53F3F",
|
|
339
479
|
orangered: "#F77234",
|
|
340
480
|
orange: "#FF7D00",
|
|
@@ -349,11 +489,20 @@ const H = {
|
|
|
349
489
|
pinkpurple: "#D91AD9",
|
|
350
490
|
magenta: "#F5319D"
|
|
351
491
|
};
|
|
352
|
-
function
|
|
353
|
-
const
|
|
354
|
-
return Object.keys(
|
|
355
|
-
n
|
|
356
|
-
|
|
492
|
+
function tt() {
|
|
493
|
+
const t = {};
|
|
494
|
+
return Object.keys(C).forEach((n) => {
|
|
495
|
+
t[n] = {}, t[n].light = B(C[
|
|
496
|
+
/** @type {keyof typeof colorList} */
|
|
497
|
+
n
|
|
498
|
+
], { list: !0 }), t[n].dark = B(C[
|
|
499
|
+
/** @type {keyof typeof colorList} */
|
|
500
|
+
n
|
|
501
|
+
], { list: !0, dark: !0 }), t[n].primary = C[
|
|
502
|
+
/** @type {keyof typeof colorList} */
|
|
503
|
+
n
|
|
504
|
+
];
|
|
505
|
+
}), t.gray = {}, t.gray.light = [
|
|
357
506
|
"#f7f8fa",
|
|
358
507
|
"#f2f3f5",
|
|
359
508
|
"#e5e6eb",
|
|
@@ -364,7 +513,7 @@ function _() {
|
|
|
364
513
|
"#4e5969",
|
|
365
514
|
"#272e3b",
|
|
366
515
|
"#1d2129"
|
|
367
|
-
],
|
|
516
|
+
], t.gray.dark = [
|
|
368
517
|
"#17171a",
|
|
369
518
|
"#2e2e30",
|
|
370
519
|
"#484849",
|
|
@@ -375,28 +524,28 @@ function _() {
|
|
|
375
524
|
"#c5c5c5",
|
|
376
525
|
"#dfdfdf",
|
|
377
526
|
"#f6f6f6"
|
|
378
|
-
],
|
|
527
|
+
], t.gray.primary = t.gray.light[6], t;
|
|
379
528
|
}
|
|
380
529
|
export {
|
|
381
|
-
|
|
382
|
-
|
|
383
|
-
|
|
384
|
-
|
|
385
|
-
|
|
386
|
-
|
|
387
|
-
|
|
388
|
-
|
|
389
|
-
|
|
530
|
+
F as blendInHct,
|
|
531
|
+
N as blendUIColors,
|
|
532
|
+
C as colorList,
|
|
533
|
+
W as extractColorFromFile,
|
|
534
|
+
P as extractColorFromImage,
|
|
535
|
+
B as generate,
|
|
536
|
+
I as generateControlColors,
|
|
537
|
+
J as generateGrayLinear,
|
|
538
|
+
Z as generateInterfaceColorSystem,
|
|
390
539
|
$ as generateLinear,
|
|
391
540
|
Q as generateLinearHSL,
|
|
392
|
-
|
|
393
|
-
|
|
541
|
+
j as generateMonochromeLinear,
|
|
542
|
+
T as generateSemanticColors,
|
|
394
543
|
q as generateThemeColors,
|
|
395
|
-
|
|
396
|
-
|
|
397
|
-
|
|
398
|
-
|
|
544
|
+
_ as generateThemePalette,
|
|
545
|
+
Y as generateThemeVariants,
|
|
546
|
+
tt as getPresetColors,
|
|
547
|
+
K as getRgbStr,
|
|
399
548
|
X as harmonizeColor,
|
|
400
|
-
|
|
401
|
-
|
|
549
|
+
R as hctToRgb,
|
|
550
|
+
S as rgbToHct
|
|
402
551
|
};
|