light-dark() for box, tree

mbostock · mbostock · commit aa70d2112f43 · 2026-04-06T08:46:15.000-04:00
diff --git 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/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
@@ -36,7 +36,7 @@
   <g aria-label="rule" stroke="currentColor" transform="translate(0,0.5)">
     <line x1="277.143" x2="448.571" y1="15" y2="15"></line>
   </g>
-  <g aria-label="bar" fill="color-mix(in srgb, currentColor 20%, var(--plot-background))">
+  <g aria-label="bar" fill="light-dark(#ccc, #555)">
     <rect x="337.143" width="94.286" y="0" height="30"></rect>
   </g>
   <g aria-label="tick" stroke="currentColor" stroke-width="2" transform="translate(0.5,0)">
diff --git a/test/output/boxplotFacetInterval.svg b/test/output/boxplotFacetInterval.svg
@@ -117,37 +117,37 @@
     </g>
   </g>
   <g aria-label="bar">
-    <g fill="color-mix(in srgb, currentColor 20%, var(--plot-background))" transform="translate(0,1)">
+    <g fill="light-dark(#ccc, #555)" transform="translate(0,1)">
       <rect x="277.842" width="0" y="20" height="19"></rect>
     </g>
-    <g fill="color-mix(in srgb, currentColor 20%, var(--plot-background))" transform="translate(0,22)">
+    <g fill="light-dark(#ccc, #555)" transform="translate(0,22)">
       <rect x="334.173" width="56.331" y="20" height="19"></rect>
     </g>
-    <g fill="color-mix(in srgb, currentColor 20%, var(--plot-background))" transform="translate(0,43)">
+    <g fill="light-dark(#ccc, #555)" transform="translate(0,43)">
       <rect x="302.878" width="58.417" y="20" height="19"></rect>
     </g>
-    <g fill="color-mix(in srgb, currentColor 20%, var(--plot-background))" transform="translate(0,64)">
+    <g fill="light-dark(#ccc, #555)" transform="translate(0,64)">
       <rect x="256.978" width="58.417" y="20" height="19"></rect>
     </g>
-    <g fill="color-mix(in srgb, currentColor 20%, var(--plot-background))" transform="translate(0,85)">
+    <g fill="light-dark(#ccc, #555)" transform="translate(0,85)">
       <rect x="215.252" width="50.072" y="20" height="19"></rect>
     </g>
-    <g fill="color-mix(in srgb, currentColor 20%, var(--plot-background))" transform="translate(0,106)">
+    <g fill="light-dark(#ccc, #555)" transform="translate(0,106)">
       <rect x="169.353" width="45.899" y="20" height="19"></rect>
     </g>
-    <g fill="color-mix(in srgb, currentColor 20%, var(--plot-background))" transform="translate(0,127)">
+    <g fill="light-dark(#ccc, #555)" transform="translate(0,127)">
       <rect x="135.971" width="37.554" y="20" height="19"></rect>
     </g>
-    <g fill="color-mix(in srgb, currentColor 20%, var(--plot-background))" transform="translate(0,148)">
+    <g fill="light-dark(#ccc, #555)" transform="translate(0,148)">
       <rect x="110.935" width="37.554" y="20" height="19"></rect>
     </g>
-    <g fill="color-mix(in srgb, currentColor 20%, var(--plot-background))" transform="translate(0,169)">
+    <g fill="light-dark(#ccc, #555)" transform="translate(0,169)">
       <rect x="75.468" width="35.468" y="20" height="19"></rect>
     </g>
-    <g fill="color-mix(in srgb, currentColor 20%, var(--plot-background))" transform="translate(0,190)">
+    <g fill="light-dark(#ccc, #555)" transform="translate(0,190)">
       <rect x="71.295" width="66.763" y="20" height="19"></rect>
     </g>
-    <g fill="color-mix(in srgb, currentColor 20%, var(--plot-background))" transform="translate(0,211)">
+    <g fill="light-dark(#ccc, #555)" transform="translate(0,211)">
       <rect x="106.763" width="0" y="20" height="19"></rect>
     </g>
   </g>
diff --git a/test/output/boxplotFacetNegativeInterval.svg b/test/output/boxplotFacetNegativeInterval.svg
@@ -117,37 +117,37 @@
     </g>
   </g>
   <g aria-label="bar">
-    <g fill="color-mix(in srgb, currentColor 20%, var(--plot-background))" transform="translate(0,1)">
+    <g fill="light-dark(#ccc, #555)" transform="translate(0,1)">
       <rect x="277.842" width="0" y="20" height="19"></rect>
     </g>
-    <g fill="color-mix(in srgb, currentColor 20%, var(--plot-background))" transform="translate(0,22)">
+    <g fill="light-dark(#ccc, #555)" transform="translate(0,22)">
       <rect x="334.173" width="56.331" y="20" height="19"></rect>
     </g>
-    <g fill="color-mix(in srgb, currentColor 20%, var(--plot-background))" transform="translate(0,43)">
+    <g fill="light-dark(#ccc, #555)" transform="translate(0,43)">
       <rect x="302.878" width="58.417" y="20" height="19"></rect>
     </g>
-    <g fill="color-mix(in srgb, currentColor 20%, var(--plot-background))" transform="translate(0,64)">
+    <g fill="light-dark(#ccc, #555)" transform="translate(0,64)">
       <rect x="256.978" width="58.417" y="20" height="19"></rect>
     </g>
-    <g fill="color-mix(in srgb, currentColor 20%, var(--plot-background))" transform="translate(0,85)">
+    <g fill="light-dark(#ccc, #555)" transform="translate(0,85)">
       <rect x="215.252" width="50.072" y="20" height="19"></rect>
     </g>
-    <g fill="color-mix(in srgb, currentColor 20%, var(--plot-background))" transform="translate(0,106)">
+    <g fill="light-dark(#ccc, #555)" transform="translate(0,106)">
       <rect x="169.353" width="45.899" y="20" height="19"></rect>
     </g>
-    <g fill="color-mix(in srgb, currentColor 20%, var(--plot-background))" transform="translate(0,127)">
+    <g fill="light-dark(#ccc, #555)" transform="translate(0,127)">
       <rect x="135.971" width="37.554" y="20" height="19"></rect>
     </g>
-    <g fill="color-mix(in srgb, currentColor 20%, var(--plot-background))" transform="translate(0,148)">
+    <g fill="light-dark(#ccc, #555)" transform="translate(0,148)">
       <rect x="110.935" width="37.554" y="20" height="19"></rect>
     </g>
-    <g fill="color-mix(in srgb, currentColor 20%, var(--plot-background))" transform="translate(0,169)">
+    <g fill="light-dark(#ccc, #555)" transform="translate(0,169)">
       <rect x="75.468" width="35.468" y="20" height="19"></rect>
     </g>
-    <g fill="color-mix(in srgb, currentColor 20%, var(--plot-background))" transform="translate(0,190)">
+    <g fill="light-dark(#ccc, #555)" transform="translate(0,190)">
       <rect x="71.295" width="66.763" y="20" height="19"></rect>
     </g>
-    <g fill="color-mix(in srgb, currentColor 20%, var(--plot-background))" transform="translate(0,211)">
+    <g fill="light-dark(#ccc, #555)" transform="translate(0,211)">
       <rect x="106.763" width="0" y="20" height="19"></rect>
     </g>
   </g>
diff --git a/test/output/diamondsBoxplot.svg b/test/output/diamondsBoxplot.svg
@@ -71,7 +71,7 @@
     <line x1="40.596" x2="334.782" y1="146" y2="146"></line>
     <line x1="41.348" x2="173.892" y1="26" y2="26"></line>
   </g>
-  <g aria-label="bar" fill="color-mix(in srgb, currentColor 20%, var(--plot-background))">
+  <g aria-label="bar" fill="light-dark(#ccc, #555)">
     <rect x="100.769" width="110.163" y="166" height="18"></rect>
     <rect x="63.925" width="130.474" y="126" height="18"></rect>
     <rect x="57.246" width="161.392" y="86" height="18"></rect>
diff --git a/test/output/greekGodsExplicit.svg b/test/output/greekGodsExplicit.svg
@@ -32,7 +32,7 @@
     <circle cx="519" cy="289.25" r="3" fill="#bdbdbd"></circle>
     <circle cx="519" cy="379" r="3" fill="#bdbdbd"></circle>
   </g>
-  <g aria-label="text" stroke="white" stroke-width="3" stroke-linejoin="round" paint-order="stroke" text-anchor="start" transform="translate(6.5,0.5)">
+  <g aria-label="text" stroke="var(--plot-background)" stroke-width="3" stroke-linejoin="round" paint-order="stroke" text-anchor="start" transform="translate(6.5,0.5)">
     <text y="0.32em" transform="translate(10,154.625)">Chaos</text>
     <text y="0.32em" transform="translate(264.5,20)">Eros</text>
     <text y="0.32em" transform="translate(264.5,109.75)">Erebus</text>
diff --git a/test/output/internFacetNaN.svg b/test/output/internFacetNaN.svg
@@ -226,47 +226,47 @@
     </g>
   </g>
   <g aria-label="bar">
-    <g fill="color-mix(in srgb, currentColor 20%, var(--plot-background))" transform="translate(0,1)">
+    <g fill="light-dark(#ccc, #555)" transform="translate(0,1)">
       <rect x="104.46" width="0" y="22" height="15"></rect>
     </g>
-    <g fill="color-mix(in srgb, currentColor 20%, var(--plot-background))" transform="translate(0,42)">
+    <g fill="light-dark(#ccc, #555)" transform="translate(0,42)">
       <rect x="70.216" width="64.46" y="22" height="15"></rect>
     </g>
-    <g fill="color-mix(in srgb, currentColor 20%, var(--plot-background))" transform="translate(0,83)">
+    <g fill="light-dark(#ccc, #555)" transform="translate(0,83)">
       <rect x="72.23" width="32.23" y="22" height="15"></rect>
       <rect x="142.734" width="4.029" y="39" height="15"></rect>
     </g>
-    <g fill="color-mix(in srgb, currentColor 20%, var(--plot-background))" transform="translate(0,124)">
+    <g fill="light-dark(#ccc, #555)" transform="translate(0,124)">
       <rect x="108.489" width="32.23" y="22" height="15"></rect>
       <rect x="140.719" width="32.23" y="39" height="15"></rect>
     </g>
-    <g fill="color-mix(in srgb, currentColor 20%, var(--plot-background))" transform="translate(0,165)">
+    <g fill="light-dark(#ccc, #555)" transform="translate(0,165)">
       <rect x="128.633" width="36.259" y="22" height="15"></rect>
       <rect x="148.777" width="40.288" y="39" height="15"></rect>
     </g>
-    <g fill="color-mix(in srgb, currentColor 20%, var(--plot-background))" transform="translate(0,206)">
+    <g fill="light-dark(#ccc, #555)" transform="translate(0,206)">
       <rect x="176.978" width="44.317" y="39" height="15"></rect>
       <rect x="156.835" width="36.259" y="22" height="15"></rect>
     </g>
-    <g fill="color-mix(in srgb, currentColor 20%, var(--plot-background))" transform="translate(0,247)">
+    <g fill="light-dark(#ccc, #555)" transform="translate(0,247)">
       <rect x="213.237" width="48.345" y="39" height="15"></rect>
       <rect x="193.094" width="36.259" y="22" height="15"></rect>
     </g>
-    <g fill="color-mix(in srgb, currentColor 20%, var(--plot-background))" transform="translate(0,288)">
+    <g fill="light-dark(#ccc, #555)" transform="translate(0,288)">
       <rect x="253.525" width="56.403" y="39" height="15"></rect>
       <rect x="213.237" width="48.345" y="22" height="15"></rect>
     </g>
-    <g fill="color-mix(in srgb, currentColor 20%, var(--plot-background))" transform="translate(0,329)">
+    <g fill="light-dark(#ccc, #555)" transform="translate(0,329)">
       <rect x="293.813" width="56.403" y="39" height="15"></rect>
       <rect x="229.353" width="64.46" y="22" height="15"></rect>
     </g>
-    <g fill="color-mix(in srgb, currentColor 20%, var(--plot-background))" transform="translate(0,370)">
+    <g fill="light-dark(#ccc, #555)" transform="translate(0,370)">
       <rect x="324.029" width="54.388" y="39" height="15"></rect>
     </g>
-    <g fill="color-mix(in srgb, currentColor 20%, var(--plot-background))" transform="translate(0,411)">
+    <g fill="light-dark(#ccc, #555)" transform="translate(0,411)">
       <rect x="269.64" width="0" y="39" height="15"></rect>
     </g>
-    <g fill="color-mix(in srgb, currentColor 20%, var(--plot-background))" transform="translate(0,452)">
+    <g fill="light-dark(#ccc, #555)" transform="translate(0,452)">
       <rect x="158.849" width="76.547" y="39" height="15"></rect>
       <rect x="125.612" width="97.698" y="22" height="15"></rect>
     </g>
diff --git a/test/output/morleyBoxplot.svg b/test/output/morleyBoxplot.svg
@@ -73,7 +73,7 @@
     <line x1="172.222" x2="424.667" y1="87" y2="87"></line>
     <line x1="197.467" x2="462.533" y1="108" y2="108"></line>
   </g>
-  <g aria-label="bar" fill="color-mix(in srgb, currentColor 20%, var(--plot-background))">
+  <g aria-label="bar" fill="light-dark(#ccc, #555)">
     <rect x="336.311" width="164.089" y="24" height="19"></rect>
     <rect x="273.2" width="107.289" y="45" height="19"></rect>
     <rect x="323.689" width="50.489" y="66" height="19"></rect>
diff --git a/test/output/shorthandBoxX.svg b/test/output/shorthandBoxX.svg
@@ -30,7 +30,7 @@
   <g aria-label="rule" stroke="currentColor" transform="translate(0,0.5)">
     <line x1="20" x2="620" y1="15" y2="15"></line>
   </g>
-  <g aria-label="bar" fill="color-mix(in srgb, currentColor 20%, var(--plot-background))">
+  <g aria-label="bar" fill="light-dark(#ccc, #555)">
     <rect x="309.059" width="232.396" y="0" height="30"></rect>
   </g>
   <g aria-label="tick" stroke="currentColor" stroke-width="2" transform="translate(0.5,0)">
diff --git a/test/plots/greek-gods.ts b/test/plots/greek-gods.ts
@@ -55,7 +55,7 @@ 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: " "}))
     ]
   });
 });
