From 407e3c4fca8a6adbd44e2e604cc03afb12c9daef Mon Sep 17 00:00:00 2001 From: Mike Bostock Date: Sun, 5 Apr 2026 20:17:07 -0400 Subject: [PATCH 1/6] allow light-dark() --- src/options.js | 2 +- test/output/lightDark.svg | 124 ++++++++++++++++++++++++++++++++++++++ test/plots/index.ts | 1 + test/plots/light-dark.ts | 10 +++ 4 files changed, 136 insertions(+), 1 deletion(-) create mode 100644 test/output/lightDark.svg create mode 100644 test/plots/light-dark.ts diff --git a/src/options.js b/src/options.js index cdd6868639..51043a854e 100644 --- a/src/options.js +++ b/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) || // , CSS variable, color, etc. + /^(?:url|var|rgb|rgba|hsl|hsla|hwb|lab|lch|oklab|oklch|color|color-mix|light-dark)\(.*\)$/.test(value) || // , CSS variable, color, etc. namedColors.has(value) // currentColor, red, etc. ); } diff --git a/test/output/lightDark.svg b/test/output/lightDark.svg new file mode 100644 index 0000000000..7077032cef --- /dev/null +++ b/test/output/lightDark.svg @@ -0,0 +1,124 @@ + + + + + E + T + A + O + I + N + S + H + R + D + L + C + U + M + W + F + G + Y + P + B + V + K + J + X + Q + Z + + + letter + + + + 0.00 + 0.02 + 0.04 + 0.06 + 0.08 + 0.10 + 0.12 + + + frequency → + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/test/plots/index.ts b/test/plots/index.ts index d025972b51..4208b09f72 100644 --- a/test/plots/index.ts +++ b/test/plots/index.ts @@ -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"; diff --git a/test/plots/light-dark.ts b/test/plots/light-dark.ts new file mode 100644 index 0000000000..fcba65c5d9 --- /dev/null +++ b/test/plots/light-dark.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("data/alphabet.csv", d3.autoType); + return Plot.plot({ + marks: [Plot.barX(alphabet, {x: "frequency", y: "letter", fill: "light-dark(steelblue, orange)", sort: {y: "-x"}})] + }); +}); From 41d0c31a8134a5e365f3e38e6cf0f02c06db57af Mon Sep 17 00:00:00 2001 From: Mike Bostock Date: Sun, 5 Apr 2026 21:46:35 -0400 Subject: [PATCH 2/6] set color-scheme in root --- test/plots/index.html | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/test/plots/index.html b/test/plots/index.html index b01a02b9ed..f112d6b6f2 100644 --- a/test/plots/index.html +++ b/test/plots/index.html @@ -3,6 +3,10 @@ + + + + + + + + + + + + + + + + + + + + + Chaos/Eros + Chaos/Erebus + Chaos/Tartarus + Chaos/Gaia/Mountains + Chaos/Gaia/Pontus + Chaos/Gaia/Uranus + + \ No newline at end of file diff --git a/test/plots/greek-gods.ts b/test/plots/greek-gods.ts index 839c8fa54d..2caab4cc0e 100644 --- a/test/plots/greek-gods.ts +++ b/test/plots/greek-gods.ts @@ -20,6 +20,29 @@ Chaos Tartarus` }); }); +test(async function greekGodsDefaults() { + const gods = `Chaos Gaia Mountains +Chaos Gaia Pontus +Chaos Gaia Uranus +Chaos Eros +Chaos Erebus +Chaos Tartarus` + .split("\n") + .map((d) => d.replace(/\s+/g, "/")); + return Plot.plot({ + axis: null, + insetLeft: 35, + insetTop: 20, + insetBottom: 20, + insetRight: 120, + marks: [ + Plot.link(gods, Plot.treeLink()), + Plot.dot(gods, Plot.treeNode()), + Plot.text(gods, Plot.treeNode()) + ] + }); +}); + test(async function greekGodsTip() { const gods = `Chaos Gaia Mountains Chaos Gaia Pontus From 82860de018c5e826dfffc373b1e52e021a319449 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Philippe=20Rivi=C3=A8re?= Date: Mon, 6 Apr 2026 15:40:11 +0200 Subject: [PATCH 6/6] prandier --- test/plots/greek-gods.ts | 6 +----- 1 file changed, 1 insertion(+), 5 deletions(-) diff --git a/test/plots/greek-gods.ts b/test/plots/greek-gods.ts index 2caab4cc0e..c6924e6107 100644 --- a/test/plots/greek-gods.ts +++ b/test/plots/greek-gods.ts @@ -35,11 +35,7 @@ Chaos Tartarus` insetTop: 20, insetBottom: 20, insetRight: 120, - marks: [ - Plot.link(gods, Plot.treeLink()), - Plot.dot(gods, Plot.treeNode()), - Plot.text(gods, Plot.treeNode()) - ] + marks: [Plot.link(gods, Plot.treeLink()), Plot.dot(gods, Plot.treeNode()), Plot.text(gods, Plot.treeNode())] }); });