allow light-dark() (#2412)

* allow light-dark()

* set color-scheme in root

* light-dark() for box, tree

* pranier

* test the defaults for treeLink and treeNode

* prandier

---------

Co-authored-by: Philippe Rivière <fil@rezo.net>

Author: mbostock

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,

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.
   );
 }

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,