@sanity/color-input
Version:
1,042 lines (1,041 loc) • 37.6 kB
JavaScript
"use strict";
var jsxRuntime = require("react/jsx-runtime"), icons = require("@sanity/icons"), ui = require("@sanity/ui"), react = require("react"), sanity = require("sanity"), useEffectEvent = require("use-effect-event"), reactColor = require("react-color"), common = require("react-color/lib/components/common"), styledComponents = require("styled-components"), color = require("react-color/lib/helpers/color");
function _typeof(obj) {
"@babel/helpers - typeof";
return _typeof = typeof Symbol == "function" && typeof Symbol.iterator == "symbol" ? function(obj2) {
return typeof obj2;
} : function(obj2) {
return obj2 && typeof Symbol == "function" && obj2.constructor === Symbol && obj2 !== Symbol.prototype ? "symbol" : typeof obj2;
}, _typeof(obj);
}
var trimLeft = /^\s+/, trimRight = /\s+$/;
function tinycolor(color2, opts) {
if (color2 = color2 || "", opts = opts || {}, color2 instanceof tinycolor)
return color2;
if (!(this instanceof tinycolor))
return new tinycolor(color2, opts);
var rgb = inputToRGB(color2);
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;
}
tinycolor.prototype = {
isDark: function() {
return this.getBrightness() < 128;
},
isLight: function() {
return !this.isDark();
},
isValid: function() {
return this._ok;
},
getOriginalInput: function() {
return this._originalInput;
},
getFormat: function() {
return this._format;
},
getAlpha: function() {
return this._a;
},
getBrightness: function() {
var rgb = this.toRgb();
return (rgb.r * 299 + rgb.g * 587 + rgb.b * 114) / 1e3;
},
getLuminance: function() {
var rgb = this.toRgb(), RsRGB, GsRGB, BsRGB, R, G, B;
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;
},
setAlpha: function(value) {
return this._a = boundAlpha(value), this._roundA = Math.round(100 * this._a) / 100, this;
},
toHsv: function() {
var hsv = rgbToHsv(this._r, this._g, this._b);
return {
h: hsv.h * 360,
s: hsv.s,
v: hsv.v,
a: this._a
};
},
toHsvString: function() {
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);
return this._a == 1 ? "hsv(" + h + ", " + s + "%, " + v + "%)" : "hsva(" + h + ", " + s + "%, " + v + "%, " + this._roundA + ")";
},
toHsl: function() {
var hsl = rgbToHsl(this._r, this._g, this._b);
return {
h: hsl.h * 360,
s: hsl.s,
l: hsl.l,
a: this._a
};
},
toHslString: function() {
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);
return this._a == 1 ? "hsl(" + h + ", " + s + "%, " + l + "%)" : "hsla(" + h + ", " + s + "%, " + l + "%, " + this._roundA + ")";
},
toHex: function(allow3Char) {
return rgbToHex(this._r, this._g, this._b, allow3Char);
},
toHexString: function(allow3Char) {
return "#" + this.toHex(allow3Char);
},
toHex8: function(allow4Char) {
return rgbaToHex(this._r, this._g, this._b, this._a, allow4Char);
},
toHex8String: function(allow4Char) {
return "#" + this.toHex8(allow4Char);
},
toRgb: function() {
return {
r: Math.round(this._r),
g: Math.round(this._g),
b: Math.round(this._b),
a: this._a
};
},
toRgbString: function() {
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 + ")";
},
toPercentageRgb: function() {
return {
r: Math.round(bound01(this._r, 255) * 100) + "%",
g: Math.round(bound01(this._g, 255) * 100) + "%",
b: Math.round(bound01(this._b, 255) * 100) + "%",
a: this._a
};
},
toPercentageRgbString: function() {
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 + ")";
},
toName: function() {
return this._a === 0 ? "transparent" : this._a < 1 ? !1 : hexNames[rgbToHex(this._r, this._g, this._b, !0)] || !1;
},
toFilter: function(secondColor) {
var hex8String = "#" + rgbaToArgbHex(this._r, this._g, this._b, this._a), secondHex8String = hex8String, gradientType = this._gradientType ? "GradientType = 1, " : "";
if (secondColor) {
var s = tinycolor(secondColor);
secondHex8String = "#" + rgbaToArgbHex(s._r, s._g, s._b, s._a);
}
return "progid:DXImageTransform.Microsoft.gradient(" + gradientType + "startColorstr=" + hex8String + ",endColorstr=" + secondHex8String + ")";
},
toString: function(format) {
var formatSet = !!format;
format = format || this._format;
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");
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());
},
clone: function() {
return tinycolor(this.toString());
},
_applyModification: function(fn, args) {
var color2 = fn.apply(null, [this].concat([].slice.call(args)));
return this._r = color2._r, this._g = color2._g, this._b = color2._b, this.setAlpha(color2._a), this;
},
lighten: function() {
return this._applyModification(_lighten, arguments);
},
brighten: function() {
return this._applyModification(_brighten, arguments);
},
darken: function() {
return this._applyModification(_darken, arguments);
},
desaturate: function() {
return this._applyModification(_desaturate, arguments);
},
saturate: function() {
return this._applyModification(_saturate, arguments);
},
greyscale: function() {
return this._applyModification(_greyscale, arguments);
},
spin: function() {
return this._applyModification(_spin, arguments);
},
_applyCombination: function(fn, args) {
return fn.apply(null, [this].concat([].slice.call(args)));
},
analogous: function() {
return this._applyCombination(_analogous, arguments);
},
complement: function() {
return this._applyCombination(_complement, arguments);
},
monochromatic: function() {
return this._applyCombination(_monochromatic, arguments);
},
splitcomplement: function() {
return this._applyCombination(_splitcomplement, arguments);
},
// Disabled until https://github.com/bgrins/TinyColor/issues/254
// polyad: function (number) {
// return this._applyCombination(polyad, [number]);
// },
triad: function() {
return this._applyCombination(polyad, [3]);
},
tetrad: function() {
return this._applyCombination(polyad, [4]);
}
};
tinycolor.fromRatio = function(color2, opts) {
if (_typeof(color2) == "object") {
var newColor = {};
for (var i in color2)
color2.hasOwnProperty(i) && (i === "a" ? newColor[i] = color2[i] : newColor[i] = convertToPercentage(color2[i]));
color2 = newColor;
}
return tinycolor(color2, opts);
};
function inputToRGB(color2) {
var rgb = {
r: 0,
g: 0,
b: 0
}, a = 1, s = null, v = null, l = null, ok = !1, format = !1;
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), {
ok,
format: color2.format || format,
r: Math.min(255, Math.max(rgb.r, 0)),
g: Math.min(255, Math.max(rgb.g, 0)),
b: Math.min(255, Math.max(rgb.b, 0)),
a
};
}
function rgbToRgb(r, g, b) {
return {
r: bound01(r, 255) * 255,
g: bound01(g, 255) * 255,
b: bound01(b, 255) * 255
};
}
function rgbToHsl(r, g, b) {
r = bound01(r, 255), g = bound01(g, 255), b = bound01(b, 255);
var max = Math.max(r, g, b), min = Math.min(r, g, b), h, s, l = (max + min) / 2;
if (max == min)
h = s = 0;
else {
var d = max - min;
switch (s = l > 0.5 ? d / (2 - max - min) : d / (max + min), max) {
case r:
h = (g - b) / d + (g < b ? 6 : 0);
break;
case g:
h = (b - r) / d + 2;
break;
case b:
h = (r - g) / d + 4;
break;
}
h /= 6;
}
return {
h,
s,
l
};
}
function hslToRgb(h, s, l) {
var r, g, b;
h = bound01(h, 360), s = bound01(s, 100), l = bound01(l, 100);
function hue2rgb(p2, q2, t) {
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;
}
if (s === 0)
r = g = b = l;
else {
var q = l < 0.5 ? l * (1 + s) : l + s - l * s, p = 2 * l - q;
r = hue2rgb(p, q, h + 1 / 3), g = hue2rgb(p, q, h), b = hue2rgb(p, q, h - 1 / 3);
}
return {
r: r * 255,
g: g * 255,
b: b * 255
};
}
function rgbToHsv(r, g, b) {
r = bound01(r, 255), g = bound01(g, 255), b = bound01(b, 255);
var max = Math.max(r, g, b), min = Math.min(r, g, b), h, s, v = max, d = max - min;
if (s = max === 0 ? 0 : d / max, max == min)
h = 0;
else {
switch (max) {
case r:
h = (g - b) / d + (g < b ? 6 : 0);
break;
case g:
h = (b - r) / d + 2;
break;
case b:
h = (r - g) / d + 4;
break;
}
h /= 6;
}
return {
h,
s,
v
};
}
function hsvToRgb(h, s, v) {
h = bound01(h, 360) * 6, s = bound01(s, 100), v = bound01(v, 100);
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];
return {
r: r * 255,
g: g * 255,
b: b * 255
};
}
function rgbToHex(r, g, b, allow3Char) {
var hex = [pad2(Math.round(r).toString(16)), pad2(Math.round(g).toString(16)), pad2(Math.round(b).toString(16))];
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("");
}
function rgbaToHex(r, g, b, a, allow4Char) {
var hex = [pad2(Math.round(r).toString(16)), pad2(Math.round(g).toString(16)), pad2(Math.round(b).toString(16)), pad2(convertDecimalToHex(a))];
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("");
}
function rgbaToArgbHex(r, g, b, a) {
var hex = [pad2(convertDecimalToHex(a)), pad2(Math.round(r).toString(16)), pad2(Math.round(g).toString(16)), pad2(Math.round(b).toString(16))];
return hex.join("");
}
tinycolor.equals = function(color1, color2) {
return !color1 || !color2 ? !1 : tinycolor(color1).toRgbString() == tinycolor(color2).toRgbString();
};
tinycolor.random = function() {
return tinycolor.fromRatio({
r: Math.random(),
g: Math.random(),
b: Math.random()
});
};
function _desaturate(color2, amount) {
amount = amount === 0 ? 0 : amount || 10;
var hsl = tinycolor(color2).toHsl();
return hsl.s -= amount / 100, hsl.s = clamp01(hsl.s), tinycolor(hsl);
}
function _saturate(color2, amount) {
amount = amount === 0 ? 0 : amount || 10;
var hsl = tinycolor(color2).toHsl();
return hsl.s += amount / 100, hsl.s = clamp01(hsl.s), tinycolor(hsl);
}
function _greyscale(color2) {
return tinycolor(color2).desaturate(100);
}
function _lighten(color2, amount) {
amount = amount === 0 ? 0 : amount || 10;
var hsl = tinycolor(color2).toHsl();
return hsl.l += amount / 100, hsl.l = clamp01(hsl.l), tinycolor(hsl);
}
function _brighten(color2, amount) {
amount = amount === 0 ? 0 : amount || 10;
var rgb = tinycolor(color2).toRgb();
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);
}
function _darken(color2, amount) {
amount = amount === 0 ? 0 : amount || 10;
var hsl = tinycolor(color2).toHsl();
return hsl.l -= amount / 100, hsl.l = clamp01(hsl.l), tinycolor(hsl);
}
function _spin(color2, amount) {
var hsl = tinycolor(color2).toHsl(), hue = (hsl.h + amount) % 360;
return hsl.h = hue < 0 ? 360 + hue : hue, tinycolor(hsl);
}
function _complement(color2) {
var hsl = tinycolor(color2).toHsl();
return hsl.h = (hsl.h + 180) % 360, tinycolor(hsl);
}
function polyad(color2, number) {
if (isNaN(number) || number <= 0)
throw new Error("Argument to polyad must be a positive number");
for (var hsl = tinycolor(color2).toHsl(), result = [tinycolor(color2)], step = 360 / number, i = 1; i < number; i++)
result.push(tinycolor({
h: (hsl.h + i * step) % 360,
s: hsl.s,
l: hsl.l
}));
return result;
}
function _splitcomplement(color2) {
var hsl = tinycolor(color2).toHsl(), h = hsl.h;
return [tinycolor(color2), tinycolor({
h: (h + 72) % 360,
s: hsl.s,
l: hsl.l
}), tinycolor({
h: (h + 216) % 360,
s: hsl.s,
l: hsl.l
})];
}
function _analogous(color2, results, slices) {
results = results || 6, slices = slices || 30;
var hsl = tinycolor(color2).toHsl(), part = 360 / slices, ret = [tinycolor(color2)];
for (hsl.h = (hsl.h - (part * results >> 1) + 720) % 360; --results; )
hsl.h = (hsl.h + part) % 360, ret.push(tinycolor(hsl));
return ret;
}
function _monochromatic(color2, results) {
results = results || 6;
for (var hsv = tinycolor(color2).toHsv(), h = hsv.h, s = hsv.s, v = hsv.v, ret = [], modification = 1 / results; results--; )
ret.push(tinycolor({
h,
s,
v
})), v = (v + modification) % 1;
return ret;
}
tinycolor.mix = function(color1, color2, amount) {
amount = amount === 0 ? 0 : amount || 50;
var rgb1 = tinycolor(color1).toRgb(), rgb2 = tinycolor(color2).toRgb(), p = amount / 100, rgba = {
r: (rgb2.r - rgb1.r) * p + rgb1.r,
g: (rgb2.g - rgb1.g) * p + rgb1.g,
b: (rgb2.b - rgb1.b) * p + rgb1.b,
a: (rgb2.a - rgb1.a) * p + rgb1.a
};
return tinycolor(rgba);
};
tinycolor.readability = function(color1, color2) {
var c1 = tinycolor(color1), c2 = tinycolor(color2);
return (Math.max(c1.getLuminance(), c2.getLuminance()) + 0.05) / (Math.min(c1.getLuminance(), c2.getLuminance()) + 0.05);
};
tinycolor.isReadable = function(color1, color2, wcag2) {
var readability = tinycolor.readability(color1, color2), wcag2Parms, out;
switch (out = !1, wcag2Parms = validateWCAG2Parms(wcag2), wcag2Parms.level + wcag2Parms.size) {
case "AAsmall":
case "AAAlarge":
out = readability >= 4.5;
break;
case "AAlarge":
out = readability >= 3;
break;
case "AAAsmall":
out = readability >= 7;
break;
}
return out;
};
tinycolor.mostReadable = function(baseColor, colorList, args) {
var bestColor = null, bestScore = 0, readability, includeFallbackColors, level, size;
args = args || {}, includeFallbackColors = args.includeFallbackColors, level = args.level, size = args.size;
for (var i = 0; i < colorList.length; i++)
readability = tinycolor.readability(baseColor, colorList[i]), readability > bestScore && (bestScore = readability, bestColor = tinycolor(colorList[i]));
return tinycolor.isReadable(baseColor, bestColor, {
level,
size
}) || !includeFallbackColors ? bestColor : (args.includeFallbackColors = !1, tinycolor.mostReadable(baseColor, ["#fff", "#000"], args));
};
var names = tinycolor.names = {
aliceblue: "f0f8ff",
antiquewhite: "faebd7",
aqua: "0ff",
aquamarine: "7fffd4",
azure: "f0ffff",
beige: "f5f5dc",
bisque: "ffe4c4",
black: "000",
blanchedalmond: "ffebcd",
blue: "00f",
blueviolet: "8a2be2",
brown: "a52a2a",
burlywood: "deb887",
burntsienna: "ea7e5d",
cadetblue: "5f9ea0",
chartreuse: "7fff00",
chocolate: "d2691e",
coral: "ff7f50",
cornflowerblue: "6495ed",
cornsilk: "fff8dc",
crimson: "dc143c",
cyan: "0ff",
darkblue: "00008b",
darkcyan: "008b8b",
darkgoldenrod: "b8860b",
darkgray: "a9a9a9",
darkgreen: "006400",
darkgrey: "a9a9a9",
darkkhaki: "bdb76b",
darkmagenta: "8b008b",
darkolivegreen: "556b2f",
darkorange: "ff8c00",
darkorchid: "9932cc",
darkred: "8b0000",
darksalmon: "e9967a",
darkseagreen: "8fbc8f",
darkslateblue: "483d8b",
darkslategray: "2f4f4f",
darkslategrey: "2f4f4f",
darkturquoise: "00ced1",
darkviolet: "9400d3",
deeppink: "ff1493",
deepskyblue: "00bfff",
dimgray: "696969",
dimgrey: "696969",
dodgerblue: "1e90ff",
firebrick: "b22222",
floralwhite: "fffaf0",
forestgreen: "228b22",
fuchsia: "f0f",
gainsboro: "dcdcdc",
ghostwhite: "f8f8ff",
gold: "ffd700",
goldenrod: "daa520",
gray: "808080",
green: "008000",
greenyellow: "adff2f",
grey: "808080",
honeydew: "f0fff0",
hotpink: "ff69b4",
indianred: "cd5c5c",
indigo: "4b0082",
ivory: "fffff0",
khaki: "f0e68c",
lavender: "e6e6fa",
lavenderblush: "fff0f5",
lawngreen: "7cfc00",
lemonchiffon: "fffacd",
lightblue: "add8e6",
lightcoral: "f08080",
lightcyan: "e0ffff",
lightgoldenrodyellow: "fafad2",
lightgray: "d3d3d3",
lightgreen: "90ee90",
lightgrey: "d3d3d3",
lightpink: "ffb6c1",
lightsalmon: "ffa07a",
lightseagreen: "20b2aa",
lightskyblue: "87cefa",
lightslategray: "789",
lightslategrey: "789",
lightsteelblue: "b0c4de",
lightyellow: "ffffe0",
lime: "0f0",
limegreen: "32cd32",
linen: "faf0e6",
magenta: "f0f",
maroon: "800000",
mediumaquamarine: "66cdaa",
mediumblue: "0000cd",
mediumorchid: "ba55d3",
mediumpurple: "9370db",
mediumseagreen: "3cb371",
mediumslateblue: "7b68ee",
mediumspringgreen: "00fa9a",
mediumturquoise: "48d1cc",
mediumvioletred: "c71585",
midnightblue: "191970",
mintcream: "f5fffa",
mistyrose: "ffe4e1",
moccasin: "ffe4b5",
navajowhite: "ffdead",
navy: "000080",
oldlace: "fdf5e6",
olive: "808000",
olivedrab: "6b8e23",
orange: "ffa500",
orangered: "ff4500",
orchid: "da70d6",
palegoldenrod: "eee8aa",
palegreen: "98fb98",
paleturquoise: "afeeee",
palevioletred: "db7093",
papayawhip: "ffefd5",
peachpuff: "ffdab9",
peru: "cd853f",
pink: "ffc0cb",
plum: "dda0dd",
powderblue: "b0e0e6",
purple: "800080",
rebeccapurple: "663399",
red: "f00",
rosybrown: "bc8f8f",
royalblue: "4169e1",
saddlebrown: "8b4513",
salmon: "fa8072",
sandybrown: "f4a460",
seagreen: "2e8b57",
seashell: "fff5ee",
sienna: "a0522d",
silver: "c0c0c0",
skyblue: "87ceeb",
slateblue: "6a5acd",
slategray: "708090",
slategrey: "708090",
snow: "fffafa",
springgreen: "00ff7f",
steelblue: "4682b4",
tan: "d2b48c",
teal: "008080",
thistle: "d8bfd8",
tomato: "ff6347",
turquoise: "40e0d0",
violet: "ee82ee",
wheat: "f5deb3",
white: "fff",
whitesmoke: "f5f5f5",
yellow: "ff0",
yellowgreen: "9acd32"
}, hexNames = tinycolor.hexNames = flip(names);
function flip(o) {
var flipped = {};
for (var i in o)
o.hasOwnProperty(i) && (flipped[o[i]] = i);
return flipped;
}
function boundAlpha(a) {
return a = parseFloat(a), (isNaN(a) || a < 0 || a > 1) && (a = 1), a;
}
function bound01(n, max) {
isOnePointZero(n) && (n = "100%");
var processPercent = isPercentage(n);
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);
}
function clamp01(val) {
return Math.min(1, Math.max(0, val));
}
function parseIntFromHex(val) {
return parseInt(val, 16);
}
function isOnePointZero(n) {
return typeof n == "string" && n.indexOf(".") != -1 && parseFloat(n) === 1;
}
function isPercentage(n) {
return typeof n == "string" && n.indexOf("%") != -1;
}
function pad2(c) {
return c.length == 1 ? "0" + c : "" + c;
}
function convertToPercentage(n) {
return n <= 1 && (n = n * 100 + "%"), n;
}
function convertDecimalToHex(d) {
return Math.round(parseFloat(d) * 255).toString(16);
}
function convertHexToDecimal(h) {
return parseIntFromHex(h) / 255;
}
var matchers = function() {
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*\\)?";
return {
CSS_UNIT: new RegExp(CSS_UNIT),
rgb: new RegExp("rgb" + PERMISSIVE_MATCH3),
rgba: new RegExp("rgba" + PERMISSIVE_MATCH4),
hsl: new RegExp("hsl" + PERMISSIVE_MATCH3),
hsla: new RegExp("hsla" + PERMISSIVE_MATCH4),
hsv: new RegExp("hsv" + PERMISSIVE_MATCH3),
hsva: new RegExp("hsva" + PERMISSIVE_MATCH4),
hex3: /^#?([0-9a-fA-F]{1})([0-9a-fA-F]{1})([0-9a-fA-F]{1})$/,
hex6: /^#?([0-9a-fA-F]{2})([0-9a-fA-F]{2})([0-9a-fA-F]{2})$/,
hex4: /^#?([0-9a-fA-F]{1})([0-9a-fA-F]{1})([0-9a-fA-F]{1})([0-9a-fA-F]{1})$/,
hex8: /^#?([0-9a-fA-F]{2})([0-9a-fA-F]{2})([0-9a-fA-F]{2})([0-9a-fA-F]{2})$/
};
}();
function isValidCSSUnit(color2) {
return !!matchers.CSS_UNIT.exec(color2);
}
function stringInputToObject(color2) {
color2 = color2.replace(trimLeft, "").replace(trimRight, "").toLowerCase();
var named = !1;
if (names[color2])
color2 = names[color2], named = !0;
else if (color2 == "transparent")
return {
r: 0,
g: 0,
b: 0,
a: 0,
format: "name"
};
var match;
return (match = matchers.rgb.exec(color2)) ? {
r: match[1],
g: match[2],
b: match[3]
} : (match = matchers.rgba.exec(color2)) ? {
r: match[1],
g: match[2],
b: match[3],
a: match[4]
} : (match = matchers.hsl.exec(color2)) ? {
h: match[1],
s: match[2],
l: match[3]
} : (match = matchers.hsla.exec(color2)) ? {
h: match[1],
s: match[2],
l: match[3],
a: match[4]
} : (match = matchers.hsv.exec(color2)) ? {
h: match[1],
s: match[2],
v: match[3]
} : (match = matchers.hsva.exec(color2)) ? {
h: match[1],
s: match[2],
v: match[3],
a: match[4]
} : (match = matchers.hex8.exec(color2)) ? {
r: parseIntFromHex(match[1]),
g: parseIntFromHex(match[2]),
b: parseIntFromHex(match[3]),
a: convertHexToDecimal(match[4]),
format: named ? "name" : "hex8"
} : (match = matchers.hex6.exec(color2)) ? {
r: parseIntFromHex(match[1]),
g: parseIntFromHex(match[2]),
b: parseIntFromHex(match[3]),
format: named ? "name" : "hex"
} : (match = matchers.hex4.exec(color2)) ? {
r: parseIntFromHex(match[1] + "" + match[1]),
g: parseIntFromHex(match[2] + "" + match[2]),
b: parseIntFromHex(match[3] + "" + match[3]),
a: convertHexToDecimal(match[4] + "" + match[4]),
format: named ? "name" : "hex8"
} : (match = matchers.hex3.exec(color2)) ? {
r: parseIntFromHex(match[1] + "" + match[1]),
g: parseIntFromHex(match[2] + "" + match[2]),
b: parseIntFromHex(match[3] + "" + match[3]),
format: named ? "name" : "hex"
} : !1;
}
function validateWCAG2Parms(parms) {
var level, size;
return parms = parms || {
level: "AA",
size: "small"
}, level = (parms.level || "AA").toUpperCase(), size = (parms.size || "small").toLowerCase(), level !== "AA" && level !== "AAA" && (level = "AA"), size !== "small" && size !== "large" && (size = "small"), {
level,
size
};
}
const ColorListWrap = styledComponents.styled(ui.Flex)`
gap: 0.25em;
`, ColorBoxContainer = styledComponents.styled.div`
width: 2.1em;
height: 2.1em;
cursor: pointer;
position: relative;
overflow: hidden;
border-radius: 3px;
background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAAXNSR0IArs4c6QAAADFJREFUOE9jZGBgEGHAD97gk2YcNYBhmIQBgWSAP52AwoAQwJvQRg1gACckQoC2gQgAIF8IscwEtKYAAAAASUVORK5CYII=')
left center #fff;
`, ColorBox$1 = styledComponents.styled.div`
border-radius: inherit;
box-shadow: inset 0 0 0 1px var(--card-shadow-outline-color);
content: '';
position: absolute;
inset: 0;
z-index: 1;
`, validateColors = (colors) => colors.reduce((cls, c) => {
const color2 = c.hex ? tinycolor(c.hex) : tinycolor(c);
return color2.isValid() && cls.push({
color: c,
backgroundColor: color2.toRgbString()
}), cls;
}, []), ColorList = react.memo(function({ colors, onChange }) {
return colors ? /* @__PURE__ */ jsxRuntime.jsx(ColorListWrap, { wrap: "wrap", children: validateColors(colors).map(({ color: color2, backgroundColor }, idx) => /* @__PURE__ */ jsxRuntime.jsx(
ColorBoxContainer,
{
onClick: () => {
onChange(color2);
},
children: /* @__PURE__ */ jsxRuntime.jsx(ColorBox$1, { style: { background: backgroundColor } })
},
`${backgroundColor}-${idx}`
)) }) : null;
}), ColorPickerFields = ({
onChange,
rgb,
hsl,
hex,
disableAlpha
}) => {
const { sanity: sanity2 } = ui.useTheme(), inputStyles = react.useMemo(
() => ({
input: {
width: "80%",
padding: "4px 10% 3px",
border: "none",
boxShadow: `inset 0 0 0 1px ${sanity2.color.input.default.enabled.border}`,
color: sanity2.color.input.default.enabled.fg,
backgroundColor: sanity2.color.input.default.enabled.bg,
fontSize: sanity2.fonts.text.sizes[0].fontSize,
textAlign: "center"
},
label: {
display: "block",
textAlign: "center",
fontSize: sanity2.fonts.label.sizes[0].fontSize,
color: sanity2.color.base.fg,
paddingTop: "3px",
paddingBottom: "4px",
textTransform: "capitalize"
}
}),
[sanity2]
), handleChange = react.useCallback(
(data) => {
if ("hex" in data && data.hex && color.isValidHex(data.hex))
onChange({
hex: data.hex,
source: "hex"
});
else if (rgb && ("r" in data && data.r || "g" in data && data.g || "b" in data && data.b))
onChange({
r: Number(data.r) || rgb.r,
g: Number(data.g) || rgb.g,
b: Number(data.b) || rgb.b,
a: rgb.a,
source: "rgb"
});
else if (hsl && "a" in data && data.a) {
let alpha = Number(data.a);
alpha < 0 ? alpha = 0 : alpha > 100 && (alpha = 100), alpha /= 100, onChange({
h: hsl.h,
s: hsl.s,
l: hsl.l,
a: alpha,
source: "hsl"
});
}
},
[onChange, hsl, rgb]
);
return /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, { children: [
/* @__PURE__ */ jsxRuntime.jsx(ui.Box, { flex: 2, marginRight: 1, children: /* @__PURE__ */ jsxRuntime.jsx(
common.EditableInput,
{
style: inputStyles,
label: "hex",
value: hex?.replace("#", ""),
onChange: handleChange
}
) }),
/* @__PURE__ */ jsxRuntime.jsx(ui.Box, { flex: 1, marginRight: 1, children: /* @__PURE__ */ jsxRuntime.jsx(
common.EditableInput,
{
style: inputStyles,
label: "r",
value: rgb?.r,
onChange: handleChange,
dragLabel: !0,
dragMax: 255
}
) }),
/* @__PURE__ */ jsxRuntime.jsx(ui.Box, { flex: 1, marginRight: 1, children: /* @__PURE__ */ jsxRuntime.jsx(
common.EditableInput,
{
style: inputStyles,
label: "g",
value: rgb?.g,
onChange: handleChange,
dragLabel: !0,
dragMax: 255
}
) }),
/* @__PURE__ */ jsxRuntime.jsx(ui.Box, { flex: 1, marginRight: 1, children: /* @__PURE__ */ jsxRuntime.jsx(
common.EditableInput,
{
style: inputStyles,
label: "b",
value: rgb?.b,
onChange: handleChange,
dragLabel: !0,
dragMax: 255
}
) }),
!disableAlpha && /* @__PURE__ */ jsxRuntime.jsx(ui.Box, { flex: 1, children: /* @__PURE__ */ jsxRuntime.jsx(
common.EditableInput,
{
style: inputStyles,
label: "a",
value: Math.round((rgb?.a ?? 1) * 100),
onChange: handleChange,
dragLabel: !0,
dragMax: 100
}
) })
] });
}, ColorBox = styledComponents.styled(ui.Box)`
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
`, ReadOnlyContainer = styledComponents.styled(ui.Flex)`
margin-top: 6rem;
background-color: var(--card-bg-color);
position: relative;
width: 100%;
`, ColorPickerInner = (props) => {
const {
width,
color: { rgb, hex, hsv, hsl },
onChange,
onUnset,
disableAlpha,
colorList,
readOnly
} = props;
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: [
!readOnly && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
/* @__PURE__ */ jsxRuntime.jsx(ui.Card, { overflow: "hidden", style: { position: "relative", height: "5em" }, children: /* @__PURE__ */ jsxRuntime.jsx(common.Saturation, { onChange, hsl, hsv }) }),
/* @__PURE__ */ jsxRuntime.jsx(
ui.Card,
{
shadow: 1,
radius: 3,
overflow: "hidden",
style: { position: "relative", height: "10px" },
children: /* @__PURE__ */ jsxRuntime.jsx(common.Hue, { hsl, onChange: !readOnly && onChange })
}
),
!disableAlpha && /* @__PURE__ */ jsxRuntime.jsx(
ui.Card,
{
shadow: 1,
radius: 3,
overflow: "hidden",
style: { position: "relative", height: "10px", background: "#fff" },
children: /* @__PURE__ */ jsxRuntime.jsx(common.Alpha, { rgb, hsl, onChange })
}
)
] }),
/* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, { children: [
/* @__PURE__ */ jsxRuntime.jsxs(
ui.Card,
{
flex: 1,
radius: 2,
overflow: "hidden",
style: { position: "relative", minWidth: "4em", background: "#fff" },
children: [
/* @__PURE__ */ jsxRuntime.jsx(
common.Checkboard,
{
size: 8,
white: "transparent",
grey: "rgba(0,0,0,.08)",
renderers: {}
}
),
/* @__PURE__ */ jsxRuntime.jsx(
ColorBox,
{
style: {
backgroundColor: `rgba(${rgb?.r},${rgb?.g},${rgb?.b},${rgb?.a})`
}
}
),
readOnly && /* @__PURE__ */ jsxRuntime.jsx(
ReadOnlyContainer,
{
padding: 2,
paddingBottom: 1,
sizing: "border",
justify: "space-between",
children: /* @__PURE__ */ jsxRuntime.jsxs(ui.Stack, { space: 3, marginTop: 1, children: [
/* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: 3, weight: "bold", children: hex }),
/* @__PURE__ */ jsxRuntime.jsxs(ui.Inline, { space: 3, children: [
/* @__PURE__ */ jsxRuntime.jsxs(ui.Text, { size: 1, children: [
/* @__PURE__ */ jsxRuntime.jsx("strong", { children: "RGB: " }),
rgb?.r,
" ",
rgb?.g,
" ",
rgb?.b
] }),
/* @__PURE__ */ jsxRuntime.jsxs(ui.Text, { size: 1, children: [
/* @__PURE__ */ jsxRuntime.jsx("strong", { children: "HSL: " }),
" ",
Math.round(hsl?.h ?? 0),
" ",
Math.round((hsl?.s ?? 0) * 100),
"% ",
Math.round((hsl?.l ?? 0) * 100),
"%"
] })
] })
] })
}
)
]
}
),
!readOnly && /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, { align: "flex-start", marginLeft: 2, children: [
/* @__PURE__ */ jsxRuntime.jsx(ui.Box, { style: { width: 200 }, children: /* @__PURE__ */ jsxRuntime.jsx(
ColorPickerFields,
{
rgb,
hsl,
hex,
onChange,
disableAlpha
}
) }),
/* @__PURE__ */ jsxRuntime.jsx(ui.Box, { marginLeft: 2, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { onClick: onUnset, title: "Delete color", icon: icons.TrashIcon, tone: "critical" }) })
] })
] }),
colorList && /* @__PURE__ */ jsxRuntime.jsx(ColorList, { colors: colorList, onChange })
] }) }) });
}, ColorPicker = reactColor.CustomPicker(ColorPickerInner), DEFAULT_COLOR = {
hex: "#24a3e3",
hsl: { h: 200, s: 0.7732, l: 0.5156, a: 1 },
hsv: { h: 200, s: 0.8414, v: 0.8901, a: 1 },
rgb: { r: 46, g: 163, b: 227, a: 1 },
source: "hex"
};
function ColorInput(props) {
const { onChange, readOnly } = props, value = props.value, type = props.schemaType, focusRef = react.useRef(null), [color2, setColor] = react.useState(value);
react.useEffect(() => react.startTransition(() => setColor(value)), [value]);
const [emitColor, setEmitColor] = react.useState(void 0), debouncedColor = react.useDeferredValue(emitColor), handleChange = useEffectEvent.useEffectEvent((nextColor) => {
const fieldPatches = type.fields.filter((field) => field.name in nextColor).map((field) => {
const nextFieldValue = nextColor[field.name], isObject = field.type.jsonType === "object";
return sanity.set(
isObject ? Object.assign({ _type: field.type.name }, nextFieldValue) : nextFieldValue,
[field.name]
);
});
onChange([
sanity.setIfMissing({ _type: type.name }),
sanity.set(type.name, ["_type"]),
sanity.set(nextColor.rgb?.a, ["alpha"]),
...fieldPatches
]);
});
react.useEffect(() => {
if (!debouncedColor) return;
const raf = requestAnimationFrame(() => handleChange(debouncedColor));
return () => cancelAnimationFrame(raf);
}, [debouncedColor]);
const handleCreateColor = react.useCallback(() => {
setColor(DEFAULT_COLOR), setEmitColor(DEFAULT_COLOR);
}, []), handleColorChange = react.useCallback((nextColor) => {
setColor(nextColor), setEmitColor(nextColor);
}, []), handleUnset = react.useCallback(() => {
setColor(void 0), onChange(sanity.unset());
}, [onChange]);
return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: value && value.hex ? /* @__PURE__ */ jsxRuntime.jsx(
ColorPicker,
{
color: color2,
onChange: handleColorChange,
readOnly: readOnly || typeof type.readOnly == "boolean" && type.readOnly,
disableAlpha: !!type.options?.disableAlpha,
colorList: type.options?.colorList,
onUnset: handleUnset
}
) : /* @__PURE__ */ jsxRuntime.jsx(
ui.Button,
{
icon: icons.AddIcon,
mode: "ghost",
text: "Create color",
ref: focusRef,
disabled: !!readOnly,
onClick: handleCreateColor
}
) });
}
exports.default = ColorInput;
//# sourceMappingURL=ColorInput.js.map