From d62ef705b385606db3a35d44d040672529101016 Mon Sep 17 00:00:00 2001
From: Andrew Michael McNutt <mcnutt.andrew@gmail.com>
Date: Thu, 8 Feb 2024 16:35:48 -0800
Subject: [PATCH] remove ugly colors lint, minify vega examples

---
 public/examples/area-chart.json           |  55 +++------
 public/examples/grouped-bar-chart.json    |  93 ++++-----------
 public/examples/heatmap.json              | 106 ++++-------------
 public/examples/illinois-map.json         | 131 +++++++++++-----------
 public/examples/line-chart.json           |  35 ++----
 public/examples/scatterplot-ordinal.json  |  51 ++++-----
 public/examples/scatterplot.json          |  52 ++++-----
 public/examples/stacked-area-chart.json   |  30 ++---
 public/lint-schema.json                   |  10 +-
 src/components/monaco.ts                  |   1 -
 src/lib/linter.ts                         |   2 -
 src/lib/lints/ugly-colors.ts              |  40 -------
 src/linting/LintCustomizationModal.svelte |   3 +-
 src/stores/built-in-lints.ts              |  79 +++++++++++++
 src/stores/lint-store.ts                  |  65 +++--------
 15 files changed, 293 insertions(+), 460 deletions(-)
 delete mode 100644 src/lib/lints/ugly-colors.ts
 create mode 100644 src/stores/built-in-lints.ts

diff --git a/public/examples/area-chart.json b/public/examples/area-chart.json
index ea869664..f85e3f3f 100644
--- a/public/examples/area-chart.json
+++ b/public/examples/area-chart.json
@@ -1,40 +1,19 @@
 {
-    "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
-    "width": 250,
-    "height": 200,
-    "data": {
-        "url": "data/penguins.json"
-    },
-    "mark": {
-        "type": "area",
-        "opacity": 0.5
-    },
-    "transform": [
-        {
-            "density": "Body Mass (g)",
-            "groupby": [
-                "Species"
-            ],
-            "extent": [
-                2500,
-                6500
-            ]
-        }
-    ],
-    "encoding": {
-        "x": {
-            "field": "value",
-            "type": "quantitative",
-            "title": "Body Mass (g)"
-        },
-        "y": {
-            "field": "density",
-            "type": "quantitative",
-            "stack": null
-        },
-        "color": {
-            "field": "Species",
-            "type": "nominal"
-        }
+  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
+  "width": 250,
+  "height": 200,
+  "data": { "url": "data/penguins.json" },
+  "mark": { "type": "area", "opacity": 0.5 },
+  "transform": [
+    {
+      "density": "Body Mass (g)",
+      "groupby": ["Species"],
+      "extent": [2500, 6500]
     }
-}
\ No newline at end of file
+  ],
+  "encoding": {
+    "x": { "field": "value", "type": "quantitative", "title": "Body Mass (g)" },
+    "y": { "field": "density", "type": "quantitative", "stack": null },
+    "color": { "field": "Species", "type": "nominal" }
+  }
+}
diff --git a/public/examples/grouped-bar-chart.json b/public/examples/grouped-bar-chart.json
index 1b8b070c..267f49f3 100644
--- a/public/examples/grouped-bar-chart.json
+++ b/public/examples/grouped-bar-chart.json
@@ -1,70 +1,25 @@
 {
-    "height": 150,
-    "width": 150,
-    "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
-    "data": {
-        "values": [
-            {
-                "category": "A",
-                "group": "x",
-                "value": 0.1
-            },
-            {
-                "category": "A",
-                "group": "y",
-                "value": 0.6
-            },
-            {
-                "category": "A",
-                "group": "z",
-                "value": 0.9
-            },
-            {
-                "category": "B",
-                "group": "x",
-                "value": 0.7
-            },
-            {
-                "category": "B",
-                "group": "y",
-                "value": 0.2
-            },
-            {
-                "category": "B",
-                "group": "z",
-                "value": 1.1
-            },
-            {
-                "category": "C",
-                "group": "x",
-                "value": 0.6
-            },
-            {
-                "category": "C",
-                "group": "y",
-                "value": 0.1
-            },
-            {
-                "category": "C",
-                "group": "z",
-                "value": 0.2
-            }
-        ]
-    },
-    "mark": "bar",
-    "encoding": {
-        "x": {
-            "field": "category"
-        },
-        "y": {
-            "field": "value",
-            "type": "quantitative"
-        },
-        "xOffset": {
-            "field": "group"
-        },
-        "color": {
-            "field": "group"
-        }
-    }
-}
\ No newline at end of file
+  "height": 150,
+  "width": 150,
+  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
+  "data": {
+    "values": [
+      { "category": "A", "group": "x", "value": 0.1 },
+      { "category": "A", "group": "y", "value": 0.6 },
+      { "category": "A", "group": "z", "value": 0.9 },
+      { "category": "B", "group": "x", "value": 0.7 },
+      { "category": "B", "group": "y", "value": 0.2 },
+      { "category": "B", "group": "z", "value": 1.1 },
+      { "category": "C", "group": "x", "value": 0.6 },
+      { "category": "C", "group": "y", "value": 0.1 },
+      { "category": "C", "group": "z", "value": 0.2 }
+    ]
+  },
+  "mark": "bar",
+  "encoding": {
+    "x": { "field": "category" },
+    "y": { "field": "value", "type": "quantitative" },
+    "xOffset": { "field": "group" },
+    "color": { "field": "group" }
+  }
+}
diff --git a/public/examples/heatmap.json b/public/examples/heatmap.json
index f814a0a2..fbd7513d 100644
--- a/public/examples/heatmap.json
+++ b/public/examples/heatmap.json
@@ -1,83 +1,25 @@
 {
-    "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
-    "data": {
-        "values": [
-            {
-                "x": 0,
-                "y": 0,
-                "value": -10
-            },
-            {
-                "x": 1,
-                "y": 0,
-                "value": -5
-            },
-            {
-                "x": 2,
-                "y": 0,
-                "value": 0
-            },
-            {
-                "x": 3,
-                "y": 0,
-                "value": 5
-            },
-            {
-                "x": 0,
-                "y": 1,
-                "value": -5
-            },
-            {
-                "x": 1,
-                "y": 1,
-                "value": 0
-            },
-            {
-                "x": 2,
-                "y": 1,
-                "value": 5
-            },
-            {
-                "x": 3,
-                "y": 1,
-                "value": 10
-            },
-            {
-                "x": 0,
-                "y": 2,
-                "value": 0
-            },
-            {
-                "x": 1,
-                "y": 2,
-                "value": 5
-            },
-            {
-                "x": 2,
-                "y": 2,
-                "value": 10
-            },
-            {
-                "x": 3,
-                "y": 2,
-                "value": 15
-            }
-        ]
-    },
-    "mark": "rect",
-    "encoding": {
-        "x": {
-            "field": "x",
-            "type": "ordinal"
-        },
-        "y": {
-            "field": "y",
-            "type": "ordinal"
-        },
-        "color": {
-            "field": "value",
-            "type": "ordinal",
-            "bin": true
-        }
-    }
-}
\ No newline at end of file
+  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
+  "data": {
+    "values": [
+      { "x": 0, "y": 0, "value": -10 },
+      { "x": 1, "y": 0, "value": -5 },
+      { "x": 2, "y": 0, "value": 0 },
+      { "x": 3, "y": 0, "value": 5 },
+      { "x": 0, "y": 1, "value": -5 },
+      { "x": 1, "y": 1, "value": 0 },
+      { "x": 2, "y": 1, "value": 5 },
+      { "x": 3, "y": 1, "value": 10 },
+      { "x": 0, "y": 2, "value": 0 },
+      { "x": 1, "y": 2, "value": 5 },
+      { "x": 2, "y": 2, "value": 10 },
+      { "x": 3, "y": 2, "value": 15 }
+    ]
+  },
+  "mark": "rect",
+  "encoding": {
+    "x": { "field": "x", "type": "ordinal" },
+    "y": { "field": "y", "type": "ordinal" },
+    "color": { "field": "value", "type": "ordinal", "bin": true }
+  }
+}
diff --git a/public/examples/illinois-map.json b/public/examples/illinois-map.json
index 7074f301..8fd222dc 100644
--- a/public/examples/illinois-map.json
+++ b/public/examples/illinois-map.json
@@ -1,71 +1,74 @@
 {
-    "$schema": "https://vega.github.io/schema/vega/v5.json",
-    "width": 250,
-    "height": 250,
-    "autosize": "none",
-    "data": [
+  "$schema": "https://vega.github.io/schema/vega/v5.json",
+  "width": 250,
+  "height": 250,
+  "autosize": "none",
+  "data": [
+    {
+      "name": "counties",
+      "url": "data/us-10m.json",
+      "format": {
+        "type": "topojson",
+        "feature": "counties"
+      },
+      "transform": [
         {
-            "name": "counties",
-            "url": "data/us-10m.json",
-            "format": {
-                "type": "topojson",
-                "feature": "counties"
-            },
-            "transform": [
-                {
-                    "type": "formula",
-                    "expr": "toNumber(datum.id)",
-                    "as": "id2"
-                },
-                {
-                    "type": "filter",
-                    "expr": "datum.id2 > 17000 && datum.id2 < 18000"
-                }
-            ]
-        }
-    ],
-    "projections": [
+          "type": "formula",
+          "expr": "toNumber(datum.id)",
+          "as": "id2"
+        },
         {
-            "name": "projection",
-            "type": "albersUsa",
-            "translate": [
-                -100,
-                180
-            ],
-            "scale": 2500
+          "type": "filter",
+          "expr": "datum.id2 > 17000 && datum.id2 < 18000"
         }
-    ],
-    "scales": [
-        {
-            "name": "color",
-            "type": "ordinal",
-            "domain": {
-                "data": "counties",
-                "field": "id2"
-            },
-            "range": "category"
+      ]
+    }
+  ],
+  "projections": [
+    {
+      "name": "projection",
+      "type": "albersUsa",
+      "translate": [-100, 180],
+      "scale": 2500
+    }
+  ],
+  "scales": [
+    {
+      "name": "color",
+      "type": "ordinal",
+      "domain": {
+        "data": "counties",
+        "field": "id2"
+      },
+      "range": "category"
+    }
+  ],
+  "marks": [
+    {
+      "type": "shape",
+      "from": {
+        "data": "counties"
+      },
+      "encode": {
+        "update": {
+          "fill": {
+            "scale": "color",
+            "field": "id2"
+          },
+          "stroke": {
+            "value": "black"
+          },
+          "strokeWidth": {
+            "value": 1
+          }
         }
-    ],
-    "marks": [
+      },
+      "transform": [
         {
-            "type": "shape",
-            "from": {
-                "data": "counties"
-            },
-            "encode": {
-                "update": {
-                    "fill": {
-                        "scale": "color",
-                        "field": "id2"
-                    }
-                }
-            },
-            "transform": [
-                {
-                    "type": "geoshape",
-                    "projection": "projection"
-                }
-            ]
+          "type": "geoshape",
+          "projection": "projection"
         }
-    ]
-}
\ No newline at end of file
+      ]
+    }
+  ]
+}
diff --git a/public/examples/line-chart.json b/public/examples/line-chart.json
index ec7e7174..63d057cf 100644
--- a/public/examples/line-chart.json
+++ b/public/examples/line-chart.json
@@ -1,26 +1,11 @@
 {
-    "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
-    "description": "Stock prices of 5 Tech Companies over Time.",
-    "data": {
-        "url": "data/stocks.csv"
-    },
-    "mark": {
-        "type": "line",
-        "point": true
-    },
-    "encoding": {
-        "x": {
-            "timeUnit": "year",
-            "field": "date"
-        },
-        "y": {
-            "aggregate": "mean",
-            "field": "price",
-            "type": "quantitative"
-        },
-        "color": {
-            "field": "symbol",
-            "type": "nominal"
-        }
-    }
-}
\ No newline at end of file
+  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
+  "description": "Stock prices of 5 Tech Companies over Time.",
+  "data": { "url": "data/stocks.csv" },
+  "mark": { "type": "line", "point": true },
+  "encoding": {
+    "x": { "timeUnit": "year", "field": "date" },
+    "y": { "aggregate": "mean", "field": "price", "type": "quantitative" },
+    "color": { "field": "symbol", "type": "nominal" }
+  }
+}
diff --git a/public/examples/scatterplot-ordinal.json b/public/examples/scatterplot-ordinal.json
index 0df4a199..cd1ffe6f 100644
--- a/public/examples/scatterplot-ordinal.json
+++ b/public/examples/scatterplot-ordinal.json
@@ -1,32 +1,23 @@
 {
-    "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
-    "data": {
-        "url": "data/penguins.json"
+  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
+  "data": { "url": "data/penguins.json" },
+  "mark": "point",
+  "encoding": {
+    "x": {
+      "field": "Flipper Length (mm)",
+      "type": "quantitative",
+      "scale": { "zero": false }
     },
-    "mark": "point",
-    "encoding": {
-        "x": {
-            "field": "Flipper Length (mm)",
-            "type": "quantitative",
-            "scale": {
-                "zero": false
-            }
-        },
-        "y": {
-            "field": "Body Mass (g)",
-            "type": "quantitative",
-            "scale": {
-                "zero": false
-            }
-        },
-        "color": {
-            "field": "Flipper Length (mm)",
-            "type": "ordinal",
-            "legend": null
-        },
-        "shape": {
-            "field": "Species",
-            "type": "nominal"
-        }
-    }
-}
\ No newline at end of file
+    "y": {
+      "field": "Body Mass (g)",
+      "type": "quantitative",
+      "scale": { "zero": false }
+    },
+    "color": {
+      "field": "Flipper Length (mm)",
+      "type": "ordinal",
+      "legend": null
+    },
+    "shape": { "field": "Species", "type": "nominal" }
+  }
+}
diff --git a/public/examples/scatterplot.json b/public/examples/scatterplot.json
index 9cbccc77..304f0e67 100644
--- a/public/examples/scatterplot.json
+++ b/public/examples/scatterplot.json
@@ -1,34 +1,22 @@
 {
-    "height": 150,
-    "width": 150,
-    "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
-    "description": "A scatterplot showing body mass and flipper lengths of penguins.",
-    "data": {
-        "url": "data/penguins.json"
+  "height": 150,
+  "width": 150,
+  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
+  "description": "A scatterplot showing body mass and flipper lengths of penguins.",
+  "data": { "url": "data/penguins.json" },
+  "mark": "point",
+  "encoding": {
+    "x": {
+      "field": "Flipper Length (mm)",
+      "type": "quantitative",
+      "scale": { "zero": false }
     },
-    "mark": "point",
-    "encoding": {
-        "x": {
-            "field": "Flipper Length (mm)",
-            "type": "quantitative",
-            "scale": {
-                "zero": false
-            }
-        },
-        "y": {
-            "field": "Body Mass (g)",
-            "type": "quantitative",
-            "scale": {
-                "zero": false
-            }
-        },
-        "color": {
-            "field": "Species",
-            "type": "nominal"
-        },
-        "shape": {
-            "field": "Species",
-            "type": "nominal"
-        }
-    }
-}
\ No newline at end of file
+    "y": {
+      "field": "Body Mass (g)",
+      "type": "quantitative",
+      "scale": { "zero": false }
+    },
+    "color": { "field": "Species", "type": "nominal" },
+    "shape": { "field": "Species", "type": "nominal" }
+  }
+}
diff --git a/public/examples/stacked-area-chart.json b/public/examples/stacked-area-chart.json
index 380f7c9f..6dea870e 100644
--- a/public/examples/stacked-area-chart.json
+++ b/public/examples/stacked-area-chart.json
@@ -1,22 +1,10 @@
 {
-    "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
-    "data": {
-        "url": "data/barley.json"
-    },
-    "mark": "bar",
-    "encoding": {
-        "x": {
-            "field": "yield",
-            "type": "quantitative",
-            "aggregate": "sum"
-        },
-        "y": {
-            "field": "variety",
-            "type": "nominal"
-        },
-        "color": {
-            "field": "site",
-            "type": "nominal"
-        }
-    }
-}
\ No newline at end of file
+  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
+  "data": { "url": "data/barley.json" },
+  "mark": "bar",
+  "encoding": {
+    "x": { "field": "yield", "type": "quantitative", "aggregate": "sum" },
+    "y": { "field": "variety", "type": "nominal" },
+    "color": { "field": "site", "type": "nominal" }
+  }
+}
diff --git a/public/lint-schema.json b/public/lint-schema.json
index 2b08d197..b81281f5 100644
--- a/public/lint-schema.json
+++ b/public/lint-schema.json
@@ -267,9 +267,9 @@
               "properties": {
                 "left": { "$ref": "#/definitions/LintRef" },
                 "right": { "$ref": "#/definitions/LintRef" },
-                "similarityThreshold": { "type": "number" }
+                "threshold": { "type": "number" }
               },
-              "required": ["left", "right", "similarityThreshold"]
+              "required": ["left", "right", "threshold"]
             }
           },
           "required": ["similar"]
@@ -292,7 +292,8 @@
               "anyOf": [
                 { "$ref": "#/definitions/LintVariable" },
                 { "type": "array" },
-                { "$ref": "#/definitions/LintMap" }
+                { "$ref": "#/definitions/LintMap" },
+                { "enum": ["colors"] }
               ]
             }
           },
@@ -309,7 +310,8 @@
               "anyOf": [
                 { "$ref": "#/definitions/LintVariable" },
                 { "type": "array" },
-                { "$ref": "#/definitions/LintMap" }
+                { "$ref": "#/definitions/LintMap" },
+                { "enum": ["colors"] }
               ]
             }
           },
diff --git a/src/components/monaco.ts b/src/components/monaco.ts
index 83b7b367..ec9531ac 100644
--- a/src/components/monaco.ts
+++ b/src/components/monaco.ts
@@ -45,7 +45,6 @@ monaco.languages.registerColorProvider("json", {
     for (let i = 0; i < text.length; i++) {
       const is7LenHex = isHexColor(text.slice(i, i + 7));
       if (text[i] === "#" && (is7LenHex || isHexColor(text.slice(i, i + 4)))) {
-        console.log("here", is7LenHex);
         const len = is7LenHex ? 7 : 4;
         const color = chroma(text.slice(i, i + len)).rgb();
         colors.push({
diff --git a/src/lib/linter.ts b/src/lib/linter.ts
index 4c4ec275..f24fbb5c 100644
--- a/src/lib/linter.ts
+++ b/src/lib/linter.ts
@@ -6,7 +6,6 @@ import Discrims from "./lints/size-discrim";
 import Blinds from "./lints/blind-check";
 import ColorSimilarity from "./lints/color-similarity";
 import BackgroundDifferentiability from "./lints/background-differentiability";
-import UglyColors from "./lints/ugly-colors";
 import SequentialOrder from "./lints/sequential-order";
 import DivergingOrder from "./lints/diverging-order";
 import BackgroundContrast from "./lints/contrast";
@@ -28,7 +27,6 @@ export function runLintChecks(
       ...Blinds,
       ColorSimilarity,
       BackgroundDifferentiability,
-      UglyColors,
       SequentialOrder,
       DivergingOrder,
       BackgroundContrast,
diff --git a/src/lib/lints/ugly-colors.ts b/src/lib/lints/ugly-colors.ts
deleted file mode 100644
index 7bfb8dd0..00000000
--- a/src/lib/lints/ugly-colors.ts
+++ /dev/null
@@ -1,40 +0,0 @@
-import { ColorLint } from "./ColorLint";
-import type { TaskType } from "./ColorLint";
-import { Color } from "../Color";
-
-const hexJoin = (colors: Color[]) => colors.map((x) => x.toHex()).join(", ");
-
-const uggos = ["#56FF00", "#0010FF", "#6A7E25", "#FF00EF", "#806E28"];
-const uglyColors = uggos.map((x) => Color.colorFromString(x, "lab"));
-const checkIfAColorIsCloseToAnUglyColor = (colors: Color[]) =>
-  colors.filter((color) =>
-    uglyColors.some((x) => x.symmetricDeltaE(color) < 10)
-  );
-
-export default class UglyColors extends ColorLint<Color[], false> {
-  name = "Palette does not have ugly colors";
-  taskTypes = ["sequential", "diverging", "categorical"] as TaskType[];
-  level: "error" | "warning" = "warning";
-  group = "design";
-  description: string = `Colors that are close to what are known as ugly colors are sometimes advised against. See https://www.colourlovers.com/palette/1416250/The_Ugliest_Colors for more details.`;
-  _runCheck() {
-    const { colors } = this.palette;
-    const data = checkIfAColorIsCloseToAnUglyColor(colors);
-    const passCheck = data.length === 0;
-    return { passCheck, data };
-  }
-  buildMessage(): string {
-    const str = hexJoin(this.checkData);
-    return `This palette has some colors (specifically ${str}) that are close to what are known as ugly colors`;
-  }
-  hasHeuristicFix = true;
-  async suggestFix() {
-    const colors = [...this.palette.colors];
-
-    const uggColors = new Set(
-      checkIfAColorIsCloseToAnUglyColor(colors).map((x) => x.toHex())
-    );
-    const newColors = colors.filter((x) => !uggColors.has(x.toHex()));
-    return [{ ...this.palette, colors: newColors }];
-  }
-}
diff --git a/src/linting/LintCustomizationModal.svelte b/src/linting/LintCustomizationModal.svelte
index 7f465a8e..3f97e616 100644
--- a/src/linting/LintCustomizationModal.svelte
+++ b/src/linting/LintCustomizationModal.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
-  import lintStore, { BUILT_INS } from "../stores/lint-store";
+  import lintStore from "../stores/lint-store";
+  import BUILT_INS from "../stores/built-in-lints";
   import colorStore from "../stores/color-store";
 
   import Modal from "../components/Modal.svelte";
diff --git a/src/stores/built-in-lints.ts b/src/stores/built-in-lints.ts
new file mode 100644
index 00000000..62bf8f1b
--- /dev/null
+++ b/src/stores/built-in-lints.ts
@@ -0,0 +1,79 @@
+import type { CustomLint } from "../lib/lints/CustomLint";
+import type { TaskType } from "../lib/lints/ColorLint";
+import { JSONStringify } from "../lib/utils";
+
+const toString = (x: any) => JSONStringify(JSON.stringify(x));
+const $schema = `${location.href}lint-schema.json`;
+const BUILT_INS: CustomLint[] = [
+  // https://www.sciencedirect.com/science/article/pii/S0167947308005549?casa_token=s8jmZqboaYgAAAAA:7lsAu7YUHVBTQA_eaKJ_3FFGv309684j_NTisGO9mIr3UZNIJ6hlAlxPQo04xzsowG7-dH0vzm4
+  {
+    program: toString({
+      $schema,
+      all: {
+        in: "colors",
+        varb: "a",
+        predicate: {
+          all: {
+            in: ["#000000", "#ffffff"],
+            varb: "b",
+            predicate: {
+              not: { similar: { left: "a", right: "b", threshold: 12 } },
+            },
+          },
+        },
+      },
+    }),
+    name: "Avoid extreme colors",
+    taskTypes: ["sequential", "diverging", "categorical"] as TaskType[],
+    level: "warning",
+    group: "design",
+    description: `Colors at either end of the lightness spectrum can be hard to discriminate in some contexts, and are sometimes advised against.`,
+    failMessage: `Colors at either end of the lightness spectrum {{blame}} are hard to discriminate in some contexts, and are sometimes advised against`,
+    id: "extreme-colors-built-in",
+  },
+  {
+    name: "Avoid too many colors",
+    program: toString({
+      $schema,
+      "<": { left: { count: "colors" }, right: 10 },
+    }),
+    taskTypes: ["sequential", "diverging", "categorical"] as TaskType[],
+    level: "warning",
+    group: "design",
+    description:
+      "Palettes should have a maximum number of colors. Higher numbers of colors can make it hard to identify specific values.",
+    failMessage: `This palette has too many colors and may be hard to discriminate in some contexts. Maximum: 10.`,
+    id: "too-many-colors-built-in",
+  },
+  {
+    name: "Palette does not have ugly colors",
+    program: toString({
+      $schema,
+      all: {
+        in: "colors",
+        varb: "a",
+        predicate: {
+          all: {
+            in: ["#56FF00", "#0010FF", "#6A7E25", "#FF00EF", "#806E28"],
+            varb: "b",
+            predicate: {
+              ">": {
+                left: { deltaE: { left: "a", right: "b" }, algorithm: "2000" },
+
+                right: 10,
+              },
+            },
+          },
+        },
+      },
+    }),
+    taskTypes: ["categorical"],
+    description: `!!Colors that are close to what are known as ugly colors are sometimes advised against. See https://www.colourlovers.com/palette/1416250/The_Ugliest_Colors for more details.`,
+    failMessage: `This palette has some colors (specifically {{blame}}) that are close to what are known as ugly colors`,
+    level: "warning",
+    group: "design",
+    id: "ugly-colors-built-in",
+  },
+];
+
+export default BUILT_INS;
diff --git a/src/stores/lint-store.ts b/src/stores/lint-store.ts
index 8c602793..8b04925a 100644
--- a/src/stores/lint-store.ts
+++ b/src/stores/lint-store.ts
@@ -3,6 +3,7 @@ import * as idb from "idb-keyval";
 import type { CustomLint } from "../lib/lints/CustomLint";
 import type { TaskType } from "../lib/lints/ColorLint";
 import { JSONStringify } from "../lib/utils";
+import BUILT_INS from "./built-in-lints";
 
 interface StoreData {
   lints: CustomLint[];
@@ -14,52 +15,10 @@ const InitialStore: StoreData = {
   focusedLint: false,
 };
 
-export const BUILT_INS: CustomLint[] = [
-  // https://www.sciencedirect.com/science/article/pii/S0167947308005549?casa_token=s8jmZqboaYgAAAAA:7lsAu7YUHVBTQA_eaKJ_3FFGv309684j_NTisGO9mIr3UZNIJ6hlAlxPQo04xzsowG7-dH0vzm4
-  {
-    program: JSONStringify(
-      JSON.stringify({
-        $schema: `${location.href}lint-schema.json`,
-        all: {
-          in: "colors",
-          varb: "a",
-          predicate: {
-            all: {
-              in: ["#000000", "#ffffff"],
-              varb: "b",
-              predicate: {
-                not: { similar: { left: "a", right: "b", threshold: 12 } },
-              },
-            },
-          },
-        },
-      })
-    ),
-    name: "Avoid extreme colors",
-    taskTypes: ["sequential", "diverging", "categorical"] as TaskType[],
-    level: "warning",
-    group: "design",
-    description: `Colors at either end of the lightness spectrum can be hard to discriminate in some contexts, and are sometimes advised against.`,
-    failMessage: `Colors at either end of the lightness spectrum {{blame}} are hard to discriminate in some contexts, and are sometimes advised against`,
-    id: "extreme-colors-built-in",
-  },
-  {
-    program: JSONStringify(
-      JSON.stringify({
-        $schema: `${location.href}lint-schema.json`,
-        "<": { left: { count: "colors" }, right: 10 },
-      })
-    ),
-    name: "Avoid too many colors",
-    taskTypes: ["sequential", "diverging", "categorical"] as TaskType[],
-    level: "warning",
-    group: "design",
-    description:
-      "Palettes should have a maximum number of colors. Higher numbers of colors can make it hard to identify specific values.",
-    failMessage: `This palette has too many colors and may be hard to discriminate in some contexts. Maximum: 10.`,
-    id: "too-many-colors-built-in",
-  },
-];
+const builtInIndex = BUILT_INS.reduce((acc, x) => {
+  acc[x.id] = x;
+  return acc;
+}, {} as Record<string, CustomLint>);
 
 const storeName = "color-pal-lints";
 function createStore() {
@@ -67,11 +26,15 @@ function createStore() {
 
   const { subscribe, set, update } = writable<StoreData>(storeData);
   idb.get(storeName).then((x) => {
-    if (x) {
-      set({ ...x, lints: x.lints || [] } as StoreData);
-    } else {
-      set({ ...InitialStore, lints: BUILT_INS });
-    }
+    let storeBase = { ...InitialStore, ...x };
+    let lints = (storeBase.lints || []).map(
+      (x: CustomLint) => builtInIndex[x.id] || x
+    ) as CustomLint[];
+    const missingBuiltIns = BUILT_INS.filter(
+      (x) => !lints.find((y) => y.id === x.id)
+    );
+    console.log(missingBuiltIns, "missingBuiltIns", BUILT_INS);
+    set({ ...storeBase, lints: [...lints, ...missingBuiltIns] });
   });
   const persistUpdate = (updateFunc: (old: StoreData) => StoreData) =>
     update((oldStore) => {