diff --git a/src/marks/box.js b/src/marks/box.js index 49e8d8fb4b..711ab46a69 100644 --- a/src/marks/box.js +++ b/src/marks/box.js @@ -16,7 +16,7 @@ export function boxX( x = identity, y = null, r, - fill = "color-mix(in srgb, currentColor 20%, var(--plot-background))", + fill = "light-dark(#ccc, #555)", fillOpacity, stroke = "currentColor", strokeOpacity, @@ -42,7 +42,7 @@ export function boxY( y = identity, x = null, r, - fill = "color-mix(in srgb, currentColor 20%, var(--plot-background))", + fill = "light-dark(#ccc, #555)", fillOpacity, stroke = "currentColor", strokeOpacity, 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/src/transforms/tree.js b/src/transforms/tree.js index 6ec9ab6d1d..595f186ddb 100644 --- a/src/transforms/tree.js +++ b/src/transforms/tree.js @@ -65,7 +65,7 @@ export function treeLink({ path = identity, // the delimited path delimiter, // how the path is separated curve = "bump-x", - stroke = "color-mix(in srgb, currentColor 33%, var(--plot-background))", + stroke = "light-dark(#777, #aaa)", strokeWidth = 1.5, strokeOpacity = 0.5, treeLayout = tree, diff --git a/test/output/boxplot.svg b/test/output/boxplot.svg index c6038ec2f8..1875deef9c 100644 --- a/test/output/boxplot.svg +++ b/test/output/boxplot.svg @@ -36,7 +36,7 @@ - + diff --git a/test/output/boxplotFacetInterval.svg b/test/output/boxplotFacetInterval.svg index 04e1bd99ab..ab76fd2ad7 100644 --- a/test/output/boxplotFacetInterval.svg +++ b/test/output/boxplotFacetInterval.svg @@ -117,37 +117,37 @@ - + - + - + - + - + - + - + - + - + - + - + diff --git a/test/output/boxplotFacetNegativeInterval.svg b/test/output/boxplotFacetNegativeInterval.svg index 04e1bd99ab..ab76fd2ad7 100644 --- a/test/output/boxplotFacetNegativeInterval.svg +++ b/test/output/boxplotFacetNegativeInterval.svg @@ -117,37 +117,37 @@ - + - + - + - + - + - + - + - + - + - + - + diff --git a/test/output/diamondsBoxplot.svg b/test/output/diamondsBoxplot.svg index 64123e028f..8e67c3989c 100644 --- a/test/output/diamondsBoxplot.svg +++ b/test/output/diamondsBoxplot.svg @@ -71,7 +71,7 @@ - + diff --git a/test/output/greekGodsDefaults.svg b/test/output/greekGodsDefaults.svg new file mode 100644 index 0000000000..398e275165 --- /dev/null +++ b/test/output/greekGodsDefaults.svg @@ -0,0 +1,43 @@ + + + + + + + + + + + + + + + + + + + + + + + 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/output/greekGodsExplicit.svg b/test/output/greekGodsExplicit.svg index 493f74eace..6fd13418f3 100644 --- a/test/output/greekGodsExplicit.svg +++ b/test/output/greekGodsExplicit.svg @@ -32,7 +32,7 @@ - + Chaos Eros Erebus diff --git a/test/output/internFacetNaN.svg b/test/output/internFacetNaN.svg index 1c8c3e302f..c1a9f0756c 100644 --- a/test/output/internFacetNaN.svg +++ b/test/output/internFacetNaN.svg @@ -226,47 +226,47 @@ - + - + - + - + - + - + - + - + - + - + - + - + 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/output/morleyBoxplot.svg b/test/output/morleyBoxplot.svg index 50ea149391..4f49f3e47a 100644 --- a/test/output/morleyBoxplot.svg +++ b/test/output/morleyBoxplot.svg @@ -73,7 +73,7 @@ - + diff --git a/test/output/shorthandBoxX.svg b/test/output/shorthandBoxX.svg index 5566cecfe4..f6119ee0ab 100644 --- a/test/output/shorthandBoxX.svg +++ b/test/output/shorthandBoxX.svg @@ -30,7 +30,7 @@ - + diff --git a/test/plots/greek-gods.ts b/test/plots/greek-gods.ts index 746e30a803..c6924e6107 100644 --- a/test/plots/greek-gods.ts +++ b/test/plots/greek-gods.ts @@ -20,6 +20,25 @@ 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 @@ -55,7 +74,16 @@ Chaos Tartarus`.split("\n"); marks: [ Plot.link(gods, Plot.treeLink({stroke: "node:internal", delimiter: " "})), Plot.dot(gods, Plot.treeNode({fill: "node:internal", delimiter: " "})), - Plot.text(gods, Plot.treeNode({text: "node:name", stroke: "white", fill: "currentColor", dx: 6, delimiter: " "})) + Plot.text( + gods, + Plot.treeNode({ + text: "node:name", + stroke: "var(--plot-background)", + fill: "currentColor", + dx: 6, + delimiter: " " + }) + ) ] }); }); 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 @@