remove default white background (observablehq#1489)

* remove default white background

* var(--plot-background) (observablehq#1513)

* dark mode for dev

* dev dark mode

Author: mbostock

docs/.vitepress/theme/custom.css

@@ -40,12 +40,16 @@
 
 .vp-doc .plot,
 .vp-doc .plot-ramp {
-  background: none;
+  --plot-background: var(--vp-c-bg);
   overflow: visible;
   position: relative;
   z-index: 1;
 }
 
+.vp-doc .plot [aria-label="tip"] {
+  --plot-background: var(--vp-c-bg-alt);
+}
+
 .vp-doc .plot-figure {
   margin: 16px 0 0;
 }
@@ -71,20 +75,6 @@
   text-decoration: initial;
 }
 
-:root [aria-label="tip"][fill="white"],
-:root [aria-label="tip"] [fill="white"] {
-  fill: var(--vp-c-bg-alt);
-}
-
-:root.dark marker[stroke="white"],
-:root.dark [aria-label^="crosshair"][stroke="white"] {
-  stroke: var(--vp-c-bg);
-}
-
-:root.dark marker[fill="white"] {
-  fill: var(--vp-c-bg);
-}
-
 .vp-doc :not(pre) > code {
   line-height: 1.5;
 }

docs/features/plots.md

@@ -266,7 +266,7 @@ Plot.plot({
 ```
 :::
 
-The **style** option allows custom styles to override Plot’s defaults. It may be specified either as a string of inline styles (*e.g.*, `"color: red;"`, in the same fashion as assigning [*element*.style](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/style)) or an object of properties (*e.g.*, `{color: "red"}`, in the same fashion as assigning [*element*.style properties](https://developer.mozilla.org/en-US/docs/Web/API/CSSStyleDeclaration)). By default, the returned plot has a white background, a max-width of 100%, and the system-ui font. Plot’s marks and axes default to [currentColor](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value#currentcolor_keyword), meaning that they will inherit the surrounding content’s color.
+The **style** option allows custom styles to override Plot’s defaults. It may be specified either as a string of inline styles (*e.g.*, `"color: red;"`, in the same fashion as assigning [*element*.style](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/style)) or an object of properties (*e.g.*, `{color: "red"}`, in the same fashion as assigning [*element*.style properties](https://developer.mozilla.org/en-US/docs/Web/API/CSSStyleDeclaration)). By default, the returned plot has a max-width of 100%, and the system-ui font. Plot’s marks and axes default to [currentColor](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value#currentcolor_keyword), meaning that they will inherit the surrounding content’s color.
 
 :::warning CAUTION
 Unitless numbers ([quirky lengths](https://www.w3.org/TR/css-values-4/#deprecated-quirky-length)) such as `{padding: 20}` are not supported by some browsers; you should instead specify a string with units such as `{padding: "20px"}`.

src/legends/ramp.js

@@ -40,7 +40,6 @@ export function legendRamp(color, options) {
       svg.append("style").text(
         `.${className}-ramp {
   display: block;
-  background: white;
   height: auto;
   height: intrinsic;
   max-width: 100%;

src/marker.js

@@ -61,7 +61,7 @@ function markerCircleFill(color, context) {
     .attr("markerWidth", 6.67)
     .attr("markerHeight", 6.67)
     .attr("fill", color)
-    .attr("stroke", "white")
+    .attr("stroke", "var(--plot-background)")
     .attr("stroke-width", 1.5)
     .call((marker) => marker.append("circle").attr("r", 3))
     .node();
@@ -72,7 +72,7 @@ function markerCircleStroke(color, context) {
     .attr("viewBox", "-5 -5 10 10")
     .attr("markerWidth", 6.67)
     .attr("markerHeight", 6.67)
-    .attr("fill", "white")
+    .attr("fill", "var(--plot-background)")
     .attr("stroke", color)
     .attr("stroke-width", 1.5)
     .call((marker) => marker.append("circle").attr("r", 3))

src/marks/crosshair.js

@@ -85,7 +85,7 @@ function textOptions(k, pointerOptions, options) {
     color = "currentColor",
     textFill: fill = color,
     textFillOpacity: fillOpacity,
-    textStroke: stroke = "white",
+    textStroke: stroke = "var(--plot-background)",
     textStrokeOpacity: strokeOpacity,
     textStrokeWidth: strokeWidth = 5
   } = options;

src/marks/tip.js

@@ -14,7 +14,7 @@ import {cut, clipper, splitter, maybeTextOverflow} from "./text.js";
 
 const defaults = {
   ariaLabel: "tip",
-  fill: "white",
+  fill: "var(--plot-background)",
   stroke: "currentColor"
 };
 

src/marks/tree.js

@@ -24,7 +24,7 @@ export function tree(
     markerEnd = marker,
     dot: dotDot = isNoneish(markerStart) && isNoneish(markerEnd),
     text: textText = "node:name",
-    textStroke = "white",
+    textStroke = "var(--plot-background)",
     title = "node:path",
     dx,
     dy,

src/plot.d.ts

@@ -82,17 +82,9 @@ export interface PlotOptions extends ScaleDefaults {
    * properties][2]). Note that unitless numbers ([quirky lengths][3]) such as
    * `{padding: 20}` may not supported by some browsers; you should instead
    * specify a string with units such as `{padding: "20px"}`. By default, the
-   * returned plot has a white background, a max-width of 100%, and the
-   * system-ui font. Plot’s marks and axes default to [currentColor][4], meaning
-   * that they will inherit the surrounding content’s color. For example, a dark
-   * theme:
-   *
-   * ```js
-   * Plot.plot({
-   *   style: "background: black; color: white;",
-   *   marks: …
-   * })
-   * ```
+   * returned plot has a max-width of 100%, and the system-ui font. Plot’s marks
+   * and axes default to [currentColor][4], meaning that they will inherit the
+   * surrounding content’s color.
    *
    * [1]: https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/style
    * [2]: https://developer.mozilla.org/en-US/docs/Web/API/CSSStyleDeclaration

src/plot.js

@@ -258,8 +258,8 @@ export function plot(options = {}) {
       // Warning: if you edit this, change defaultClassName.
       svg.append("style").text(
         `.${className} {
+  --plot-background: white;
   display: block;
-  background: white;
   height: auto;
   height: intrinsic;
   max-width: 100%;