Gradient Part 1 - Color rework (#2171)

3 files changed, 89 insertions, 28 deletions

diff --git a/tests/typ/compiler/color.typ b/tests/typ/compiler/color.typ
index fbb1749b..71fce1b1 100644
--- a/tests/typ/compiler/color.typ
+++ b/tests/typ/compiler/color.typ
@@ -19,8 +19,58 @@
 }
 
 ---
+// The the different color spaces
+#let col = rgb(50%, 64%, 16%)
+#box(square(size: 9pt, fill: col))
+#box(square(size: 9pt, fill: rgb(col)))
+#box(square(size: 9pt, fill: oklab(col)))
+#box(square(size: 9pt, fill: luma(col)))
+#box(square(size: 9pt, fill: cmyk(col)))
+#box(square(size: 9pt, fill: color.linear-rgb(col)))
+#box(square(size: 9pt, fill: color.hsl(col)))
+#box(square(size: 9pt, fill: color.hsv(col)))
+
+---
+// Test hue rotation
+#let col = rgb(50%, 64%, 16%)
+
+#for x in range(0, 11) {
+  box(square(size: 9pt, fill: rgb(col).rotate(x * 36deg)))
+}
+
+#for x in range(0, 11) {
+  box(square(size: 9pt, fill: color.hsv(col).rotate(x * 36deg)))
+}
+
+#for x in range(0, 11) {
+  box(square(size: 9pt, fill: color.hsl(col).rotate(x * 36deg)))
+}
+
+---
+// Test saturation
+#let col = color.hsl(180deg, 0%, 50%)
+#for x in range(0, 11) {
+  box(square(size: 9pt, fill: col.saturate(x * 10%)))
+}
+
+#let col = color.hsl(180deg, 100%, 50%)
+#for x in range(0, 11) {
+  box(square(size: 9pt, fill: col.desaturate(x * 10%)))
+}
+
+#let col = color.hsv(180deg, 0%, 50%)
+#for x in range(0, 11) {
+  box(square(size: 9pt, fill: col.saturate(x * 10%)))
+}
+
+#let col = color.hsv(180deg, 100%, 50%)
+#for x in range(0, 11) {
+  box(square(size: 9pt, fill: col.desaturate(x * 10%)))
+}
+
+---
 // Test gray color modification.
 // Ref: false
-#test(luma(20%).lighten(50%), luma(60%))
-#test(luma(80%).darken(20%), luma(63.9%))
-#test(luma(80%).negate(), luma(20%))
+#test-repr(luma(20%).lighten(50%), luma(60%))
+#test-repr(luma(80%).darken(20%), luma(64%))
+#test-repr(luma(80%).negate(), luma(20%))
diff --git a/tests/typ/compiler/methods.typ b/tests/typ/compiler/methods.typ
index e4c09ed2..8f70bd8c 100644
--- a/tests/typ/compiler/methods.typ
+++ b/tests/typ/compiler/methods.typ
@@ -97,39 +97,40 @@
 
 ---
 // Test color kind method.
-#test(rgb(1, 2, 3, 4).kind(), rgb)
-#test(cmyk(4%, 5%, 6%, 7%).kind(), cmyk)
-#test(luma(40).kind(), luma)
-#test(rgb(1, 2, 3, 4).kind() != luma, true)
+#test(rgb(1, 2, 3, 4).space(), rgb)
+#test(cmyk(4%, 5%, 6%, 7%).space(), cmyk)
+#test(luma(40).space(), luma)
+#test(rgb(1, 2, 3, 4).space() != luma, true)
 
 ---
-// Test color '.rgba()', '.cmyk()' and '.luma()' without conversions
-#test(rgb(1, 2, 3, 4).to-rgba(), (1, 2, 3, 4))
-#test(rgb(1, 2, 3).to-rgba(), (1, 2, 3, 255))
-#test(cmyk(20%, 20%, 40%, 20%).to-cmyk(), (20%, 20%, 40%, 20%))
-#test(luma(40).to-luma(), 40)
+// Test color '.components()' without conversions
+#test-repr(rgb(1, 2, 3, 4).components(), (0.39%, 0.78%, 1.18%, 1.57%))
+#test-repr(luma(40).components(), (15.69%, ))
+#test-repr(cmyk(4%, 5%, 6%, 7%).components(), (4%, 5%, 6%, 7%))
+#test-repr(oklab(10%, 0.2, 0.3).components(), (10%, 0.2, 0.3, 100%))
+#test-repr(color.linear-rgb(10%, 20%, 30%).components(), (10%, 20%, 30%, 100%))
+#test-repr(color.hsv(10deg, 20%, 30%).components(), (10deg, 20%, 30%, 100%))
+#test-repr(color.hsl(10deg, 20%, 30%).components(), (10deg, 20%, 30%, 100%))
 
 ---
 // Test color conversions.
 #test(rgb(1, 2, 3).to-hex(), "#010203")
 #test(rgb(1, 2, 3, 4).to-hex(), "#01020304")
-#test(cmyk(4%, 5%, 6%, 7%).to-rgba(), (228, 225, 223, 255))
-#test(cmyk(4%, 5%, 6%, 7%).to-hex(), "#e4e1df")
-#test(luma(40).to-rgba(), (40, 40, 40, 255))
 #test(luma(40).to-hex(), "#282828")
-#test(repr(luma(40).to-cmyk()), repr((11.76%, 10.59%, 10.59%, 14.12%)))
-
----
-// Error: 2-27 cannot obtain cmyk values from rgba color
-#rgb(1, 2, 3, 4).to-cmyk()
-
----
-// Error: 2-27 cannot obtain the luma value of rgba color
-#rgb(1, 2, 3, 4).to-luma()
-
----
-// Error: 2-32 cannot obtain the luma value of cmyk color
-#cmyk(4%, 5%, 6%, 7%).to-luma()
+#test-repr(cmyk(4%, 5%, 6%, 7%).to-hex(), "#e4e1df")
+#test-repr(rgb(cmyk(4%, 5%, 6%, 7%)).components(), (89.28%, 88.35%, 87.42%, 100%))
+#test-repr(rgb(luma(40%)).components(false), (40%, 40%, 40%))
+#test-repr(cmyk(luma(40)).components(), (11.76%, 10.67%, 10.51%, 14.12%))
+#test-repr(cmyk(rgb(1, 2, 3)), cmyk(66.67%, 33.33%, 0%, 98.82%))
+#test-repr(luma(rgb(1, 2, 3)), luma(0.73%))
+#test-repr(color.hsl(luma(40)), color.hsl(0deg, 0%, 15.69%))
+#test-repr(color.hsv(luma(40)), color.hsv(0deg, 0%, 15.69%))
+#test-repr(color.linear-rgb(luma(40)), color.linear-rgb(2.12%, 2.12%, 2.12%))
+#test-repr(color.linear-rgb(rgb(1, 2, 3)), color.linear-rgb(0.03%, 0.06%, 0.09%))
+#test-repr(color.hsl(rgb(1, 2, 3)), color.hsl(-150deg, 50%, 0.78%))
+#test-repr(color.hsv(rgb(1, 2, 3)), color.hsv(-150deg, 66.67%, 1.18%))
+#test-repr(oklab(luma(40)).components(), (27.68%, 0.0, 0.0, 100%))
+#test-repr(oklab(rgb(1, 2, 3)).components(), (8.23%, -0.004, -0.007, 100%))
 
 ---
 // Test alignment methods.
diff --git a/tests/typ/compiler/repr.typ b/tests/typ/compiler/repr.typ
index 13593a86..ce5b2975 100644
--- a/tests/typ/compiler/repr.typ
+++ b/tests/typ/compiler/repr.typ
@@ -47,3 +47,13 @@
 #int \
 #type("hi") \
 #type((a: 1))
+
+---
+#set text(0.8em)
+#blue \
+#color.linear-rgb(blue) \
+#oklab(blue) \
+#cmyk(blue) \
+#color.hsl(blue) \
+#color.hsv(blue) \
+#luma(blue)