allow light-dark()

Author: mbostock

src/options.js

@@ -547,7 +547,7 @@ export function isColor(value) {
   value = value.toLowerCase().trim();
   return (
     /^#[0-9a-f]{3,8}$/.test(value) || // hex rgb, rgba, rrggbb, rrggbbaa
-    /^(?:url|var|rgb|rgba|hsl|hsla|hwb|lab|lch|oklab|oklch|color|color-mix)\(.*\)$/.test(value) || // <funciri>, CSS variable, color, etc.
+    /^(?:url|var|rgb|rgba|hsl|hsla|hwb|lab|lch|oklab|oklch|color|color-mix|light-dark)\(.*\)$/.test(value) || // <funciri>, CSS variable, color, etc.
     namedColors.has(value) // currentColor, red, etc.
   );
 }

test/output/lightDark.svg

@@ -155,6 +155,7 @@ import "./letter-frequency-dot.js";
 import "./letter-frequency-lollipop.js";
 import "./letter-frequency-wheel.js";
 import "./libor-projections.js";
+import "./light-dark.js";
 import "./likert-survey.js";
 import "./linear-regression-cars.js";
 import "./linear-regression-mtcars.js";

test/plots/index.ts

@@ -0,0 +1,10 @@
+import * as Plot from "@observablehq/plot";
+import * as d3 from "d3";
+import {test} from "test/plot";
+
+test(async function lightDark() {
+  const alphabet = await d3.csv<any>("data/alphabet.csv", d3.autoType);
+  return Plot.plot({
+    marks: [Plot.barX(alphabet, {x: "frequency", y: "letter", fill: "light-dark(steelblue, orange)", sort: {y: "-x"}})]
+  });
+});