@sanity/color-input 4.0.0 → 4.0.1
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/lib/_chunks-cjs/ColorInput.js +1033 -0
- package/lib/_chunks-cjs/ColorInput.js.map +1 -0
- package/lib/_chunks-es/ColorInput.mjs +1043 -0
- package/lib/_chunks-es/ColorInput.mjs.map +1 -0
- package/lib/_legacy/ColorInput.esm.js +1043 -0
- package/lib/_legacy/ColorInput.esm.js.map +1 -0
- package/lib/index.d.mts +6 -3
- package/lib/index.d.ts +6 -3
- package/lib/index.esm.js +4 -1040
- package/lib/index.esm.js.map +1 -1
- package/lib/index.js +4 -1031
- package/lib/index.js.map +1 -1
- package/lib/index.mjs +4 -1040
- package/lib/index.mjs.map +1 -1
- package/package.json +1 -1
- package/src/ColorInput.tsx +3 -27
- package/src/ColorPicker.tsx +1 -1
- package/src/LazyColorInput.tsx +3 -0
- package/src/index.ts +2 -2
- package/src/schemas/color.tsx +2 -1
- package/src/types.ts +19 -0
package/lib/index.js
CHANGED
|
@@ -1,1036 +1,9 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
Object.defineProperty(exports, "__esModule", { value: !0 });
|
|
3
|
-
var sanity = require("sanity"), jsxRuntime = require("react/jsx-runtime"),
|
|
4
|
-
|
|
5
|
-
"
|
|
6
|
-
|
|
7
|
-
return typeof obj2;
|
|
8
|
-
} : function(obj2) {
|
|
9
|
-
return obj2 && typeof Symbol == "function" && obj2.constructor === Symbol && obj2 !== Symbol.prototype ? "symbol" : typeof obj2;
|
|
10
|
-
}, _typeof(obj);
|
|
11
|
-
}
|
|
12
|
-
var trimLeft = /^\s+/, trimRight = /\s+$/;
|
|
13
|
-
function tinycolor(color2, opts) {
|
|
14
|
-
if (color2 = color2 || "", opts = opts || {}, color2 instanceof tinycolor)
|
|
15
|
-
return color2;
|
|
16
|
-
if (!(this instanceof tinycolor))
|
|
17
|
-
return new tinycolor(color2, opts);
|
|
18
|
-
var rgb = inputToRGB(color2);
|
|
19
|
-
this._originalInput = color2, this._r = rgb.r, this._g = rgb.g, this._b = rgb.b, this._a = rgb.a, this._roundA = Math.round(100 * this._a) / 100, this._format = opts.format || rgb.format, this._gradientType = opts.gradientType, this._r < 1 && (this._r = Math.round(this._r)), this._g < 1 && (this._g = Math.round(this._g)), this._b < 1 && (this._b = Math.round(this._b)), this._ok = rgb.ok;
|
|
20
|
-
}
|
|
21
|
-
tinycolor.prototype = {
|
|
22
|
-
isDark: function() {
|
|
23
|
-
return this.getBrightness() < 128;
|
|
24
|
-
},
|
|
25
|
-
isLight: function() {
|
|
26
|
-
return !this.isDark();
|
|
27
|
-
},
|
|
28
|
-
isValid: function() {
|
|
29
|
-
return this._ok;
|
|
30
|
-
},
|
|
31
|
-
getOriginalInput: function() {
|
|
32
|
-
return this._originalInput;
|
|
33
|
-
},
|
|
34
|
-
getFormat: function() {
|
|
35
|
-
return this._format;
|
|
36
|
-
},
|
|
37
|
-
getAlpha: function() {
|
|
38
|
-
return this._a;
|
|
39
|
-
},
|
|
40
|
-
getBrightness: function() {
|
|
41
|
-
var rgb = this.toRgb();
|
|
42
|
-
return (rgb.r * 299 + rgb.g * 587 + rgb.b * 114) / 1e3;
|
|
43
|
-
},
|
|
44
|
-
getLuminance: function() {
|
|
45
|
-
var rgb = this.toRgb(), RsRGB, GsRGB, BsRGB, R, G, B;
|
|
46
|
-
return RsRGB = rgb.r / 255, GsRGB = rgb.g / 255, BsRGB = rgb.b / 255, RsRGB <= 0.03928 ? R = RsRGB / 12.92 : R = Math.pow((RsRGB + 0.055) / 1.055, 2.4), GsRGB <= 0.03928 ? G = GsRGB / 12.92 : G = Math.pow((GsRGB + 0.055) / 1.055, 2.4), BsRGB <= 0.03928 ? B = BsRGB / 12.92 : B = Math.pow((BsRGB + 0.055) / 1.055, 2.4), 0.2126 * R + 0.7152 * G + 0.0722 * B;
|
|
47
|
-
},
|
|
48
|
-
setAlpha: function(value) {
|
|
49
|
-
return this._a = boundAlpha(value), this._roundA = Math.round(100 * this._a) / 100, this;
|
|
50
|
-
},
|
|
51
|
-
toHsv: function() {
|
|
52
|
-
var hsv = rgbToHsv(this._r, this._g, this._b);
|
|
53
|
-
return {
|
|
54
|
-
h: hsv.h * 360,
|
|
55
|
-
s: hsv.s,
|
|
56
|
-
v: hsv.v,
|
|
57
|
-
a: this._a
|
|
58
|
-
};
|
|
59
|
-
},
|
|
60
|
-
toHsvString: function() {
|
|
61
|
-
var hsv = rgbToHsv(this._r, this._g, this._b), h = Math.round(hsv.h * 360), s = Math.round(hsv.s * 100), v = Math.round(hsv.v * 100);
|
|
62
|
-
return this._a == 1 ? "hsv(" + h + ", " + s + "%, " + v + "%)" : "hsva(" + h + ", " + s + "%, " + v + "%, " + this._roundA + ")";
|
|
63
|
-
},
|
|
64
|
-
toHsl: function() {
|
|
65
|
-
var hsl = rgbToHsl(this._r, this._g, this._b);
|
|
66
|
-
return {
|
|
67
|
-
h: hsl.h * 360,
|
|
68
|
-
s: hsl.s,
|
|
69
|
-
l: hsl.l,
|
|
70
|
-
a: this._a
|
|
71
|
-
};
|
|
72
|
-
},
|
|
73
|
-
toHslString: function() {
|
|
74
|
-
var hsl = rgbToHsl(this._r, this._g, this._b), h = Math.round(hsl.h * 360), s = Math.round(hsl.s * 100), l = Math.round(hsl.l * 100);
|
|
75
|
-
return this._a == 1 ? "hsl(" + h + ", " + s + "%, " + l + "%)" : "hsla(" + h + ", " + s + "%, " + l + "%, " + this._roundA + ")";
|
|
76
|
-
},
|
|
77
|
-
toHex: function(allow3Char) {
|
|
78
|
-
return rgbToHex(this._r, this._g, this._b, allow3Char);
|
|
79
|
-
},
|
|
80
|
-
toHexString: function(allow3Char) {
|
|
81
|
-
return "#" + this.toHex(allow3Char);
|
|
82
|
-
},
|
|
83
|
-
toHex8: function(allow4Char) {
|
|
84
|
-
return rgbaToHex(this._r, this._g, this._b, this._a, allow4Char);
|
|
85
|
-
},
|
|
86
|
-
toHex8String: function(allow4Char) {
|
|
87
|
-
return "#" + this.toHex8(allow4Char);
|
|
88
|
-
},
|
|
89
|
-
toRgb: function() {
|
|
90
|
-
return {
|
|
91
|
-
r: Math.round(this._r),
|
|
92
|
-
g: Math.round(this._g),
|
|
93
|
-
b: Math.round(this._b),
|
|
94
|
-
a: this._a
|
|
95
|
-
};
|
|
96
|
-
},
|
|
97
|
-
toRgbString: function() {
|
|
98
|
-
return this._a == 1 ? "rgb(" + Math.round(this._r) + ", " + Math.round(this._g) + ", " + Math.round(this._b) + ")" : "rgba(" + Math.round(this._r) + ", " + Math.round(this._g) + ", " + Math.round(this._b) + ", " + this._roundA + ")";
|
|
99
|
-
},
|
|
100
|
-
toPercentageRgb: function() {
|
|
101
|
-
return {
|
|
102
|
-
r: Math.round(bound01(this._r, 255) * 100) + "%",
|
|
103
|
-
g: Math.round(bound01(this._g, 255) * 100) + "%",
|
|
104
|
-
b: Math.round(bound01(this._b, 255) * 100) + "%",
|
|
105
|
-
a: this._a
|
|
106
|
-
};
|
|
107
|
-
},
|
|
108
|
-
toPercentageRgbString: function() {
|
|
109
|
-
return this._a == 1 ? "rgb(" + Math.round(bound01(this._r, 255) * 100) + "%, " + Math.round(bound01(this._g, 255) * 100) + "%, " + Math.round(bound01(this._b, 255) * 100) + "%)" : "rgba(" + Math.round(bound01(this._r, 255) * 100) + "%, " + Math.round(bound01(this._g, 255) * 100) + "%, " + Math.round(bound01(this._b, 255) * 100) + "%, " + this._roundA + ")";
|
|
110
|
-
},
|
|
111
|
-
toName: function() {
|
|
112
|
-
return this._a === 0 ? "transparent" : this._a < 1 ? !1 : hexNames[rgbToHex(this._r, this._g, this._b, !0)] || !1;
|
|
113
|
-
},
|
|
114
|
-
toFilter: function(secondColor) {
|
|
115
|
-
var hex8String = "#" + rgbaToArgbHex(this._r, this._g, this._b, this._a), secondHex8String = hex8String, gradientType = this._gradientType ? "GradientType = 1, " : "";
|
|
116
|
-
if (secondColor) {
|
|
117
|
-
var s = tinycolor(secondColor);
|
|
118
|
-
secondHex8String = "#" + rgbaToArgbHex(s._r, s._g, s._b, s._a);
|
|
119
|
-
}
|
|
120
|
-
return "progid:DXImageTransform.Microsoft.gradient(" + gradientType + "startColorstr=" + hex8String + ",endColorstr=" + secondHex8String + ")";
|
|
121
|
-
},
|
|
122
|
-
toString: function(format) {
|
|
123
|
-
var formatSet = !!format;
|
|
124
|
-
format = format || this._format;
|
|
125
|
-
var formattedString = !1, hasAlpha = this._a < 1 && this._a >= 0, needsAlphaFormat = !formatSet && hasAlpha && (format === "hex" || format === "hex6" || format === "hex3" || format === "hex4" || format === "hex8" || format === "name");
|
|
126
|
-
return needsAlphaFormat ? format === "name" && this._a === 0 ? this.toName() : this.toRgbString() : (format === "rgb" && (formattedString = this.toRgbString()), format === "prgb" && (formattedString = this.toPercentageRgbString()), (format === "hex" || format === "hex6") && (formattedString = this.toHexString()), format === "hex3" && (formattedString = this.toHexString(!0)), format === "hex4" && (formattedString = this.toHex8String(!0)), format === "hex8" && (formattedString = this.toHex8String()), format === "name" && (formattedString = this.toName()), format === "hsl" && (formattedString = this.toHslString()), format === "hsv" && (formattedString = this.toHsvString()), formattedString || this.toHexString());
|
|
127
|
-
},
|
|
128
|
-
clone: function() {
|
|
129
|
-
return tinycolor(this.toString());
|
|
130
|
-
},
|
|
131
|
-
_applyModification: function(fn, args) {
|
|
132
|
-
var color2 = fn.apply(null, [this].concat([].slice.call(args)));
|
|
133
|
-
return this._r = color2._r, this._g = color2._g, this._b = color2._b, this.setAlpha(color2._a), this;
|
|
134
|
-
},
|
|
135
|
-
lighten: function() {
|
|
136
|
-
return this._applyModification(_lighten, arguments);
|
|
137
|
-
},
|
|
138
|
-
brighten: function() {
|
|
139
|
-
return this._applyModification(_brighten, arguments);
|
|
140
|
-
},
|
|
141
|
-
darken: function() {
|
|
142
|
-
return this._applyModification(_darken, arguments);
|
|
143
|
-
},
|
|
144
|
-
desaturate: function() {
|
|
145
|
-
return this._applyModification(_desaturate, arguments);
|
|
146
|
-
},
|
|
147
|
-
saturate: function() {
|
|
148
|
-
return this._applyModification(_saturate, arguments);
|
|
149
|
-
},
|
|
150
|
-
greyscale: function() {
|
|
151
|
-
return this._applyModification(_greyscale, arguments);
|
|
152
|
-
},
|
|
153
|
-
spin: function() {
|
|
154
|
-
return this._applyModification(_spin, arguments);
|
|
155
|
-
},
|
|
156
|
-
_applyCombination: function(fn, args) {
|
|
157
|
-
return fn.apply(null, [this].concat([].slice.call(args)));
|
|
158
|
-
},
|
|
159
|
-
analogous: function() {
|
|
160
|
-
return this._applyCombination(_analogous, arguments);
|
|
161
|
-
},
|
|
162
|
-
complement: function() {
|
|
163
|
-
return this._applyCombination(_complement, arguments);
|
|
164
|
-
},
|
|
165
|
-
monochromatic: function() {
|
|
166
|
-
return this._applyCombination(_monochromatic, arguments);
|
|
167
|
-
},
|
|
168
|
-
splitcomplement: function() {
|
|
169
|
-
return this._applyCombination(_splitcomplement, arguments);
|
|
170
|
-
},
|
|
171
|
-
// Disabled until https://github.com/bgrins/TinyColor/issues/254
|
|
172
|
-
// polyad: function (number) {
|
|
173
|
-
// return this._applyCombination(polyad, [number]);
|
|
174
|
-
// },
|
|
175
|
-
triad: function() {
|
|
176
|
-
return this._applyCombination(polyad, [3]);
|
|
177
|
-
},
|
|
178
|
-
tetrad: function() {
|
|
179
|
-
return this._applyCombination(polyad, [4]);
|
|
180
|
-
}
|
|
181
|
-
};
|
|
182
|
-
tinycolor.fromRatio = function(color2, opts) {
|
|
183
|
-
if (_typeof(color2) == "object") {
|
|
184
|
-
var newColor = {};
|
|
185
|
-
for (var i in color2)
|
|
186
|
-
color2.hasOwnProperty(i) && (i === "a" ? newColor[i] = color2[i] : newColor[i] = convertToPercentage(color2[i]));
|
|
187
|
-
color2 = newColor;
|
|
188
|
-
}
|
|
189
|
-
return tinycolor(color2, opts);
|
|
190
|
-
};
|
|
191
|
-
function inputToRGB(color2) {
|
|
192
|
-
var rgb = {
|
|
193
|
-
r: 0,
|
|
194
|
-
g: 0,
|
|
195
|
-
b: 0
|
|
196
|
-
}, a = 1, s = null, v = null, l = null, ok = !1, format = !1;
|
|
197
|
-
return typeof color2 == "string" && (color2 = stringInputToObject(color2)), _typeof(color2) == "object" && (isValidCSSUnit(color2.r) && isValidCSSUnit(color2.g) && isValidCSSUnit(color2.b) ? (rgb = rgbToRgb(color2.r, color2.g, color2.b), ok = !0, format = String(color2.r).substr(-1) === "%" ? "prgb" : "rgb") : isValidCSSUnit(color2.h) && isValidCSSUnit(color2.s) && isValidCSSUnit(color2.v) ? (s = convertToPercentage(color2.s), v = convertToPercentage(color2.v), rgb = hsvToRgb(color2.h, s, v), ok = !0, format = "hsv") : isValidCSSUnit(color2.h) && isValidCSSUnit(color2.s) && isValidCSSUnit(color2.l) && (s = convertToPercentage(color2.s), l = convertToPercentage(color2.l), rgb = hslToRgb(color2.h, s, l), ok = !0, format = "hsl"), color2.hasOwnProperty("a") && (a = color2.a)), a = boundAlpha(a), {
|
|
198
|
-
ok,
|
|
199
|
-
format: color2.format || format,
|
|
200
|
-
r: Math.min(255, Math.max(rgb.r, 0)),
|
|
201
|
-
g: Math.min(255, Math.max(rgb.g, 0)),
|
|
202
|
-
b: Math.min(255, Math.max(rgb.b, 0)),
|
|
203
|
-
a
|
|
204
|
-
};
|
|
205
|
-
}
|
|
206
|
-
function rgbToRgb(r, g, b) {
|
|
207
|
-
return {
|
|
208
|
-
r: bound01(r, 255) * 255,
|
|
209
|
-
g: bound01(g, 255) * 255,
|
|
210
|
-
b: bound01(b, 255) * 255
|
|
211
|
-
};
|
|
212
|
-
}
|
|
213
|
-
function rgbToHsl(r, g, b) {
|
|
214
|
-
r = bound01(r, 255), g = bound01(g, 255), b = bound01(b, 255);
|
|
215
|
-
var max = Math.max(r, g, b), min = Math.min(r, g, b), h, s, l = (max + min) / 2;
|
|
216
|
-
if (max == min)
|
|
217
|
-
h = s = 0;
|
|
218
|
-
else {
|
|
219
|
-
var d = max - min;
|
|
220
|
-
switch (s = l > 0.5 ? d / (2 - max - min) : d / (max + min), max) {
|
|
221
|
-
case r:
|
|
222
|
-
h = (g - b) / d + (g < b ? 6 : 0);
|
|
223
|
-
break;
|
|
224
|
-
case g:
|
|
225
|
-
h = (b - r) / d + 2;
|
|
226
|
-
break;
|
|
227
|
-
case b:
|
|
228
|
-
h = (r - g) / d + 4;
|
|
229
|
-
break;
|
|
230
|
-
}
|
|
231
|
-
h /= 6;
|
|
232
|
-
}
|
|
233
|
-
return {
|
|
234
|
-
h,
|
|
235
|
-
s,
|
|
236
|
-
l
|
|
237
|
-
};
|
|
238
|
-
}
|
|
239
|
-
function hslToRgb(h, s, l) {
|
|
240
|
-
var r, g, b;
|
|
241
|
-
h = bound01(h, 360), s = bound01(s, 100), l = bound01(l, 100);
|
|
242
|
-
function hue2rgb(p2, q2, t) {
|
|
243
|
-
return t < 0 && (t += 1), t > 1 && (t -= 1), t < 1 / 6 ? p2 + (q2 - p2) * 6 * t : t < 1 / 2 ? q2 : t < 2 / 3 ? p2 + (q2 - p2) * (2 / 3 - t) * 6 : p2;
|
|
244
|
-
}
|
|
245
|
-
if (s === 0)
|
|
246
|
-
r = g = b = l;
|
|
247
|
-
else {
|
|
248
|
-
var q = l < 0.5 ? l * (1 + s) : l + s - l * s, p = 2 * l - q;
|
|
249
|
-
r = hue2rgb(p, q, h + 1 / 3), g = hue2rgb(p, q, h), b = hue2rgb(p, q, h - 1 / 3);
|
|
250
|
-
}
|
|
251
|
-
return {
|
|
252
|
-
r: r * 255,
|
|
253
|
-
g: g * 255,
|
|
254
|
-
b: b * 255
|
|
255
|
-
};
|
|
256
|
-
}
|
|
257
|
-
function rgbToHsv(r, g, b) {
|
|
258
|
-
r = bound01(r, 255), g = bound01(g, 255), b = bound01(b, 255);
|
|
259
|
-
var max = Math.max(r, g, b), min = Math.min(r, g, b), h, s, v = max, d = max - min;
|
|
260
|
-
if (s = max === 0 ? 0 : d / max, max == min)
|
|
261
|
-
h = 0;
|
|
262
|
-
else {
|
|
263
|
-
switch (max) {
|
|
264
|
-
case r:
|
|
265
|
-
h = (g - b) / d + (g < b ? 6 : 0);
|
|
266
|
-
break;
|
|
267
|
-
case g:
|
|
268
|
-
h = (b - r) / d + 2;
|
|
269
|
-
break;
|
|
270
|
-
case b:
|
|
271
|
-
h = (r - g) / d + 4;
|
|
272
|
-
break;
|
|
273
|
-
}
|
|
274
|
-
h /= 6;
|
|
275
|
-
}
|
|
276
|
-
return {
|
|
277
|
-
h,
|
|
278
|
-
s,
|
|
279
|
-
v
|
|
280
|
-
};
|
|
281
|
-
}
|
|
282
|
-
function hsvToRgb(h, s, v) {
|
|
283
|
-
h = bound01(h, 360) * 6, s = bound01(s, 100), v = bound01(v, 100);
|
|
284
|
-
var i = Math.floor(h), f = h - i, p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s), mod = i % 6, r = [v, q, p, p, t, v][mod], g = [t, v, v, q, p, p][mod], b = [p, p, t, v, v, q][mod];
|
|
285
|
-
return {
|
|
286
|
-
r: r * 255,
|
|
287
|
-
g: g * 255,
|
|
288
|
-
b: b * 255
|
|
289
|
-
};
|
|
290
|
-
}
|
|
291
|
-
function rgbToHex(r, g, b, allow3Char) {
|
|
292
|
-
var hex = [pad2(Math.round(r).toString(16)), pad2(Math.round(g).toString(16)), pad2(Math.round(b).toString(16))];
|
|
293
|
-
return allow3Char && hex[0].charAt(0) == hex[0].charAt(1) && hex[1].charAt(0) == hex[1].charAt(1) && hex[2].charAt(0) == hex[2].charAt(1) ? hex[0].charAt(0) + hex[1].charAt(0) + hex[2].charAt(0) : hex.join("");
|
|
294
|
-
}
|
|
295
|
-
function rgbaToHex(r, g, b, a, allow4Char) {
|
|
296
|
-
var hex = [pad2(Math.round(r).toString(16)), pad2(Math.round(g).toString(16)), pad2(Math.round(b).toString(16)), pad2(convertDecimalToHex(a))];
|
|
297
|
-
return allow4Char && hex[0].charAt(0) == hex[0].charAt(1) && hex[1].charAt(0) == hex[1].charAt(1) && hex[2].charAt(0) == hex[2].charAt(1) && hex[3].charAt(0) == hex[3].charAt(1) ? hex[0].charAt(0) + hex[1].charAt(0) + hex[2].charAt(0) + hex[3].charAt(0) : hex.join("");
|
|
298
|
-
}
|
|
299
|
-
function rgbaToArgbHex(r, g, b, a) {
|
|
300
|
-
var hex = [pad2(convertDecimalToHex(a)), pad2(Math.round(r).toString(16)), pad2(Math.round(g).toString(16)), pad2(Math.round(b).toString(16))];
|
|
301
|
-
return hex.join("");
|
|
302
|
-
}
|
|
303
|
-
tinycolor.equals = function(color1, color2) {
|
|
304
|
-
return !color1 || !color2 ? !1 : tinycolor(color1).toRgbString() == tinycolor(color2).toRgbString();
|
|
305
|
-
};
|
|
306
|
-
tinycolor.random = function() {
|
|
307
|
-
return tinycolor.fromRatio({
|
|
308
|
-
r: Math.random(),
|
|
309
|
-
g: Math.random(),
|
|
310
|
-
b: Math.random()
|
|
311
|
-
});
|
|
312
|
-
};
|
|
313
|
-
function _desaturate(color2, amount) {
|
|
314
|
-
amount = amount === 0 ? 0 : amount || 10;
|
|
315
|
-
var hsl = tinycolor(color2).toHsl();
|
|
316
|
-
return hsl.s -= amount / 100, hsl.s = clamp01(hsl.s), tinycolor(hsl);
|
|
317
|
-
}
|
|
318
|
-
function _saturate(color2, amount) {
|
|
319
|
-
amount = amount === 0 ? 0 : amount || 10;
|
|
320
|
-
var hsl = tinycolor(color2).toHsl();
|
|
321
|
-
return hsl.s += amount / 100, hsl.s = clamp01(hsl.s), tinycolor(hsl);
|
|
322
|
-
}
|
|
323
|
-
function _greyscale(color2) {
|
|
324
|
-
return tinycolor(color2).desaturate(100);
|
|
325
|
-
}
|
|
326
|
-
function _lighten(color2, amount) {
|
|
327
|
-
amount = amount === 0 ? 0 : amount || 10;
|
|
328
|
-
var hsl = tinycolor(color2).toHsl();
|
|
329
|
-
return hsl.l += amount / 100, hsl.l = clamp01(hsl.l), tinycolor(hsl);
|
|
330
|
-
}
|
|
331
|
-
function _brighten(color2, amount) {
|
|
332
|
-
amount = amount === 0 ? 0 : amount || 10;
|
|
333
|
-
var rgb = tinycolor(color2).toRgb();
|
|
334
|
-
return rgb.r = Math.max(0, Math.min(255, rgb.r - Math.round(255 * -(amount / 100)))), rgb.g = Math.max(0, Math.min(255, rgb.g - Math.round(255 * -(amount / 100)))), rgb.b = Math.max(0, Math.min(255, rgb.b - Math.round(255 * -(amount / 100)))), tinycolor(rgb);
|
|
335
|
-
}
|
|
336
|
-
function _darken(color2, amount) {
|
|
337
|
-
amount = amount === 0 ? 0 : amount || 10;
|
|
338
|
-
var hsl = tinycolor(color2).toHsl();
|
|
339
|
-
return hsl.l -= amount / 100, hsl.l = clamp01(hsl.l), tinycolor(hsl);
|
|
340
|
-
}
|
|
341
|
-
function _spin(color2, amount) {
|
|
342
|
-
var hsl = tinycolor(color2).toHsl(), hue = (hsl.h + amount) % 360;
|
|
343
|
-
return hsl.h = hue < 0 ? 360 + hue : hue, tinycolor(hsl);
|
|
344
|
-
}
|
|
345
|
-
function _complement(color2) {
|
|
346
|
-
var hsl = tinycolor(color2).toHsl();
|
|
347
|
-
return hsl.h = (hsl.h + 180) % 360, tinycolor(hsl);
|
|
348
|
-
}
|
|
349
|
-
function polyad(color2, number) {
|
|
350
|
-
if (isNaN(number) || number <= 0)
|
|
351
|
-
throw new Error("Argument to polyad must be a positive number");
|
|
352
|
-
for (var hsl = tinycolor(color2).toHsl(), result = [tinycolor(color2)], step = 360 / number, i = 1; i < number; i++)
|
|
353
|
-
result.push(tinycolor({
|
|
354
|
-
h: (hsl.h + i * step) % 360,
|
|
355
|
-
s: hsl.s,
|
|
356
|
-
l: hsl.l
|
|
357
|
-
}));
|
|
358
|
-
return result;
|
|
359
|
-
}
|
|
360
|
-
function _splitcomplement(color2) {
|
|
361
|
-
var hsl = tinycolor(color2).toHsl(), h = hsl.h;
|
|
362
|
-
return [tinycolor(color2), tinycolor({
|
|
363
|
-
h: (h + 72) % 360,
|
|
364
|
-
s: hsl.s,
|
|
365
|
-
l: hsl.l
|
|
366
|
-
}), tinycolor({
|
|
367
|
-
h: (h + 216) % 360,
|
|
368
|
-
s: hsl.s,
|
|
369
|
-
l: hsl.l
|
|
370
|
-
})];
|
|
371
|
-
}
|
|
372
|
-
function _analogous(color2, results, slices) {
|
|
373
|
-
results = results || 6, slices = slices || 30;
|
|
374
|
-
var hsl = tinycolor(color2).toHsl(), part = 360 / slices, ret = [tinycolor(color2)];
|
|
375
|
-
for (hsl.h = (hsl.h - (part * results >> 1) + 720) % 360; --results; )
|
|
376
|
-
hsl.h = (hsl.h + part) % 360, ret.push(tinycolor(hsl));
|
|
377
|
-
return ret;
|
|
378
|
-
}
|
|
379
|
-
function _monochromatic(color2, results) {
|
|
380
|
-
results = results || 6;
|
|
381
|
-
for (var hsv = tinycolor(color2).toHsv(), h = hsv.h, s = hsv.s, v = hsv.v, ret = [], modification = 1 / results; results--; )
|
|
382
|
-
ret.push(tinycolor({
|
|
383
|
-
h,
|
|
384
|
-
s,
|
|
385
|
-
v
|
|
386
|
-
})), v = (v + modification) % 1;
|
|
387
|
-
return ret;
|
|
388
|
-
}
|
|
389
|
-
tinycolor.mix = function(color1, color2, amount) {
|
|
390
|
-
amount = amount === 0 ? 0 : amount || 50;
|
|
391
|
-
var rgb1 = tinycolor(color1).toRgb(), rgb2 = tinycolor(color2).toRgb(), p = amount / 100, rgba = {
|
|
392
|
-
r: (rgb2.r - rgb1.r) * p + rgb1.r,
|
|
393
|
-
g: (rgb2.g - rgb1.g) * p + rgb1.g,
|
|
394
|
-
b: (rgb2.b - rgb1.b) * p + rgb1.b,
|
|
395
|
-
a: (rgb2.a - rgb1.a) * p + rgb1.a
|
|
396
|
-
};
|
|
397
|
-
return tinycolor(rgba);
|
|
398
|
-
};
|
|
399
|
-
tinycolor.readability = function(color1, color2) {
|
|
400
|
-
var c1 = tinycolor(color1), c2 = tinycolor(color2);
|
|
401
|
-
return (Math.max(c1.getLuminance(), c2.getLuminance()) + 0.05) / (Math.min(c1.getLuminance(), c2.getLuminance()) + 0.05);
|
|
402
|
-
};
|
|
403
|
-
tinycolor.isReadable = function(color1, color2, wcag2) {
|
|
404
|
-
var readability = tinycolor.readability(color1, color2), wcag2Parms, out;
|
|
405
|
-
switch (out = !1, wcag2Parms = validateWCAG2Parms(wcag2), wcag2Parms.level + wcag2Parms.size) {
|
|
406
|
-
case "AAsmall":
|
|
407
|
-
case "AAAlarge":
|
|
408
|
-
out = readability >= 4.5;
|
|
409
|
-
break;
|
|
410
|
-
case "AAlarge":
|
|
411
|
-
out = readability >= 3;
|
|
412
|
-
break;
|
|
413
|
-
case "AAAsmall":
|
|
414
|
-
out = readability >= 7;
|
|
415
|
-
break;
|
|
416
|
-
}
|
|
417
|
-
return out;
|
|
418
|
-
};
|
|
419
|
-
tinycolor.mostReadable = function(baseColor, colorList, args) {
|
|
420
|
-
var bestColor = null, bestScore = 0, readability, includeFallbackColors, level, size;
|
|
421
|
-
args = args || {}, includeFallbackColors = args.includeFallbackColors, level = args.level, size = args.size;
|
|
422
|
-
for (var i = 0; i < colorList.length; i++)
|
|
423
|
-
readability = tinycolor.readability(baseColor, colorList[i]), readability > bestScore && (bestScore = readability, bestColor = tinycolor(colorList[i]));
|
|
424
|
-
return tinycolor.isReadable(baseColor, bestColor, {
|
|
425
|
-
level,
|
|
426
|
-
size
|
|
427
|
-
}) || !includeFallbackColors ? bestColor : (args.includeFallbackColors = !1, tinycolor.mostReadable(baseColor, ["#fff", "#000"], args));
|
|
428
|
-
};
|
|
429
|
-
var names = tinycolor.names = {
|
|
430
|
-
aliceblue: "f0f8ff",
|
|
431
|
-
antiquewhite: "faebd7",
|
|
432
|
-
aqua: "0ff",
|
|
433
|
-
aquamarine: "7fffd4",
|
|
434
|
-
azure: "f0ffff",
|
|
435
|
-
beige: "f5f5dc",
|
|
436
|
-
bisque: "ffe4c4",
|
|
437
|
-
black: "000",
|
|
438
|
-
blanchedalmond: "ffebcd",
|
|
439
|
-
blue: "00f",
|
|
440
|
-
blueviolet: "8a2be2",
|
|
441
|
-
brown: "a52a2a",
|
|
442
|
-
burlywood: "deb887",
|
|
443
|
-
burntsienna: "ea7e5d",
|
|
444
|
-
cadetblue: "5f9ea0",
|
|
445
|
-
chartreuse: "7fff00",
|
|
446
|
-
chocolate: "d2691e",
|
|
447
|
-
coral: "ff7f50",
|
|
448
|
-
cornflowerblue: "6495ed",
|
|
449
|
-
cornsilk: "fff8dc",
|
|
450
|
-
crimson: "dc143c",
|
|
451
|
-
cyan: "0ff",
|
|
452
|
-
darkblue: "00008b",
|
|
453
|
-
darkcyan: "008b8b",
|
|
454
|
-
darkgoldenrod: "b8860b",
|
|
455
|
-
darkgray: "a9a9a9",
|
|
456
|
-
darkgreen: "006400",
|
|
457
|
-
darkgrey: "a9a9a9",
|
|
458
|
-
darkkhaki: "bdb76b",
|
|
459
|
-
darkmagenta: "8b008b",
|
|
460
|
-
darkolivegreen: "556b2f",
|
|
461
|
-
darkorange: "ff8c00",
|
|
462
|
-
darkorchid: "9932cc",
|
|
463
|
-
darkred: "8b0000",
|
|
464
|
-
darksalmon: "e9967a",
|
|
465
|
-
darkseagreen: "8fbc8f",
|
|
466
|
-
darkslateblue: "483d8b",
|
|
467
|
-
darkslategray: "2f4f4f",
|
|
468
|
-
darkslategrey: "2f4f4f",
|
|
469
|
-
darkturquoise: "00ced1",
|
|
470
|
-
darkviolet: "9400d3",
|
|
471
|
-
deeppink: "ff1493",
|
|
472
|
-
deepskyblue: "00bfff",
|
|
473
|
-
dimgray: "696969",
|
|
474
|
-
dimgrey: "696969",
|
|
475
|
-
dodgerblue: "1e90ff",
|
|
476
|
-
firebrick: "b22222",
|
|
477
|
-
floralwhite: "fffaf0",
|
|
478
|
-
forestgreen: "228b22",
|
|
479
|
-
fuchsia: "f0f",
|
|
480
|
-
gainsboro: "dcdcdc",
|
|
481
|
-
ghostwhite: "f8f8ff",
|
|
482
|
-
gold: "ffd700",
|
|
483
|
-
goldenrod: "daa520",
|
|
484
|
-
gray: "808080",
|
|
485
|
-
green: "008000",
|
|
486
|
-
greenyellow: "adff2f",
|
|
487
|
-
grey: "808080",
|
|
488
|
-
honeydew: "f0fff0",
|
|
489
|
-
hotpink: "ff69b4",
|
|
490
|
-
indianred: "cd5c5c",
|
|
491
|
-
indigo: "4b0082",
|
|
492
|
-
ivory: "fffff0",
|
|
493
|
-
khaki: "f0e68c",
|
|
494
|
-
lavender: "e6e6fa",
|
|
495
|
-
lavenderblush: "fff0f5",
|
|
496
|
-
lawngreen: "7cfc00",
|
|
497
|
-
lemonchiffon: "fffacd",
|
|
498
|
-
lightblue: "add8e6",
|
|
499
|
-
lightcoral: "f08080",
|
|
500
|
-
lightcyan: "e0ffff",
|
|
501
|
-
lightgoldenrodyellow: "fafad2",
|
|
502
|
-
lightgray: "d3d3d3",
|
|
503
|
-
lightgreen: "90ee90",
|
|
504
|
-
lightgrey: "d3d3d3",
|
|
505
|
-
lightpink: "ffb6c1",
|
|
506
|
-
lightsalmon: "ffa07a",
|
|
507
|
-
lightseagreen: "20b2aa",
|
|
508
|
-
lightskyblue: "87cefa",
|
|
509
|
-
lightslategray: "789",
|
|
510
|
-
lightslategrey: "789",
|
|
511
|
-
lightsteelblue: "b0c4de",
|
|
512
|
-
lightyellow: "ffffe0",
|
|
513
|
-
lime: "0f0",
|
|
514
|
-
limegreen: "32cd32",
|
|
515
|
-
linen: "faf0e6",
|
|
516
|
-
magenta: "f0f",
|
|
517
|
-
maroon: "800000",
|
|
518
|
-
mediumaquamarine: "66cdaa",
|
|
519
|
-
mediumblue: "0000cd",
|
|
520
|
-
mediumorchid: "ba55d3",
|
|
521
|
-
mediumpurple: "9370db",
|
|
522
|
-
mediumseagreen: "3cb371",
|
|
523
|
-
mediumslateblue: "7b68ee",
|
|
524
|
-
mediumspringgreen: "00fa9a",
|
|
525
|
-
mediumturquoise: "48d1cc",
|
|
526
|
-
mediumvioletred: "c71585",
|
|
527
|
-
midnightblue: "191970",
|
|
528
|
-
mintcream: "f5fffa",
|
|
529
|
-
mistyrose: "ffe4e1",
|
|
530
|
-
moccasin: "ffe4b5",
|
|
531
|
-
navajowhite: "ffdead",
|
|
532
|
-
navy: "000080",
|
|
533
|
-
oldlace: "fdf5e6",
|
|
534
|
-
olive: "808000",
|
|
535
|
-
olivedrab: "6b8e23",
|
|
536
|
-
orange: "ffa500",
|
|
537
|
-
orangered: "ff4500",
|
|
538
|
-
orchid: "da70d6",
|
|
539
|
-
palegoldenrod: "eee8aa",
|
|
540
|
-
palegreen: "98fb98",
|
|
541
|
-
paleturquoise: "afeeee",
|
|
542
|
-
palevioletred: "db7093",
|
|
543
|
-
papayawhip: "ffefd5",
|
|
544
|
-
peachpuff: "ffdab9",
|
|
545
|
-
peru: "cd853f",
|
|
546
|
-
pink: "ffc0cb",
|
|
547
|
-
plum: "dda0dd",
|
|
548
|
-
powderblue: "b0e0e6",
|
|
549
|
-
purple: "800080",
|
|
550
|
-
rebeccapurple: "663399",
|
|
551
|
-
red: "f00",
|
|
552
|
-
rosybrown: "bc8f8f",
|
|
553
|
-
royalblue: "4169e1",
|
|
554
|
-
saddlebrown: "8b4513",
|
|
555
|
-
salmon: "fa8072",
|
|
556
|
-
sandybrown: "f4a460",
|
|
557
|
-
seagreen: "2e8b57",
|
|
558
|
-
seashell: "fff5ee",
|
|
559
|
-
sienna: "a0522d",
|
|
560
|
-
silver: "c0c0c0",
|
|
561
|
-
skyblue: "87ceeb",
|
|
562
|
-
slateblue: "6a5acd",
|
|
563
|
-
slategray: "708090",
|
|
564
|
-
slategrey: "708090",
|
|
565
|
-
snow: "fffafa",
|
|
566
|
-
springgreen: "00ff7f",
|
|
567
|
-
steelblue: "4682b4",
|
|
568
|
-
tan: "d2b48c",
|
|
569
|
-
teal: "008080",
|
|
570
|
-
thistle: "d8bfd8",
|
|
571
|
-
tomato: "ff6347",
|
|
572
|
-
turquoise: "40e0d0",
|
|
573
|
-
violet: "ee82ee",
|
|
574
|
-
wheat: "f5deb3",
|
|
575
|
-
white: "fff",
|
|
576
|
-
whitesmoke: "f5f5f5",
|
|
577
|
-
yellow: "ff0",
|
|
578
|
-
yellowgreen: "9acd32"
|
|
579
|
-
}, hexNames = tinycolor.hexNames = flip(names);
|
|
580
|
-
function flip(o) {
|
|
581
|
-
var flipped = {};
|
|
582
|
-
for (var i in o)
|
|
583
|
-
o.hasOwnProperty(i) && (flipped[o[i]] = i);
|
|
584
|
-
return flipped;
|
|
585
|
-
}
|
|
586
|
-
function boundAlpha(a) {
|
|
587
|
-
return a = parseFloat(a), (isNaN(a) || a < 0 || a > 1) && (a = 1), a;
|
|
588
|
-
}
|
|
589
|
-
function bound01(n, max) {
|
|
590
|
-
isOnePointZero(n) && (n = "100%");
|
|
591
|
-
var processPercent = isPercentage(n);
|
|
592
|
-
return n = Math.min(max, Math.max(0, parseFloat(n))), processPercent && (n = parseInt(n * max, 10) / 100), Math.abs(n - max) < 1e-6 ? 1 : n % max / parseFloat(max);
|
|
593
|
-
}
|
|
594
|
-
function clamp01(val) {
|
|
595
|
-
return Math.min(1, Math.max(0, val));
|
|
596
|
-
}
|
|
597
|
-
function parseIntFromHex(val) {
|
|
598
|
-
return parseInt(val, 16);
|
|
599
|
-
}
|
|
600
|
-
function isOnePointZero(n) {
|
|
601
|
-
return typeof n == "string" && n.indexOf(".") != -1 && parseFloat(n) === 1;
|
|
602
|
-
}
|
|
603
|
-
function isPercentage(n) {
|
|
604
|
-
return typeof n == "string" && n.indexOf("%") != -1;
|
|
605
|
-
}
|
|
606
|
-
function pad2(c) {
|
|
607
|
-
return c.length == 1 ? "0" + c : "" + c;
|
|
608
|
-
}
|
|
609
|
-
function convertToPercentage(n) {
|
|
610
|
-
return n <= 1 && (n = n * 100 + "%"), n;
|
|
611
|
-
}
|
|
612
|
-
function convertDecimalToHex(d) {
|
|
613
|
-
return Math.round(parseFloat(d) * 255).toString(16);
|
|
614
|
-
}
|
|
615
|
-
function convertHexToDecimal(h) {
|
|
616
|
-
return parseIntFromHex(h) / 255;
|
|
617
|
-
}
|
|
618
|
-
var matchers = function() {
|
|
619
|
-
var CSS_INTEGER = "[-\\+]?\\d+%?", CSS_NUMBER = "[-\\+]?\\d*\\.\\d+%?", CSS_UNIT = "(?:" + CSS_NUMBER + ")|(?:" + CSS_INTEGER + ")", PERMISSIVE_MATCH3 = "[\\s|\\(]+(" + CSS_UNIT + ")[,|\\s]+(" + CSS_UNIT + ")[,|\\s]+(" + CSS_UNIT + ")\\s*\\)?", PERMISSIVE_MATCH4 = "[\\s|\\(]+(" + CSS_UNIT + ")[,|\\s]+(" + CSS_UNIT + ")[,|\\s]+(" + CSS_UNIT + ")[,|\\s]+(" + CSS_UNIT + ")\\s*\\)?";
|
|
620
|
-
return {
|
|
621
|
-
CSS_UNIT: new RegExp(CSS_UNIT),
|
|
622
|
-
rgb: new RegExp("rgb" + PERMISSIVE_MATCH3),
|
|
623
|
-
rgba: new RegExp("rgba" + PERMISSIVE_MATCH4),
|
|
624
|
-
hsl: new RegExp("hsl" + PERMISSIVE_MATCH3),
|
|
625
|
-
hsla: new RegExp("hsla" + PERMISSIVE_MATCH4),
|
|
626
|
-
hsv: new RegExp("hsv" + PERMISSIVE_MATCH3),
|
|
627
|
-
hsva: new RegExp("hsva" + PERMISSIVE_MATCH4),
|
|
628
|
-
hex3: /^#?([0-9a-fA-F]{1})([0-9a-fA-F]{1})([0-9a-fA-F]{1})$/,
|
|
629
|
-
hex6: /^#?([0-9a-fA-F]{2})([0-9a-fA-F]{2})([0-9a-fA-F]{2})$/,
|
|
630
|
-
hex4: /^#?([0-9a-fA-F]{1})([0-9a-fA-F]{1})([0-9a-fA-F]{1})([0-9a-fA-F]{1})$/,
|
|
631
|
-
hex8: /^#?([0-9a-fA-F]{2})([0-9a-fA-F]{2})([0-9a-fA-F]{2})([0-9a-fA-F]{2})$/
|
|
632
|
-
};
|
|
633
|
-
}();
|
|
634
|
-
function isValidCSSUnit(color2) {
|
|
635
|
-
return !!matchers.CSS_UNIT.exec(color2);
|
|
636
|
-
}
|
|
637
|
-
function stringInputToObject(color2) {
|
|
638
|
-
color2 = color2.replace(trimLeft, "").replace(trimRight, "").toLowerCase();
|
|
639
|
-
var named = !1;
|
|
640
|
-
if (names[color2])
|
|
641
|
-
color2 = names[color2], named = !0;
|
|
642
|
-
else if (color2 == "transparent")
|
|
643
|
-
return {
|
|
644
|
-
r: 0,
|
|
645
|
-
g: 0,
|
|
646
|
-
b: 0,
|
|
647
|
-
a: 0,
|
|
648
|
-
format: "name"
|
|
649
|
-
};
|
|
650
|
-
var match;
|
|
651
|
-
return (match = matchers.rgb.exec(color2)) ? {
|
|
652
|
-
r: match[1],
|
|
653
|
-
g: match[2],
|
|
654
|
-
b: match[3]
|
|
655
|
-
} : (match = matchers.rgba.exec(color2)) ? {
|
|
656
|
-
r: match[1],
|
|
657
|
-
g: match[2],
|
|
658
|
-
b: match[3],
|
|
659
|
-
a: match[4]
|
|
660
|
-
} : (match = matchers.hsl.exec(color2)) ? {
|
|
661
|
-
h: match[1],
|
|
662
|
-
s: match[2],
|
|
663
|
-
l: match[3]
|
|
664
|
-
} : (match = matchers.hsla.exec(color2)) ? {
|
|
665
|
-
h: match[1],
|
|
666
|
-
s: match[2],
|
|
667
|
-
l: match[3],
|
|
668
|
-
a: match[4]
|
|
669
|
-
} : (match = matchers.hsv.exec(color2)) ? {
|
|
670
|
-
h: match[1],
|
|
671
|
-
s: match[2],
|
|
672
|
-
v: match[3]
|
|
673
|
-
} : (match = matchers.hsva.exec(color2)) ? {
|
|
674
|
-
h: match[1],
|
|
675
|
-
s: match[2],
|
|
676
|
-
v: match[3],
|
|
677
|
-
a: match[4]
|
|
678
|
-
} : (match = matchers.hex8.exec(color2)) ? {
|
|
679
|
-
r: parseIntFromHex(match[1]),
|
|
680
|
-
g: parseIntFromHex(match[2]),
|
|
681
|
-
b: parseIntFromHex(match[3]),
|
|
682
|
-
a: convertHexToDecimal(match[4]),
|
|
683
|
-
format: named ? "name" : "hex8"
|
|
684
|
-
} : (match = matchers.hex6.exec(color2)) ? {
|
|
685
|
-
r: parseIntFromHex(match[1]),
|
|
686
|
-
g: parseIntFromHex(match[2]),
|
|
687
|
-
b: parseIntFromHex(match[3]),
|
|
688
|
-
format: named ? "name" : "hex"
|
|
689
|
-
} : (match = matchers.hex4.exec(color2)) ? {
|
|
690
|
-
r: parseIntFromHex(match[1] + "" + match[1]),
|
|
691
|
-
g: parseIntFromHex(match[2] + "" + match[2]),
|
|
692
|
-
b: parseIntFromHex(match[3] + "" + match[3]),
|
|
693
|
-
a: convertHexToDecimal(match[4] + "" + match[4]),
|
|
694
|
-
format: named ? "name" : "hex8"
|
|
695
|
-
} : (match = matchers.hex3.exec(color2)) ? {
|
|
696
|
-
r: parseIntFromHex(match[1] + "" + match[1]),
|
|
697
|
-
g: parseIntFromHex(match[2] + "" + match[2]),
|
|
698
|
-
b: parseIntFromHex(match[3] + "" + match[3]),
|
|
699
|
-
format: named ? "name" : "hex"
|
|
700
|
-
} : !1;
|
|
701
|
-
}
|
|
702
|
-
function validateWCAG2Parms(parms) {
|
|
703
|
-
var level, size;
|
|
704
|
-
return parms = parms || {
|
|
705
|
-
level: "AA",
|
|
706
|
-
size: "small"
|
|
707
|
-
}, level = (parms.level || "AA").toUpperCase(), size = (parms.size || "small").toLowerCase(), level !== "AA" && level !== "AAA" && (level = "AA"), size !== "small" && size !== "large" && (size = "small"), {
|
|
708
|
-
level,
|
|
709
|
-
size
|
|
710
|
-
};
|
|
711
|
-
}
|
|
712
|
-
const ColorListWrap = styledComponents.styled(ui.Flex)`
|
|
713
|
-
gap: 0.25em;
|
|
714
|
-
`, ColorBoxContainer = styledComponents.styled.div`
|
|
715
|
-
width: 2.1em;
|
|
716
|
-
height: 2.1em;
|
|
717
|
-
cursor: pointer;
|
|
718
|
-
position: relative;
|
|
719
|
-
overflow: hidden;
|
|
720
|
-
border-radius: 3px;
|
|
721
|
-
background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAAXNSR0IArs4c6QAAADFJREFUOE9jZGBgEGHAD97gk2YcNYBhmIQBgWSAP52AwoAQwJvQRg1gACckQoC2gQgAIF8IscwEtKYAAAAASUVORK5CYII=')
|
|
722
|
-
left center #fff;
|
|
723
|
-
`, ColorBox$1 = styledComponents.styled.div`
|
|
724
|
-
border-radius: inherit;
|
|
725
|
-
box-shadow: inset 0 0 0 1px var(--card-shadow-outline-color);
|
|
726
|
-
content: '';
|
|
727
|
-
position: absolute;
|
|
728
|
-
inset: 0;
|
|
729
|
-
z-index: 1;
|
|
730
|
-
`, validateColors = (colors) => colors.reduce((cls, c) => {
|
|
731
|
-
const color2 = c.hex ? tinycolor(c.hex) : tinycolor(c);
|
|
732
|
-
return color2.isValid() && cls.push({
|
|
733
|
-
color: c,
|
|
734
|
-
backgroundColor: color2.toRgbString()
|
|
735
|
-
}), cls;
|
|
736
|
-
}, []), ColorList = react.memo(function({ colors, onChange }) {
|
|
737
|
-
return colors ? /* @__PURE__ */ jsxRuntime.jsx(ColorListWrap, { wrap: "wrap", children: validateColors(colors).map(({ color: color2, backgroundColor }, idx) => /* @__PURE__ */ jsxRuntime.jsx(
|
|
738
|
-
ColorBoxContainer,
|
|
739
|
-
{
|
|
740
|
-
onClick: () => {
|
|
741
|
-
onChange(color2);
|
|
742
|
-
},
|
|
743
|
-
children: /* @__PURE__ */ jsxRuntime.jsx(ColorBox$1, { style: { background: backgroundColor } })
|
|
744
|
-
},
|
|
745
|
-
`${backgroundColor}-${idx}`
|
|
746
|
-
)) }) : null;
|
|
747
|
-
}), ColorPickerFields = ({
|
|
748
|
-
onChange,
|
|
749
|
-
rgb,
|
|
750
|
-
hsl,
|
|
751
|
-
hex,
|
|
752
|
-
disableAlpha
|
|
753
|
-
}) => {
|
|
754
|
-
const { sanity: sanity2 } = ui.useTheme(), inputStyles = react.useMemo(
|
|
755
|
-
() => ({
|
|
756
|
-
input: {
|
|
757
|
-
width: "80%",
|
|
758
|
-
padding: "4px 10% 3px",
|
|
759
|
-
border: "none",
|
|
760
|
-
boxShadow: `inset 0 0 0 1px ${sanity2.color.input.default.enabled.border}`,
|
|
761
|
-
color: sanity2.color.input.default.enabled.fg,
|
|
762
|
-
backgroundColor: sanity2.color.input.default.enabled.bg,
|
|
763
|
-
fontSize: sanity2.fonts.text.sizes[0].fontSize,
|
|
764
|
-
textAlign: "center"
|
|
765
|
-
},
|
|
766
|
-
label: {
|
|
767
|
-
display: "block",
|
|
768
|
-
textAlign: "center",
|
|
769
|
-
fontSize: sanity2.fonts.label.sizes[0].fontSize,
|
|
770
|
-
color: sanity2.color.base.fg,
|
|
771
|
-
paddingTop: "3px",
|
|
772
|
-
paddingBottom: "4px",
|
|
773
|
-
textTransform: "capitalize"
|
|
774
|
-
}
|
|
775
|
-
}),
|
|
776
|
-
[sanity2]
|
|
777
|
-
), handleChange = react.useCallback(
|
|
778
|
-
(data) => {
|
|
779
|
-
if ("hex" in data && data.hex && color$1.isValidHex(data.hex))
|
|
780
|
-
onChange({
|
|
781
|
-
hex: data.hex,
|
|
782
|
-
source: "hex"
|
|
783
|
-
});
|
|
784
|
-
else if (rgb && ("r" in data && data.r || "g" in data && data.g || "b" in data && data.b))
|
|
785
|
-
onChange({
|
|
786
|
-
r: Number(data.r) || rgb.r,
|
|
787
|
-
g: Number(data.g) || rgb.g,
|
|
788
|
-
b: Number(data.b) || rgb.b,
|
|
789
|
-
a: rgb.a,
|
|
790
|
-
source: "rgb"
|
|
791
|
-
});
|
|
792
|
-
else if (hsl && "a" in data && data.a) {
|
|
793
|
-
let alpha = Number(data.a);
|
|
794
|
-
alpha < 0 ? alpha = 0 : alpha > 100 && (alpha = 100), alpha /= 100, onChange({
|
|
795
|
-
h: hsl.h,
|
|
796
|
-
s: hsl.s,
|
|
797
|
-
l: hsl.l,
|
|
798
|
-
a: alpha,
|
|
799
|
-
source: "hsl"
|
|
800
|
-
});
|
|
801
|
-
}
|
|
802
|
-
},
|
|
803
|
-
[onChange, hsl, rgb]
|
|
804
|
-
);
|
|
805
|
-
return /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, { children: [
|
|
806
|
-
/* @__PURE__ */ jsxRuntime.jsx(ui.Box, { flex: 2, marginRight: 1, children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
807
|
-
common.EditableInput,
|
|
808
|
-
{
|
|
809
|
-
style: inputStyles,
|
|
810
|
-
label: "hex",
|
|
811
|
-
value: hex?.replace("#", ""),
|
|
812
|
-
onChange: handleChange
|
|
813
|
-
}
|
|
814
|
-
) }),
|
|
815
|
-
/* @__PURE__ */ jsxRuntime.jsx(ui.Box, { flex: 1, marginRight: 1, children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
816
|
-
common.EditableInput,
|
|
817
|
-
{
|
|
818
|
-
style: inputStyles,
|
|
819
|
-
label: "r",
|
|
820
|
-
value: rgb?.r,
|
|
821
|
-
onChange: handleChange,
|
|
822
|
-
dragLabel: !0,
|
|
823
|
-
dragMax: 255
|
|
824
|
-
}
|
|
825
|
-
) }),
|
|
826
|
-
/* @__PURE__ */ jsxRuntime.jsx(ui.Box, { flex: 1, marginRight: 1, children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
827
|
-
common.EditableInput,
|
|
828
|
-
{
|
|
829
|
-
style: inputStyles,
|
|
830
|
-
label: "g",
|
|
831
|
-
value: rgb?.g,
|
|
832
|
-
onChange: handleChange,
|
|
833
|
-
dragLabel: !0,
|
|
834
|
-
dragMax: 255
|
|
835
|
-
}
|
|
836
|
-
) }),
|
|
837
|
-
/* @__PURE__ */ jsxRuntime.jsx(ui.Box, { flex: 1, marginRight: 1, children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
838
|
-
common.EditableInput,
|
|
839
|
-
{
|
|
840
|
-
style: inputStyles,
|
|
841
|
-
label: "b",
|
|
842
|
-
value: rgb?.b,
|
|
843
|
-
onChange: handleChange,
|
|
844
|
-
dragLabel: !0,
|
|
845
|
-
dragMax: 255
|
|
846
|
-
}
|
|
847
|
-
) }),
|
|
848
|
-
!disableAlpha && /* @__PURE__ */ jsxRuntime.jsx(ui.Box, { flex: 1, children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
849
|
-
common.EditableInput,
|
|
850
|
-
{
|
|
851
|
-
style: inputStyles,
|
|
852
|
-
label: "a",
|
|
853
|
-
value: Math.round((rgb?.a ?? 1) * 100),
|
|
854
|
-
onChange: handleChange,
|
|
855
|
-
dragLabel: !0,
|
|
856
|
-
dragMax: 100
|
|
857
|
-
}
|
|
858
|
-
) })
|
|
859
|
-
] });
|
|
860
|
-
}, ColorBox = styledComponents.styled(ui.Box)`
|
|
861
|
-
position: absolute;
|
|
862
|
-
top: 0;
|
|
863
|
-
left: 0;
|
|
864
|
-
width: 100%;
|
|
865
|
-
height: 100%;
|
|
866
|
-
`, ReadOnlyContainer = styledComponents.styled(ui.Flex)`
|
|
867
|
-
margin-top: 6rem;
|
|
868
|
-
background-color: var(--card-bg-color);
|
|
869
|
-
position: relative;
|
|
870
|
-
width: 100%;
|
|
871
|
-
`, ColorPickerInner = (props) => {
|
|
872
|
-
const {
|
|
873
|
-
width,
|
|
874
|
-
color: { rgb, hex, hsv, hsl },
|
|
875
|
-
onChange,
|
|
876
|
-
onUnset,
|
|
877
|
-
disableAlpha,
|
|
878
|
-
colorList,
|
|
879
|
-
readOnly
|
|
880
|
-
} = props;
|
|
881
|
-
return !hsl || !hsv ? null : /* @__PURE__ */ jsxRuntime.jsx("div", { style: { width }, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Card, { padding: 1, border: !0, radius: 1, children: /* @__PURE__ */ jsxRuntime.jsxs(ui.Stack, { space: 2, children: [
|
|
882
|
-
!readOnly && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
|
|
883
|
-
/* @__PURE__ */ jsxRuntime.jsx(ui.Card, { overflow: "hidden", style: { position: "relative", height: "5em" }, children: /* @__PURE__ */ jsxRuntime.jsx(common.Saturation, { onChange, hsl, hsv }) }),
|
|
884
|
-
/* @__PURE__ */ jsxRuntime.jsx(
|
|
885
|
-
ui.Card,
|
|
886
|
-
{
|
|
887
|
-
shadow: 1,
|
|
888
|
-
radius: 3,
|
|
889
|
-
overflow: "hidden",
|
|
890
|
-
style: { position: "relative", height: "10px" },
|
|
891
|
-
children: /* @__PURE__ */ jsxRuntime.jsx(common.Hue, { hsl, onChange: !readOnly && onChange })
|
|
892
|
-
}
|
|
893
|
-
),
|
|
894
|
-
!disableAlpha && /* @__PURE__ */ jsxRuntime.jsx(
|
|
895
|
-
ui.Card,
|
|
896
|
-
{
|
|
897
|
-
shadow: 1,
|
|
898
|
-
radius: 3,
|
|
899
|
-
overflow: "hidden",
|
|
900
|
-
style: { position: "relative", height: "10px", background: "#fff" },
|
|
901
|
-
children: /* @__PURE__ */ jsxRuntime.jsx(common.Alpha, { rgb, hsl, onChange })
|
|
902
|
-
}
|
|
903
|
-
)
|
|
904
|
-
] }),
|
|
905
|
-
/* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, { children: [
|
|
906
|
-
/* @__PURE__ */ jsxRuntime.jsxs(
|
|
907
|
-
ui.Card,
|
|
908
|
-
{
|
|
909
|
-
flex: 1,
|
|
910
|
-
radius: 2,
|
|
911
|
-
overflow: "hidden",
|
|
912
|
-
style: { position: "relative", minWidth: "4em", background: "#fff" },
|
|
913
|
-
children: [
|
|
914
|
-
/* @__PURE__ */ jsxRuntime.jsx(common.Checkboard, {}),
|
|
915
|
-
/* @__PURE__ */ jsxRuntime.jsx(
|
|
916
|
-
ColorBox,
|
|
917
|
-
{
|
|
918
|
-
style: {
|
|
919
|
-
backgroundColor: `rgba(${rgb?.r},${rgb?.g},${rgb?.b},${rgb?.a})`
|
|
920
|
-
}
|
|
921
|
-
}
|
|
922
|
-
),
|
|
923
|
-
readOnly && /* @__PURE__ */ jsxRuntime.jsx(
|
|
924
|
-
ReadOnlyContainer,
|
|
925
|
-
{
|
|
926
|
-
padding: 2,
|
|
927
|
-
paddingBottom: 1,
|
|
928
|
-
sizing: "border",
|
|
929
|
-
justify: "space-between",
|
|
930
|
-
children: /* @__PURE__ */ jsxRuntime.jsxs(ui.Stack, { space: 3, marginTop: 1, children: [
|
|
931
|
-
/* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: 3, weight: "bold", children: hex }),
|
|
932
|
-
/* @__PURE__ */ jsxRuntime.jsxs(ui.Inline, { space: 3, children: [
|
|
933
|
-
/* @__PURE__ */ jsxRuntime.jsxs(ui.Text, { size: 1, children: [
|
|
934
|
-
/* @__PURE__ */ jsxRuntime.jsx("strong", { children: "RGB: " }),
|
|
935
|
-
rgb?.r,
|
|
936
|
-
" ",
|
|
937
|
-
rgb?.g,
|
|
938
|
-
" ",
|
|
939
|
-
rgb?.b
|
|
940
|
-
] }),
|
|
941
|
-
/* @__PURE__ */ jsxRuntime.jsxs(ui.Text, { size: 1, children: [
|
|
942
|
-
/* @__PURE__ */ jsxRuntime.jsx("strong", { children: "HSL: " }),
|
|
943
|
-
" ",
|
|
944
|
-
Math.round(hsl?.h ?? 0),
|
|
945
|
-
" ",
|
|
946
|
-
Math.round((hsl?.s ?? 0) * 100),
|
|
947
|
-
"% ",
|
|
948
|
-
Math.round((hsl?.l ?? 0) * 100),
|
|
949
|
-
"%"
|
|
950
|
-
] })
|
|
951
|
-
] })
|
|
952
|
-
] })
|
|
953
|
-
}
|
|
954
|
-
)
|
|
955
|
-
]
|
|
956
|
-
}
|
|
957
|
-
),
|
|
958
|
-
!readOnly && /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, { align: "flex-start", marginLeft: 2, children: [
|
|
959
|
-
/* @__PURE__ */ jsxRuntime.jsx(ui.Box, { style: { width: 200 }, children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
960
|
-
ColorPickerFields,
|
|
961
|
-
{
|
|
962
|
-
rgb,
|
|
963
|
-
hsl,
|
|
964
|
-
hex,
|
|
965
|
-
onChange,
|
|
966
|
-
disableAlpha
|
|
967
|
-
}
|
|
968
|
-
) }),
|
|
969
|
-
/* @__PURE__ */ jsxRuntime.jsx(ui.Box, { marginLeft: 2, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { onClick: onUnset, title: "Delete color", icon: icons.TrashIcon, tone: "critical" }) })
|
|
970
|
-
] })
|
|
971
|
-
] }),
|
|
972
|
-
colorList && /* @__PURE__ */ jsxRuntime.jsx(ColorList, { colors: colorList, onChange })
|
|
973
|
-
] }) }) });
|
|
974
|
-
}, ColorPicker = reactColor.CustomPicker(ColorPickerInner), DEFAULT_COLOR = {
|
|
975
|
-
hex: "#24a3e3",
|
|
976
|
-
hsl: { h: 200, s: 0.7732, l: 0.5156, a: 1 },
|
|
977
|
-
hsv: { h: 200, s: 0.8414, v: 0.8901, a: 1 },
|
|
978
|
-
rgb: { r: 46, g: 163, b: 227, a: 1 },
|
|
979
|
-
source: "hex"
|
|
980
|
-
};
|
|
981
|
-
function ColorInput(props) {
|
|
982
|
-
const { onChange, readOnly } = props, value = props.value, type = props.schemaType, focusRef = react.useRef(null), [color2, setColor] = react.useState(value);
|
|
983
|
-
react.useEffect(() => react.startTransition(() => setColor(value)), [value]);
|
|
984
|
-
const [emitColor, setEmitColor] = react.useState(void 0), debouncedColor = react.useDeferredValue(emitColor), handleChange = useEffectEvent.useEffectEvent((nextColor) => {
|
|
985
|
-
const fieldPatches = type.fields.filter((field) => field.name in nextColor).map((field) => {
|
|
986
|
-
const nextFieldValue = nextColor[field.name], isObject = field.type.jsonType === "object";
|
|
987
|
-
return sanity.set(
|
|
988
|
-
isObject ? Object.assign({ _type: field.type.name }, nextFieldValue) : nextFieldValue,
|
|
989
|
-
[field.name]
|
|
990
|
-
);
|
|
991
|
-
});
|
|
992
|
-
onChange([
|
|
993
|
-
sanity.setIfMissing({ _type: type.name }),
|
|
994
|
-
sanity.set(type.name, ["_type"]),
|
|
995
|
-
sanity.set(nextColor.rgb?.a, ["alpha"]),
|
|
996
|
-
...fieldPatches
|
|
997
|
-
]);
|
|
998
|
-
});
|
|
999
|
-
react.useEffect(() => {
|
|
1000
|
-
if (!debouncedColor) return;
|
|
1001
|
-
const raf = requestAnimationFrame(() => handleChange(debouncedColor));
|
|
1002
|
-
return () => cancelAnimationFrame(raf);
|
|
1003
|
-
}, [debouncedColor, handleChange]);
|
|
1004
|
-
const handleCreateColor = react.useCallback(() => {
|
|
1005
|
-
setColor(DEFAULT_COLOR), setEmitColor(DEFAULT_COLOR);
|
|
1006
|
-
}, []), handleColorChange = react.useCallback((nextColor) => {
|
|
1007
|
-
setColor(nextColor), setEmitColor(nextColor);
|
|
1008
|
-
}, []), handleUnset = react.useCallback(() => {
|
|
1009
|
-
setColor(void 0), onChange(sanity.unset());
|
|
1010
|
-
}, [onChange]);
|
|
1011
|
-
return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: value && value.hex ? /* @__PURE__ */ jsxRuntime.jsx(
|
|
1012
|
-
ColorPicker,
|
|
1013
|
-
{
|
|
1014
|
-
color: color2,
|
|
1015
|
-
onChange: handleColorChange,
|
|
1016
|
-
readOnly: readOnly || typeof type.readOnly == "boolean" && type.readOnly,
|
|
1017
|
-
disableAlpha: !!type.options?.disableAlpha,
|
|
1018
|
-
colorList: type.options?.colorList,
|
|
1019
|
-
onUnset: handleUnset
|
|
1020
|
-
}
|
|
1021
|
-
) : /* @__PURE__ */ jsxRuntime.jsx(
|
|
1022
|
-
ui.Button,
|
|
1023
|
-
{
|
|
1024
|
-
icon: icons.AddIcon,
|
|
1025
|
-
mode: "ghost",
|
|
1026
|
-
text: "Create color",
|
|
1027
|
-
ref: focusRef,
|
|
1028
|
-
disabled: !!readOnly,
|
|
1029
|
-
onClick: handleCreateColor
|
|
1030
|
-
}
|
|
1031
|
-
) });
|
|
1032
|
-
}
|
|
1033
|
-
const round = (val = 1) => Math.round(val * 100), colorTypeName = "color", color = sanity.defineType({
|
|
3
|
+
var sanity = require("sanity"), jsxRuntime = require("react/jsx-runtime"), react = require("react");
|
|
4
|
+
const ColorInput = react.lazy(() => Promise.resolve().then(function() {
|
|
5
|
+
return require("./_chunks-cjs/ColorInput.js");
|
|
6
|
+
})), round = (val = 1) => Math.round(val * 100), colorTypeName = "color", color = sanity.defineType({
|
|
1034
7
|
name: colorTypeName,
|
|
1035
8
|
type: "object",
|
|
1036
9
|
title: "Color",
|