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

observablehq · Oct 27, 2023 · dbfadd9 · dbfadd9
1 parent 5638a17
commit dbfadd9
Show file tree

Hide file tree

Showing 600 changed files with 715 additions and 61 deletions.
diff --git a/docs/.vitepress/theme/custom.css b/docs/.vitepress/theme/custom.css
@@ -40,6 +40,7 @@
 
 .vp-doc .plot,
 .vp-doc .plot-ramp {
+  --plot-background: var(--vp-c-bg); /* TODO -alt for tip? */
   overflow: visible;
   position: relative;
   z-index: 1;
@@ -70,20 +71,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/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/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.js b/src/plot.js
@@ -258,6 +258,7 @@ export function plot(options = {}) {
       // Warning: if you edit this, change defaultClassName.
       svg.append("style").text(
         `.${className} {
+  --plot-background: white;
   display: block;
   height: auto;
   height: intrinsic;

diff --git a/test/output/aaplBollinger.svg b/test/output/aaplBollinger.svg
diff --git a/test/output/aaplBollingerCandlestick.svg b/test/output/aaplBollingerCandlestick.svg
diff --git a/test/output/aaplBollingerGridInterval.svg b/test/output/aaplBollingerGridInterval.svg
diff --git a/test/output/aaplBollingerGridSpacing.svg b/test/output/aaplBollingerGridSpacing.svg
diff --git a/test/output/aaplCandlestick.svg b/test/output/aaplCandlestick.svg
diff --git a/test/output/aaplChangeVolume.svg b/test/output/aaplChangeVolume.svg
diff --git a/test/output/aaplClose.svg b/test/output/aaplClose.svg
diff --git a/test/output/aaplCloseClip.svg b/test/output/aaplCloseClip.svg
diff --git a/test/output/aaplCloseDataTicks.svg b/test/output/aaplCloseDataTicks.svg
diff --git a/test/output/aaplCloseGridColor.svg b/test/output/aaplCloseGridColor.svg
diff --git a/test/output/aaplCloseGridInterval.svg b/test/output/aaplCloseGridInterval.svg
diff --git a/test/output/aaplCloseGridIntervalName.svg b/test/output/aaplCloseGridIntervalName.svg
diff --git a/test/output/aaplCloseGridIterable.svg b/test/output/aaplCloseGridIterable.svg
diff --git a/test/output/aaplCloseImplicitGrid.svg b/test/output/aaplCloseImplicitGrid.svg
diff --git a/test/output/aaplCloseNormalize.svg b/test/output/aaplCloseNormalize.svg
diff --git a/test/output/aaplCloseUntyped.svg b/test/output/aaplCloseUntyped.svg
diff --git a/test/output/aaplFancyAxis.svg b/test/output/aaplFancyAxis.svg
diff --git a/test/output/aaplInterval.svg b/test/output/aaplInterval.svg
diff --git a/test/output/aaplMonthly.svg b/test/output/aaplMonthly.svg
diff --git a/test/output/aaplVolume.svg b/test/output/aaplVolume.svg
diff --git a/test/output/aaplVolumeRect.svg b/test/output/aaplVolumeRect.svg
diff --git a/test/output/anscombeQuartet.svg b/test/output/anscombeQuartet.svg
diff --git a/test/output/arcCollatz.svg b/test/output/arcCollatz.svg
diff --git a/test/output/arcCollatzUp.svg b/test/output/arcCollatzUp.svg
diff --git a/test/output/arcMiserables.svg b/test/output/arcMiserables.svg
diff --git a/test/output/armadillo.svg b/test/output/armadillo.svg
diff --git a/test/output/aspectRatioBand.svg b/test/output/aspectRatioBand.svg
diff --git a/test/output/aspectRatioLinear.svg b/test/output/aspectRatioLinear.svg
diff --git a/test/output/aspectRatioLog.svg b/test/output/aspectRatioLog.svg
diff --git a/test/output/aspectRatioPoint.svg b/test/output/aspectRatioPoint.svg
diff --git a/test/output/aspectRatioSqrt.svg b/test/output/aspectRatioSqrt.svg
diff --git a/test/output/athletesBinsColors.svg b/test/output/athletesBinsColors.svg
diff --git a/test/output/athletesBirthdays.svg b/test/output/athletesBirthdays.svg
diff --git a/test/output/athletesBoxingHeight.svg b/test/output/athletesBoxingHeight.svg
diff --git a/test/output/athletesHeightWeight.svg b/test/output/athletesHeightWeight.svg
diff --git a/test/output/athletesHeightWeightBin.svg b/test/output/athletesHeightWeightBin.svg
diff --git a/test/output/athletesHeightWeightBinStroke.svg b/test/output/athletesHeightWeightBinStroke.svg
diff --git a/test/output/athletesHeightWeightSex.svg b/test/output/athletesHeightWeightSex.svg
diff --git a/test/output/athletesHeightWeightSport.svg b/test/output/athletesHeightWeightSport.svg
diff --git a/test/output/athletesSample.svg b/test/output/athletesSample.svg
diff --git a/test/output/athletesSampleFacet.svg b/test/output/athletesSampleFacet.svg
diff --git a/test/output/athletesSexWeight.svg b/test/output/athletesSexWeight.svg