@quenty/colorpalette 4.21.0 → 4.22.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +11 -0
- package/package.json +6 -6
- package/src/Shared/Grade/ColorGradeUtils.lua +66 -0
package/CHANGELOG.md
CHANGED
|
@@ -3,6 +3,17 @@
|
|
|
3
3
|
All notable changes to this project will be documented in this file.
|
|
4
4
|
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
|
|
5
5
|
|
|
6
|
+
# [4.22.0](https://github.com/Quenty/NevermoreEngine/compare/@quenty/colorpalette@4.21.0...@quenty/colorpalette@4.22.0) (2023-05-08)
|
|
7
|
+
|
|
8
|
+
|
|
9
|
+
### Features
|
|
10
|
+
|
|
11
|
+
* Add ColorGradeUtils.ensureGradeContrast(color, backing, amount) ([65a931b](https://github.com/Quenty/NevermoreEngine/commit/65a931b43b058c77585f1eb3b18b7614eb2a41cb))
|
|
12
|
+
|
|
13
|
+
|
|
14
|
+
|
|
15
|
+
|
|
16
|
+
|
|
6
17
|
# [4.21.0](https://github.com/Quenty/NevermoreEngine/compare/@quenty/colorpalette@4.20.0...@quenty/colorpalette@4.21.0) (2023-04-10)
|
|
7
18
|
|
|
8
19
|
**Note:** Version bump only for package @quenty/colorpalette
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@quenty/colorpalette",
|
|
3
|
-
"version": "4.
|
|
3
|
+
"version": "4.22.0",
|
|
4
4
|
"description": "Color palette system for Roblox",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"Roblox",
|
|
@@ -29,16 +29,16 @@
|
|
|
29
29
|
},
|
|
30
30
|
"dependencies": {
|
|
31
31
|
"@quenty/baseobject": "^6.2.1",
|
|
32
|
-
"@quenty/blend": "^6.
|
|
33
|
-
"@quenty/color3utils": "^5.
|
|
34
|
-
"@quenty/colorpicker": "^4.
|
|
32
|
+
"@quenty/blend": "^6.17.0",
|
|
33
|
+
"@quenty/color3utils": "^5.18.0",
|
|
34
|
+
"@quenty/colorpicker": "^4.19.0",
|
|
35
35
|
"@quenty/loader": "^6.2.1",
|
|
36
36
|
"@quenty/maid": "^2.5.0",
|
|
37
37
|
"@quenty/math": "^2.3.0",
|
|
38
38
|
"@quenty/rx": "^7.10.0",
|
|
39
39
|
"@quenty/signal": "^2.3.0",
|
|
40
40
|
"@quenty/table": "^3.2.0",
|
|
41
|
-
"@quenty/valueobject": "^7.
|
|
41
|
+
"@quenty/valueobject": "^7.13.0"
|
|
42
42
|
},
|
|
43
|
-
"gitHead": "
|
|
43
|
+
"gitHead": "2ad8cea7dd3ad79a39afd7d7b785b489b90553fd"
|
|
44
44
|
}
|
|
@@ -1,4 +1,11 @@
|
|
|
1
1
|
--[=[
|
|
2
|
+
Helps with color grades, which is the concept where the darkness of the color
|
|
3
|
+
goes from 0 to 100, with a grade of 100 being white, and a grade of 0 being
|
|
4
|
+
black.
|
|
5
|
+
|
|
6
|
+
Grades ensure a human-readable contrast value which means a grade contrast
|
|
7
|
+
of 70 will always meet accessibility standards.
|
|
8
|
+
|
|
2
9
|
@class ColorGradeUtils
|
|
3
10
|
]=]
|
|
4
11
|
|
|
@@ -8,6 +15,15 @@ local LuvColor3Utils = require("LuvColor3Utils")
|
|
|
8
15
|
|
|
9
16
|
local ColorGradeUtils = {}
|
|
10
17
|
|
|
18
|
+
--[=[
|
|
19
|
+
Adds to the grade and picks the direction to ensure the best amount of contrast.
|
|
20
|
+
May consider using [ColorGradeUtils.ensureGradeContrast] for a more background
|
|
21
|
+
aware contrast picker.
|
|
22
|
+
|
|
23
|
+
@param grade number
|
|
24
|
+
@param difference number
|
|
25
|
+
@return Color3
|
|
26
|
+
]=]
|
|
11
27
|
function ColorGradeUtils.addGrade(grade, difference)
|
|
12
28
|
local finalGrade = grade + difference
|
|
13
29
|
|
|
@@ -26,6 +42,48 @@ function ColorGradeUtils.addGrade(grade, difference)
|
|
|
26
42
|
return finalGrade
|
|
27
43
|
end
|
|
28
44
|
|
|
45
|
+
--[=[
|
|
46
|
+
Ensures the given contrast between the color and the backing, with
|
|
47
|
+
an adjustment to saturation to keep the UI loking good
|
|
48
|
+
|
|
49
|
+
@param color Color3
|
|
50
|
+
@param backing Color3
|
|
51
|
+
@param amount number -- Between 0 and 100
|
|
52
|
+
@return Color3
|
|
53
|
+
]=]
|
|
54
|
+
function ColorGradeUtils.ensureGradeContrast(color, backing, amount)
|
|
55
|
+
local l, u, v = unpack(LuvColor3Utils.fromColor3(color))
|
|
56
|
+
local _, _, bv = unpack(LuvColor3Utils.fromColor3(backing))
|
|
57
|
+
|
|
58
|
+
local grade = 100 - v
|
|
59
|
+
local backingGrade = 100 - bv
|
|
60
|
+
|
|
61
|
+
local rel = grade - backingGrade
|
|
62
|
+
|
|
63
|
+
-- Increase
|
|
64
|
+
if math.abs(rel) >= amount then
|
|
65
|
+
return color
|
|
66
|
+
end
|
|
67
|
+
|
|
68
|
+
local newRel = math.sign(rel)*amount
|
|
69
|
+
|
|
70
|
+
local newGrade = math.clamp(backingGrade + newRel, 0, 100)
|
|
71
|
+
local otherNewGrade = math.clamp(backingGrade - newRel, 0, 100)
|
|
72
|
+
|
|
73
|
+
local finalGrade
|
|
74
|
+
if math.abs(newGrade - backingGrade) > math.abs(otherNewGrade - backingGrade) then
|
|
75
|
+
finalGrade = newGrade
|
|
76
|
+
else
|
|
77
|
+
finalGrade = otherNewGrade
|
|
78
|
+
end
|
|
79
|
+
|
|
80
|
+
-- The further away from the original color the more we reduce vividness
|
|
81
|
+
local proportion = math.min(amount, math.abs(finalGrade - grade))/amount
|
|
82
|
+
u = math.clamp((1 - 0.5*proportion)*u, 0, 100)
|
|
83
|
+
|
|
84
|
+
return LuvColor3Utils.toColor3({l, u, 100 - finalGrade})
|
|
85
|
+
end
|
|
86
|
+
|
|
29
87
|
--[=[
|
|
30
88
|
Gets the grade for a given color
|
|
31
89
|
|
|
@@ -39,6 +97,14 @@ function ColorGradeUtils.getGrade(color)
|
|
|
39
97
|
return 100 - v
|
|
40
98
|
end
|
|
41
99
|
|
|
100
|
+
--[=[
|
|
101
|
+
Converts a color into a graded version of that color.
|
|
102
|
+
|
|
103
|
+
@param baseColor Color3
|
|
104
|
+
@param colorGrade number -- 0 to 100
|
|
105
|
+
@param vividness number | nil
|
|
106
|
+
@return Color3
|
|
107
|
+
]=]
|
|
42
108
|
function ColorGradeUtils.getGradedColor(baseColor, colorGrade, vividness)
|
|
43
109
|
assert(typeof(baseColor) == "Color3", "Bad baseColor")
|
|
44
110
|
assert(type(vividness) == "number" or vividness == nil, "Bad vividness")
|