reanimated-color-picker 2.3.1 → 2.3.2
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.
|
@@ -599,7 +599,7 @@ class Colors {
|
|
|
599
599
|
/** Set the `red` value of a color to a specific amount.*/
|
|
600
600
|
setRed(color, amount) {
|
|
601
601
|
const { g, b, a } = this.RGB(color).object();
|
|
602
|
-
const newR =
|
|
602
|
+
const newR = (0, _utilities.clampRGB)(amount);
|
|
603
603
|
const newColor = {
|
|
604
604
|
r: newR,
|
|
605
605
|
g,
|
|
@@ -616,7 +616,7 @@ class Colors {
|
|
|
616
616
|
increaseRed(color, amount) {
|
|
617
617
|
const { r, g, b, a } = this.RGB(color).object();
|
|
618
618
|
const red = typeof amount === 'string' ? r + r * (parseFloat(amount) / 100) : r + amount;
|
|
619
|
-
const newR =
|
|
619
|
+
const newR = (0, _utilities.clampRGB)(red);
|
|
620
620
|
const newColor = {
|
|
621
621
|
r: newR,
|
|
622
622
|
g,
|
|
@@ -633,7 +633,7 @@ class Colors {
|
|
|
633
633
|
decreaseRed(color, amount) {
|
|
634
634
|
const { r, g, b, a } = this.RGB(color).object();
|
|
635
635
|
const red = typeof amount === 'string' ? r - r * (parseFloat(amount) / 100) : r - amount;
|
|
636
|
-
const newR =
|
|
636
|
+
const newR = (0, _utilities.clampRGB)(red);
|
|
637
637
|
const newColor = {
|
|
638
638
|
r: newR,
|
|
639
639
|
g,
|
|
@@ -651,7 +651,7 @@ class Colors {
|
|
|
651
651
|
/** - Set the `green` value of a color to a specific amount.*/
|
|
652
652
|
setGreen(color, amount) {
|
|
653
653
|
const { r, b, a } = this.RGB(color).object();
|
|
654
|
-
const newG =
|
|
654
|
+
const newG = (0, _utilities.clampRGB)(amount);
|
|
655
655
|
const newColor = {
|
|
656
656
|
r,
|
|
657
657
|
g: newG,
|
|
@@ -668,7 +668,7 @@ class Colors {
|
|
|
668
668
|
increaseGreen(color, amount) {
|
|
669
669
|
const { r, g, b, a } = this.RGB(color).object();
|
|
670
670
|
const green = typeof amount === 'string' ? g + g * (parseFloat(amount) / 100) : g + amount;
|
|
671
|
-
const newG =
|
|
671
|
+
const newG = (0, _utilities.clampRGB)(green);
|
|
672
672
|
const newColor = {
|
|
673
673
|
r,
|
|
674
674
|
g: newG,
|
|
@@ -685,7 +685,7 @@ class Colors {
|
|
|
685
685
|
decreaseGreen(color, amount) {
|
|
686
686
|
const { r, g, b, a } = this.RGB(color).object();
|
|
687
687
|
const green = typeof amount === 'string' ? g - g * (parseFloat(amount) / 100) : g - amount;
|
|
688
|
-
const newG =
|
|
688
|
+
const newG = (0, _utilities.clampRGB)(green);
|
|
689
689
|
const newColor = {
|
|
690
690
|
r,
|
|
691
691
|
g: newG,
|
|
@@ -703,7 +703,7 @@ class Colors {
|
|
|
703
703
|
/** - Set the `blue` value of a color to a specific amount.*/
|
|
704
704
|
setBlur(color, amount) {
|
|
705
705
|
const { r, g, a } = this.RGB(color).object();
|
|
706
|
-
const newB =
|
|
706
|
+
const newB = (0, _utilities.clampRGB)(amount);
|
|
707
707
|
const newColor = {
|
|
708
708
|
r,
|
|
709
709
|
g,
|
|
@@ -720,7 +720,7 @@ class Colors {
|
|
|
720
720
|
increaseBlue(color, amount) {
|
|
721
721
|
const { r, g, b, a } = this.RGB(color).object();
|
|
722
722
|
const blue = typeof amount === 'string' ? b + b * (parseFloat(amount) / 100) : b + amount;
|
|
723
|
-
const newB =
|
|
723
|
+
const newB = (0, _utilities.clampRGB)(blue);
|
|
724
724
|
const newColor = {
|
|
725
725
|
r,
|
|
726
726
|
g,
|
|
@@ -737,7 +737,7 @@ class Colors {
|
|
|
737
737
|
decreaseBlue(color, amount) {
|
|
738
738
|
const { r, g, b, a } = this.RGB(color).object();
|
|
739
739
|
const blue = typeof amount === 'string' ? b - b * (parseFloat(amount) / 100) : b - amount;
|
|
740
|
-
const newB =
|
|
740
|
+
const newB = (0, _utilities.clampRGB)(blue);
|
|
741
741
|
const newColor = {
|
|
742
742
|
r,
|
|
743
743
|
g,
|
|
@@ -756,7 +756,7 @@ class Colors {
|
|
|
756
756
|
/** - Set the `hue` value of a color to a specific amount.*/
|
|
757
757
|
setHue(color, amount) {
|
|
758
758
|
const { s, l, a } = this.HSL(color).object();
|
|
759
|
-
const newH =
|
|
759
|
+
const newH = (0, _utilities.clampHue)(amount);
|
|
760
760
|
const newColor = {
|
|
761
761
|
h: newH,
|
|
762
762
|
s,
|
|
@@ -773,7 +773,7 @@ class Colors {
|
|
|
773
773
|
increaseHue(color, amount) {
|
|
774
774
|
const { h, s, l, a } = this.HSL(color).object();
|
|
775
775
|
const hue = typeof amount === 'string' ? h + h * (parseFloat(amount) / 100) : h + amount;
|
|
776
|
-
const newH =
|
|
776
|
+
const newH = (0, _utilities.clampHue)(hue);
|
|
777
777
|
const newColor = {
|
|
778
778
|
h: newH,
|
|
779
779
|
s,
|
|
@@ -790,7 +790,7 @@ class Colors {
|
|
|
790
790
|
decreaseHue(color, amount) {
|
|
791
791
|
const { h, s, l, a } = this.HSL(color).object();
|
|
792
792
|
const hue = typeof amount === 'string' ? h - h * (parseFloat(amount) / 100) : h - amount;
|
|
793
|
-
const newH =
|
|
793
|
+
const newH = (0, _utilities.clampHue)(hue);
|
|
794
794
|
const newColor = {
|
|
795
795
|
h: newH,
|
|
796
796
|
s,
|
|
@@ -826,7 +826,7 @@ class Colors {
|
|
|
826
826
|
/** - Set the `saturation` value of a color to a specific amount.*/
|
|
827
827
|
setSaturation(color, amount) {
|
|
828
828
|
const { h, l, a } = this.HSL(color).object();
|
|
829
|
-
const newS =
|
|
829
|
+
const newS = (0, _utilities.clamp100)(amount);
|
|
830
830
|
const saturatedColor = {
|
|
831
831
|
h,
|
|
832
832
|
s: newS,
|
|
@@ -844,7 +844,7 @@ class Colors {
|
|
|
844
844
|
saturate(color, amount) {
|
|
845
845
|
const { h, s, l, a } = this.HSL(color).object();
|
|
846
846
|
const saturation = typeof amount === 'string' ? s + s * (parseFloat(amount) / 100) : s + amount;
|
|
847
|
-
const newS =
|
|
847
|
+
const newS = (0, _utilities.clamp100)(saturation);
|
|
848
848
|
const saturatedColor = {
|
|
849
849
|
h,
|
|
850
850
|
s: newS,
|
|
@@ -862,7 +862,7 @@ class Colors {
|
|
|
862
862
|
desaturate(color, amount) {
|
|
863
863
|
const { h, s, l, a } = this.HSL(color).object();
|
|
864
864
|
const saturation = typeof amount === 'string' ? s - s * (parseFloat(amount) / 100) : s - amount;
|
|
865
|
-
const newS =
|
|
865
|
+
const newS = (0, _utilities.clamp100)(saturation);
|
|
866
866
|
const desaturatedColor = {
|
|
867
867
|
h,
|
|
868
868
|
s: newS,
|
|
@@ -883,7 +883,7 @@ class Colors {
|
|
|
883
883
|
/** - Set HSL's `luminosity` channel for a given color to a specific amount.*/
|
|
884
884
|
setLuminance(color, amount) {
|
|
885
885
|
const { h, s, a } = this.HSL(color).object();
|
|
886
|
-
const newL =
|
|
886
|
+
const newL = (0, _utilities.clamp100)(amount);
|
|
887
887
|
const newColor = {
|
|
888
888
|
h,
|
|
889
889
|
s,
|
|
@@ -901,7 +901,7 @@ class Colors {
|
|
|
901
901
|
brighten(color, amount) {
|
|
902
902
|
const { h, s, l, a } = this.HSL(color).object();
|
|
903
903
|
const lum = typeof amount === 'string' ? l + l * (parseFloat(amount) / 100) : l + amount;
|
|
904
|
-
const newL =
|
|
904
|
+
const newL = (0, _utilities.clamp100)(lum);
|
|
905
905
|
const brightenedColor = {
|
|
906
906
|
h,
|
|
907
907
|
s,
|
|
@@ -919,7 +919,7 @@ class Colors {
|
|
|
919
919
|
darken(color, amount) {
|
|
920
920
|
const { h, s, l, a } = this.HSL(color).object();
|
|
921
921
|
const lum = typeof amount === 'string' ? l - l * (parseFloat(amount) / 100) : l - amount;
|
|
922
|
-
const newL =
|
|
922
|
+
const newL = (0, _utilities.clamp100)(lum);
|
|
923
923
|
const darkenedColor = {
|
|
924
924
|
h,
|
|
925
925
|
s,
|
|
@@ -937,7 +937,7 @@ class Colors {
|
|
|
937
937
|
/** - Set HSV's `value` (brightness) channel for a given color to a specific amount.*/
|
|
938
938
|
setBrightness(color, amount) {
|
|
939
939
|
const { h, s, a } = this.HSV(color).object();
|
|
940
|
-
const newV =
|
|
940
|
+
const newV = (0, _utilities.clamp100)(amount);
|
|
941
941
|
const newColor = {
|
|
942
942
|
h,
|
|
943
943
|
s,
|
|
@@ -950,7 +950,7 @@ class Colors {
|
|
|
950
950
|
increaseBrightness(color, amount) {
|
|
951
951
|
const { h, s, v, a } = this.HSV(color).object();
|
|
952
952
|
const value = typeof amount === 'string' ? v + v * (parseFloat(amount) / 100) : v + amount;
|
|
953
|
-
const newV =
|
|
953
|
+
const newV = (0, _utilities.clamp100)(value);
|
|
954
954
|
const newColor = {
|
|
955
955
|
h,
|
|
956
956
|
s,
|
|
@@ -963,7 +963,7 @@ class Colors {
|
|
|
963
963
|
decreaseBrightness(color, amount) {
|
|
964
964
|
const { h, s, v, a } = this.HSV(color).object();
|
|
965
965
|
const value = typeof amount === 'string' ? v - v * (parseFloat(amount) / 100) : v - amount;
|
|
966
|
-
const newV =
|
|
966
|
+
const newV = (0, _utilities.clamp100)(value);
|
|
967
967
|
const newColor = {
|
|
968
968
|
h,
|
|
969
969
|
s,
|
|
@@ -982,7 +982,7 @@ class Colors {
|
|
|
982
982
|
/** - Set the `alpha` value of a color to a specific amount.*/
|
|
983
983
|
setAlpha(color, amount) {
|
|
984
984
|
const { r, g, b } = this.RGB(color).object();
|
|
985
|
-
const newA =
|
|
985
|
+
const newA = (0, _utilities.clampAlpha)(amount);
|
|
986
986
|
const newColor = {
|
|
987
987
|
r,
|
|
988
988
|
g,
|
|
@@ -995,7 +995,7 @@ class Colors {
|
|
|
995
995
|
increaseAlpha(color, amount) {
|
|
996
996
|
const { r, g, b, a } = this.RGB(color).object();
|
|
997
997
|
const alpha = typeof amount === 'string' ? a + a * (parseFloat(amount) / 100) : a + amount;
|
|
998
|
-
const newA =
|
|
998
|
+
const newA = (0, _utilities.clampAlpha)(alpha);
|
|
999
999
|
const newColor = {
|
|
1000
1000
|
r,
|
|
1001
1001
|
g,
|
|
@@ -1008,7 +1008,7 @@ class Colors {
|
|
|
1008
1008
|
decreaseAlpha(color, amount) {
|
|
1009
1009
|
const { r, g, b, a } = this.RGB(color).object();
|
|
1010
1010
|
const alpha = typeof amount === 'string' ? a - a * (parseFloat(amount) / 100) : a - amount;
|
|
1011
|
-
const newA =
|
|
1011
|
+
const newA = (0, _utilities.clampAlpha)(alpha);
|
|
1012
1012
|
const newColor = {
|
|
1013
1013
|
r,
|
|
1014
1014
|
g,
|
|
@@ -1055,10 +1055,10 @@ class Colors {
|
|
|
1055
1055
|
percentage = percentage / 100;
|
|
1056
1056
|
const rgba1 = this.RGB(color1).object();
|
|
1057
1057
|
const rgba2 = this.RGB(color2).object();
|
|
1058
|
-
const r =
|
|
1059
|
-
g =
|
|
1060
|
-
b =
|
|
1061
|
-
a =
|
|
1058
|
+
const r = (0, _utilities.clampRGB)(rgba1.r * (1 - percentage) + rgba2.r * percentage),
|
|
1059
|
+
g = (0, _utilities.clampRGB)(rgba1.g * (1 - percentage) + rgba2.g * percentage),
|
|
1060
|
+
b = (0, _utilities.clampRGB)(rgba1.b * (1 - percentage) + rgba2.b * percentage),
|
|
1061
|
+
a = (0, _utilities.clampAlpha)(rgba1.a * (1 - percentage) + rgba2.a * percentage);
|
|
1062
1062
|
const blendedColor = {
|
|
1063
1063
|
r,
|
|
1064
1064
|
g,
|
|
@@ -1083,7 +1083,7 @@ class Colors {
|
|
|
1083
1083
|
/** - Completely desaturate a color into grayscale. */
|
|
1084
1084
|
grayscale(color) {
|
|
1085
1085
|
const { r, g, b, a } = this.RGB(color).object();
|
|
1086
|
-
const gray =
|
|
1086
|
+
const gray = (0, _utilities.clampRGB)(r * 0.3 + g * 0.59 + b * 0.11);
|
|
1087
1087
|
const grayColor = {
|
|
1088
1088
|
r: gray,
|
|
1089
1089
|
g: gray,
|
|
@@ -1102,10 +1102,10 @@ class Colors {
|
|
|
1102
1102
|
a = [1, 1],
|
|
1103
1103
|
} = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
|
|
1104
1104
|
const random = {
|
|
1105
|
-
h:
|
|
1106
|
-
s:
|
|
1107
|
-
l:
|
|
1108
|
-
a:
|
|
1105
|
+
h: (0, _utilities.clampHue)((0, _utilities.randomNumber)(h[0], h[1])),
|
|
1106
|
+
s: (0, _utilities.clamp100)((0, _utilities.randomNumber)(s[0], s[1])),
|
|
1107
|
+
l: (0, _utilities.clamp100)((0, _utilities.randomNumber)(l[0], l[1])),
|
|
1108
|
+
a: (0, _utilities.clampAlpha)((0, _utilities.randomNumber)(a[0], a[1])),
|
|
1109
1109
|
};
|
|
1110
1110
|
return this.returnColorObject(random);
|
|
1111
1111
|
}
|
|
@@ -1118,10 +1118,10 @@ class Colors {
|
|
|
1118
1118
|
a = [1, 1],
|
|
1119
1119
|
} = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
|
|
1120
1120
|
const random = {
|
|
1121
|
-
h:
|
|
1122
|
-
s:
|
|
1123
|
-
v:
|
|
1124
|
-
a:
|
|
1121
|
+
h: (0, _utilities.clampHue)((0, _utilities.randomNumber)(h[0], h[1])),
|
|
1122
|
+
s: (0, _utilities.clamp100)((0, _utilities.randomNumber)(s[0], s[1])),
|
|
1123
|
+
v: (0, _utilities.clamp100)((0, _utilities.randomNumber)(v[0], v[1])),
|
|
1124
|
+
a: (0, _utilities.clampAlpha)((0, _utilities.randomNumber)(a[0], a[1])),
|
|
1125
1125
|
};
|
|
1126
1126
|
return this.returnColorObject(random);
|
|
1127
1127
|
}
|
|
@@ -1134,10 +1134,10 @@ class Colors {
|
|
|
1134
1134
|
a = [1, 1],
|
|
1135
1135
|
} = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
|
|
1136
1136
|
const random = {
|
|
1137
|
-
r:
|
|
1138
|
-
g:
|
|
1139
|
-
b:
|
|
1140
|
-
a:
|
|
1137
|
+
r: (0, _utilities.clampRGB)((0, _utilities.randomNumber)(r[0], r[1])),
|
|
1138
|
+
g: (0, _utilities.clampRGB)((0, _utilities.randomNumber)(g[0], g[1])),
|
|
1139
|
+
b: (0, _utilities.clampRGB)((0, _utilities.randomNumber)(b[0], b[1])),
|
|
1140
|
+
a: (0, _utilities.clampAlpha)((0, _utilities.randomNumber)(a[0], a[1])),
|
|
1141
1141
|
};
|
|
1142
1142
|
return this.returnColorObject(random);
|
|
1143
1143
|
}
|
|
@@ -1150,10 +1150,10 @@ class Colors {
|
|
|
1150
1150
|
a = [1, 1],
|
|
1151
1151
|
} = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
|
|
1152
1152
|
const random = {
|
|
1153
|
-
h:
|
|
1154
|
-
w:
|
|
1155
|
-
b:
|
|
1156
|
-
a:
|
|
1153
|
+
h: (0, _utilities.clampHue)((0, _utilities.randomNumber)(h[0], h[1])),
|
|
1154
|
+
w: (0, _utilities.clamp100)((0, _utilities.randomNumber)(w[0], w[1])),
|
|
1155
|
+
b: (0, _utilities.clamp100)((0, _utilities.randomNumber)(b[0], b[1])),
|
|
1156
|
+
a: (0, _utilities.clampAlpha)((0, _utilities.randomNumber)(a[0], a[1])),
|
|
1157
1157
|
};
|
|
1158
1158
|
return this.returnColorObject(random);
|
|
1159
1159
|
}
|
|
@@ -1165,9 +1165,9 @@ class Colors {
|
|
|
1165
1165
|
const color1RGB = this.RGB(color1).object();
|
|
1166
1166
|
const channels = ['r', 'g', 'b'];
|
|
1167
1167
|
const adjustLuminance = (colorRGB, by) => {
|
|
1168
|
-
const r = (0, _utilities.
|
|
1169
|
-
const g = (0, _utilities.
|
|
1170
|
-
const b = (0, _utilities.
|
|
1168
|
+
const r = (0, _utilities.clampRGB)(colorRGB.r + by);
|
|
1169
|
+
const g = (0, _utilities.clampRGB)(colorRGB.g + by);
|
|
1170
|
+
const b = (0, _utilities.clampRGB)(colorRGB.b + by);
|
|
1171
1171
|
return {
|
|
1172
1172
|
r,
|
|
1173
1173
|
g,
|