diff --git a/docs/.vitepress/theme/custom.css b/docs/.vitepress/theme/custom.css index 748b25a4b4..2b5f70e8e9 100644 --- a/docs/.vitepress/theme/custom.css +++ b/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; } diff --git a/docs/features/plots.md b/docs/features/plots.md index 13351e4241..d4191244d3 100644 --- a/docs/features/plots.md +++ b/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"}`. diff --git a/src/legends/ramp.js b/src/legends/ramp.js index 5985ca85ed..5dd8d9eade 100644 --- a/src/legends/ramp.js +++ b/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%; diff --git a/src/marker.js b/src/marker.js index 4092bf7b04..2d682a9778 100644 --- a/src/marker.js +++ b/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)) diff --git a/src/marks/crosshair.js b/src/marks/crosshair.js index 6313771eb6..0f155cb81f 100644 --- a/src/marks/crosshair.js +++ b/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; diff --git a/src/marks/tip.js b/src/marks/tip.js index e23942c69e..071809aae0 100644 --- a/src/marks/tip.js +++ b/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" }; diff --git a/src/marks/tree.js b/src/marks/tree.js index a58238fc7f..94f829ff2e 100644 --- a/src/marks/tree.js +++ b/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, diff --git a/src/plot.d.ts b/src/plot.d.ts index b6019631b1..9d9280f22b 100644 --- a/src/plot.d.ts +++ b/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 diff --git a/src/plot.js b/src/plot.js index 32824f3153..d6f85da9a3 100644 --- a/src/plot.js +++ b/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%; diff --git a/test/output/aaplBollinger.svg b/test/output/aaplBollinger.svg index e950133f03..678f30e8ce 100644 --- a/test/output/aaplBollinger.svg +++ b/test/output/aaplBollinger.svg @@ -1,8 +1,8 @@

A subtitle about body_mass_g

A fancy title about penguins

A fancy subtitle