trying to write a strong program for diverging

mcnuttandrew · Mar 15, 2024 · 6afe205 · 6afe205
1 parent 5b9453a
commit 6afe205
Show file tree

Hide file tree

Showing 13 changed files with 548 additions and 143 deletions.
diff --git a/public/lang-docs.md b/public/lang-docs.md
@@ -44,10 +44,15 @@ Math Operations:
 {"\*": {left: Number | Variable, right: Number | Variable}}
 {"+": {left: Number | Variable, right: Number | Variable}}
 {"/": {left: Number | Variable, right: Number | Variable}}
+{"//": {left: Number | Variable, right: Number | Variable}}
 {"-": {left: Number | Variable, right: Number | Variable}}
 {absDiff: {left: Number | Variable, right: Number | Variable}}
 {"%": {left: Number | Variable, right: Number | Variable}}
 
+Notes
+
+- // is division with round
+
 Value Comparisons:
 {dist: {left: Color | Variable, right: Color | Variable}, space: COLOR_SPACE }
 {deltaE: {left: Color | Variable, right: Color | Variable}, algorithm: '2000' | etc }
@@ -61,6 +66,7 @@ Aggregates
 {mean: Variable | Number[]}
 {std: Variable | Number[]}
 {first: Variable | Number[]}
+{middle: Variable | Number[]}
 {last: Variable | Number[]}
 {extent: Variable | Number[]}
 
@@ -1302,6 +1308,162 @@ Program:
 
 
 
+### Diverging Palettes order
+
+Description: Diverging palettes should have a middle color that is the lightest or darkest color. This is because if they are not, then they will not be differentiable from each other in some contexts.
+
+Natural Language: (sort(filter(colors, x => index(x) < count(colors) // 2), y => lab.l(y)) == map(filter(colors, x => index(x) < count(colors) // 2), y => lab.l(y)) AND sort(filter(colors, x => index(x) > count(colors) // 2), y => lab.l(y)) == reverse(map(filter(colors, x => index(x) > count(colors) // 2), y => lab.l(y))) AND (ALL z IN colors WHERE index(z) != count(colors) // 2 SUCH THAT lab.l(middle(colors)) > lab.l(z) OR ALL z IN colors WHERE index(z) != count(colors) // 2 SUCH THAT lab.l(middle(colors)) < lab.l(z)))
+
+Palettes that will fail this test:
+
+- #000, #fff, #ff7e0e, #0f0, #0084a9, #00f with a #fff background
+
+- #be4704, #008000, #801242 with a #fff background
+
+
+
+Palettes that will pass this test:
+
+- #ff7e0e with a #fff background
+
+- #67001f, #b2182b, #d6604d, #f4a582, #fddbc7, #fff, #e0e0e0, #bababa, #878787, #4d4d4d, #1a1a1a with a #fff background
+
+- #67001f, #fff, #1a1a1a with a #fff background
+
+
+Program:
+
+```json
+{
+    "$schema": "http://localhost:3000/lint-schema.json", 
+    "and": [
+        {
+            "==": {
+                "left": {
+                    "sort": {
+                        "filter": "colors", 
+                        "varb": "x", 
+                        "func": {
+                            "<": {
+                                "left": "index(x)", 
+                                "right": {
+                                    "//": { "left": {"count": "colors"}, "right": 2 }
+                                }
+                            }
+                        }
+                    }, 
+                    "varb": "y", 
+                    "func": {"lab.l": "y"}
+                }, 
+                "right": {
+                    "map": {
+                        "filter": "colors", 
+                        "varb": "x", 
+                        "func": {
+                            "<": {
+                                "left": "index(x)", 
+                                "right": {
+                                    "//": { "left": {"count": "colors"}, "right": 2 }
+                                }
+                            }
+                        }
+                    }, 
+                    "varb": "y", 
+                    "func": {"lab.l": "y"}
+                }
+            }
+        }, 
+        {
+            "==": {
+                "left": {
+                    "sort": {
+                        "filter": "colors", 
+                        "varb": "x", 
+                        "func": {
+                            ">": {
+                                "left": "index(x)", 
+                                "right": {
+                                    "//": { "left": {"count": "colors"}, "right": 2 }
+                                }
+                            }
+                        }
+                    }, 
+                    "varb": "y", 
+                    "func": {"lab.l": "y"}
+                }, 
+                "right": {
+                    "reverse": {
+                        "map": {
+                            "filter": "colors", 
+                            "varb": "x", 
+                            "func": {
+                                ">": {
+                                    "left": "index(x)", 
+                                    "right": {
+                                        "//": { "left": {"count": "colors"}, "right": 2 }
+                                    }
+                                }
+                            }
+                        }, 
+                        "varb": "y", 
+                        "func": {"lab.l": "y"}
+                    }
+                }
+            }
+        }, 
+        {
+            "or": [
+                {
+                    "all": {
+                        "in": "colors", 
+                        "varb": "z", 
+                        "where": {
+                            "!=": {
+                                "left": "index(z)", 
+                                "right": {
+                                    "//": { "left": {"count": "colors"}, "right": 2 }
+                                }
+                            }
+                        }, 
+                        "predicate": {
+                            ">": {
+                                "left" : { "lab.l": {"middle": "colors"} }, 
+                                "right": { "lab.l": "z"                  }  
+                            }
+                        }
+                    }
+                }, 
+                {
+                    "all": {
+                        "in": "colors", 
+                        "varb": "z", 
+                        "where": {
+                            "!=": {
+                                "left": "index(z)", 
+                                "right": {
+                                    "//": { "left": {"count": "colors"}, "right": 2 }
+                                }
+                            }
+                        }, 
+                        "predicate": {
+                            "<": {
+                                "left" : { "lab.l": {"middle": "colors"} }, 
+                                "right": { "lab.l": "z"                  }  
+                            }
+                        }
+                    }
+                }
+            ]
+        }
+    ]
+}
+
+```
+
+
+
+
+
 ### Even Distribution
 
 Description: Categorical values should have an even distribution around the hue circle in LCH color space

diff --git a/src/lib/ColorLint.test.ts b/src/lib/ColorLint.test.ts
@@ -16,6 +16,7 @@ import CatOrderSimilarity from "./lints/cat-order-similarity";
 import CVDCheck from "./lints/cvd-check";
 import ColorNameDiscriminability, { getName } from "./lints/name-discrim";
 import ColorTags from "./lints/color-tags";
+import DivergingOrder from "./lints/diverging-order";
 import EvenDistribution from "./lints/even-distribution";
 import Fair from "./lints/fair";
 import Gamut from "./lints/in-gamut";
@@ -139,6 +140,10 @@ test("ColorLint - CVD: Grayscale", async () => {
   autoTest(CVDCheck[3]);
 });
 
+test("ColorLint - Diverging", async () => {
+  autoTest(DivergingOrder);
+});
+
 const ughWhat = ["#00ffff", "#00faff", "#00e4ff", "#fdfdfc", "#00ffff"];
 test("ColorLint - Background Contrast", async () => {
   const examplePal = makePalFromString(ughWhat);

diff --git a/src/lib/__snapshots__/ColorLint.test.ts.snap b/src/lib/__snapshots__/ColorLint.test.ts.snap
@@ -64,6 +64,16 @@ exports[`ColorLint - Contrast (3) contrastTextAAA 1`] = `"These colors () do not
 
 exports[`ColorLint - Contrast (3) contrastTextAAA 2`] = `"These colors (#af3b4b) do not have a sufficient contrast ratio with the background and may be hard to discriminate in some contexts."`;
 
+exports[`ColorLint - Diverging 1`] = `"This palette should have a middle color that is the lightest or darkest color, from which the other colors grow darker or lighter  respectively."`;
+
+exports[`ColorLint - Diverging 2`] = `"This palette should have a middle color that is the lightest or darkest color, from which the other colors grow darker or lighter  respectively."`;
+
+exports[`ColorLint - Diverging 3`] = `"This palette should have a middle color that is the lightest or darkest color, from which the other colors grow darker or lighter  respectively."`;
+
+exports[`ColorLint - Diverging 4`] = `"This palette should have a middle color that is the lightest or darkest color, from which the other colors grow darker or lighter  respectively."`;
+
+exports[`ColorLint - Diverging 5`] = `"This palette should have a middle color that is the lightest or darkest color, from which the other colors grow darker or lighter  respectively."`;
+
 exports[`ColorLint - EvenDistribution 1`] = `"This palette does not evenly distribute the colors around its range correctly. Try making the spacing between the colors more regular to resolve this issue. "`;
 
 exports[`ColorLint - EvenDistribution 2`] = `"This palette does not evenly distribute the colors around its range correctly. Try making the spacing between the colors more regular to resolve this issue. "`;