@jarenjs/charts 0.34.0

package/styles/charts.css

@@ -0,0 +1,83 @@
+/* @jarenjs/charts — component stylesheet.
+ *
+ * Defines the self-scoped `.chart` class carrying the `--chart-*` token
+ * vocabulary (light values plus a `.dark` override) and maps each
+ * `chart-*` shape class to `var(--chart-*)`. The render pass stamps the
+ * same variables *inline* on the root `<svg>`, and inline custom
+ * properties beat these stylesheet blocks — so for pipeline-rendered
+ * SVGs the stamp decides the colors. Re-theming a live chart goes
+ * through the `'host'` theme (`src/core/palette.js` `HOST_VARS`), whose
+ * stamped values reference the host's tokens. `toSvgString()` output
+ * stays standalone-valid via concrete presentation-attribute colors.
+ *
+ * Sync invariant (DESIGN.md §7): the fallback values below must match
+ * the `default`/`dark` token tables in `src/core/palette.js`.
+ */
+
+.chart {
+  --chart-background: transparent;
+  --chart-text: #1f2020;
+  --chart-muted: #64748b;
+  --chart-grid: #e2e8f0;
+  --chart-axis: #94a3b8;
+  --chart-win: #16a34a;
+  --chart-loss: #dc2626;
+  --chart-slice-stroke: #ffffff;
+}
+.dark .chart {
+  --chart-text: #f4f4f4;
+  --chart-muted: #94a3b8;
+  --chart-grid: #334155;
+  --chart-axis: #64748b;
+  --chart-win: #4ade80;
+  --chart-loss: #f87171;
+  --chart-slice-stroke: #11141c;
+}
+
+.chart-svg { max-width: 100%; height: auto; }
+
+.chart-pie-slice { stroke: var(--chart-slice-stroke); }
+.chart-pie-legend text { fill: var(--chart-text); }
+
+.chart-title { fill: var(--chart-text); }
+.chart-tick, .chart-axis-label { fill: var(--chart-muted); }
+.chart-grid { stroke: var(--chart-grid); }
+.chart-axis { stroke: var(--chart-axis); }
+.chart-ref { stroke: var(--chart-muted); }
+.chart-gauge-track { stroke: var(--chart-grid); }
+.chart-gauge-value { fill: var(--chart-text); }
+.chart-box-whisker { stroke: var(--chart-axis); }
+.chart-stream-band { stroke: var(--chart-slice-stroke); }
+.chart-sankey-link { fill: var(--chart-muted); }
+.chart-sankey-label { fill: var(--chart-text); }
+.chart-candle-up { stroke: var(--chart-win); }
+rect.chart-candle-up { fill: var(--chart-win); stroke: none; }
+.chart-candle-down { stroke: var(--chart-loss); }
+rect.chart-candle-down { fill: var(--chart-loss); stroke: none; }
+
+/* The floating-tooltip host (`tooltipView`). Positioned at the pointer's
+ * viewport coordinates by the inline `left`/`top` the binding carried,
+ * then lifted clear of the cursor here — so the host never measures the
+ * box. It links the site tokens directly (DESIGN.md §7) rather than the
+ * `--chart-*` table: this is page chrome around the SVG, not a mark
+ * inside it. `pointer-events: none` keeps it from stealing the
+ * pointerleave that dismisses it. */
+.chart-tooltip {
+  position: fixed;
+  z-index: 30;
+  transform: translate(-50%, calc(-100% - 12px));
+  padding: 4px 8px;
+  border-radius: var(--radius-sm, 8px);
+  border: 1px solid var(--border, #e2e8f0);
+  background: var(--surface, #ffffff);
+  color: var(--fg, #1f2020);
+  font-size: 12px;
+  line-height: 1.4;
+  white-space: nowrap;
+  pointer-events: none;
+}
+.dark .chart-tooltip {
+  border-color: var(--border, #334155);
+  background: var(--surface, #11141c);
+  color: var(--fg, #f4f4f4);
+}