@sproutsocial/seeds-react-data-viz 0.18.0 → 0.20.0

package/dist/charts.css

@@ -0,0 +1,583 @@
+/**
+ * Seeds Design System - Combined V2 Chart CSS
+ * Auto-generated — do not edit directly.
+ *
+ * Import once to style all v2 charts instead of importing each chart
+ * family's CSS file separately:
+ *
+ *   import "@sproutsocial/seeds-react-data-viz/charts.css";
+ *
+ * @see https://github.com/sproutsocial/seeds
+ */
+
+/**
+ * Seeds v2 chart styles — shared foundation.
+ *
+ * This is the genuinely-shared layer of the v2 chart styling migration: the
+ * .seeds-chart base rules, the per-series color fallback mechanism, the
+ * clickable-cursor rules, and the global (unscoped) tooltip overrides. It is a
+ * static port of the shared pieces of src/styles/chartStyles.ts
+ * (baseChartStyles + GlobalChartStyleOverrides), following the sparkline.css
+ * pattern. Consumers import this once:
+ *
+ *   import "@sproutsocial/seeds-react-data-viz/chart-styles.css";
+ *
+ * Two kinds of layer live here. (1) The .seeds-chart base above. (2) The shared
+ * cross-family .seeds-chart-time-series layer below — used by every v2
+ * time-series family (bar, line-area), so it lives here once rather than being
+ * duplicated in each family .css. Truly per-family classes do NOT live here:
+ * each chart family (CE-170 bar, CE-165 line-area, CE-166 donut) owns and ships
+ * its own .css file with its .seeds-chart-<family> rules (e.g. .seeds-chart-bar
+ * hover-dimming) and passes its own class chain into getChartContainerProps — so
+ * those PRs never collide on this file.
+ *
+ * Theme values reference the DS's already-emitted global CSS variables directly
+ * (var(--color-*) / var(--font-*)) — the same surface other Seeds component CSS
+ * uses — so light/dark follows the theme stylesheet with zero inline JS. The
+ * dynamic per-chart pieces set inline by getChartContainerProps
+ * (src/charts/shared/chartContainer.ts) are the shared container mechanism the
+ * family files build on:
+ *
+ *   Explicit per-series color override -> var(--highcharts-color-N) (set inline)
+ *   $hasOnClick   -> [data-has-on-click] attribute
+ *   $patterns     -> [data-dashed-series~="N"] attribute
+ *
+ * .seeds-chart sets --highcharts-color-N to the DS data-viz palette variable
+ * (var(--color-dataviz-list-N), emitted by @sproutsocial/seeds-react-theme's
+ * theme.css/theme-all.css — light/dark scoped, since the two modes pick
+ * different underlying swatches per index) as its default. An explicit
+ * per-series override is inlined by getChartContainerProps directly on the
+ * same element, which — same property, same element — wins over this class
+ * rule regardless of specificity, so the override still takes precedence.
+ * Defining the custom property itself (rather than only referencing the DS
+ * variable inside a var() fallback on fill/stroke) matters here: Highcharts
+ * ships its own default .highcharts-color-N colors (imported via
+ * highcharts/css/highcharts.css), and when var(--highcharts-color-N, ...)
+ * fails to resolve at all, the declaration is invalid at computed-value time
+ * and the cascade falls through to Highcharts' own default — silently
+ * dropping to Highcharts' palette instead of the DS one. The enumeration runs
+ * 0..19, matching the 20-entry DATAVIZ_COLORS_LIST / --color-dataviz-list-0..19.
+ * Series beyond 20 with an explicit color get no static selector — the same
+ * behaviour as the old JS fallback returning undefined.
+ *
+ * This file is additive: chartStyles.ts still serves v1 (and the not-yet-
+ * migrated v2 wrappers). The duplication is deliberate and temporary.
+ */
+
+/* =========================================================================
+ * baseChartStyles -> .seeds-chart
+ * ========================================================================= */
+
+.seeds-chart {
+  --highcharts-background-color: var(--color-container-bg-base);
+
+  --highcharts-color-0: var(--color-dataviz-list-0);
+  --highcharts-color-1: var(--color-dataviz-list-1);
+  --highcharts-color-2: var(--color-dataviz-list-2);
+  --highcharts-color-3: var(--color-dataviz-list-3);
+  --highcharts-color-4: var(--color-dataviz-list-4);
+  --highcharts-color-5: var(--color-dataviz-list-5);
+  --highcharts-color-6: var(--color-dataviz-list-6);
+  --highcharts-color-7: var(--color-dataviz-list-7);
+  --highcharts-color-8: var(--color-dataviz-list-8);
+  --highcharts-color-9: var(--color-dataviz-list-9);
+  --highcharts-color-10: var(--color-dataviz-list-10);
+  --highcharts-color-11: var(--color-dataviz-list-11);
+  --highcharts-color-12: var(--color-dataviz-list-12);
+  --highcharts-color-13: var(--color-dataviz-list-13);
+  --highcharts-color-14: var(--color-dataviz-list-14);
+  --highcharts-color-15: var(--color-dataviz-list-15);
+  --highcharts-color-16: var(--color-dataviz-list-16);
+  --highcharts-color-17: var(--color-dataviz-list-17);
+  --highcharts-color-18: var(--color-dataviz-list-18);
+  --highcharts-color-19: var(--color-dataviz-list-19);
+}
+
+/* set overall chart background color */
+.seeds-chart .highcharts-background {
+  fill: var(--color-container-bg-base);
+}
+
+.seeds-chart g.highcharts-annotation-label {
+  display: none;
+}
+
+.seeds-chart div.highcharts-annotation-label {
+  top: 0 !important;
+  transform: translateX(-50%); /* centers the label on the targeted axis point */
+  pointer-events: none; /* prevents tooltip hover from being interrupted by this element since it renders after on the dom */
+}
+
+/* map colors to custom assigned colors or fall back to the default data viz
+   rotation set on .seeds-chart above. Highcharts already accounts for 10
+   series; enumerate through 19 (DATAVIZ_COLORS_LIST / --color-dataviz-list-*
+   length). */
+.seeds-chart .highcharts-color-0 {
+  color: var(--highcharts-color-0);
+  stroke: var(--highcharts-color-0);
+  fill: var(--highcharts-color-0);
+}
+.seeds-chart .highcharts-color-1 {
+  color: var(--highcharts-color-1);
+  stroke: var(--highcharts-color-1);
+  fill: var(--highcharts-color-1);
+}
+.seeds-chart .highcharts-color-2 {
+  color: var(--highcharts-color-2);
+  stroke: var(--highcharts-color-2);
+  fill: var(--highcharts-color-2);
+}
+.seeds-chart .highcharts-color-3 {
+  color: var(--highcharts-color-3);
+  stroke: var(--highcharts-color-3);
+  fill: var(--highcharts-color-3);
+}
+.seeds-chart .highcharts-color-4 {
+  color: var(--highcharts-color-4);
+  stroke: var(--highcharts-color-4);
+  fill: var(--highcharts-color-4);
+}
+.seeds-chart .highcharts-color-5 {
+  color: var(--highcharts-color-5);
+  stroke: var(--highcharts-color-5);
+  fill: var(--highcharts-color-5);
+}
+.seeds-chart .highcharts-color-6 {
+  color: var(--highcharts-color-6);
+  stroke: var(--highcharts-color-6);
+  fill: var(--highcharts-color-6);
+}
+.seeds-chart .highcharts-color-7 {
+  color: var(--highcharts-color-7);
+  stroke: var(--highcharts-color-7);
+  fill: var(--highcharts-color-7);
+}
+.seeds-chart .highcharts-color-8 {
+  color: var(--highcharts-color-8);
+  stroke: var(--highcharts-color-8);
+  fill: var(--highcharts-color-8);
+}
+.seeds-chart .highcharts-color-9 {
+  color: var(--highcharts-color-9);
+  stroke: var(--highcharts-color-9);
+  fill: var(--highcharts-color-9);
+}
+.seeds-chart .highcharts-color-10 {
+  color: var(--highcharts-color-10);
+  stroke: var(--highcharts-color-10);
+  fill: var(--highcharts-color-10);
+}
+.seeds-chart .highcharts-color-11 {
+  color: var(--highcharts-color-11);
+  stroke: var(--highcharts-color-11);
+  fill: var(--highcharts-color-11);
+}
+.seeds-chart .highcharts-color-12 {
+  color: var(--highcharts-color-12);
+  stroke: var(--highcharts-color-12);
+  fill: var(--highcharts-color-12);
+}
+.seeds-chart .highcharts-color-13 {
+  color: var(--highcharts-color-13);
+  stroke: var(--highcharts-color-13);
+  fill: var(--highcharts-color-13);
+}
+.seeds-chart .highcharts-color-14 {
+  color: var(--highcharts-color-14);
+  stroke: var(--highcharts-color-14);
+  fill: var(--highcharts-color-14);
+}
+.seeds-chart .highcharts-color-15 {
+  color: var(--highcharts-color-15);
+  stroke: var(--highcharts-color-15);
+  fill: var(--highcharts-color-15);
+}
+.seeds-chart .highcharts-color-16 {
+  color: var(--highcharts-color-16);
+  stroke: var(--highcharts-color-16);
+  fill: var(--highcharts-color-16);
+}
+.seeds-chart .highcharts-color-17 {
+  color: var(--highcharts-color-17);
+  stroke: var(--highcharts-color-17);
+  fill: var(--highcharts-color-17);
+}
+.seeds-chart .highcharts-color-18 {
+  color: var(--highcharts-color-18);
+  stroke: var(--highcharts-color-18);
+  fill: var(--highcharts-color-18);
+}
+.seeds-chart .highcharts-color-19 {
+  color: var(--highcharts-color-19);
+  stroke: var(--highcharts-color-19);
+  fill: var(--highcharts-color-19);
+}
+
+/* =========================================================================
+ * $hasOnClick -> [data-has-on-click]
+ * ========================================================================= */
+
+/* apply cursor pointer when click functionality is turned on */
+.seeds-chart[data-has-on-click] .highcharts-series,
+.seeds-chart[data-has-on-click] .highcharts-point {
+  cursor: pointer;
+}
+.seeds-chart[data-has-on-click] .highcharts-plot-background,
+.seeds-chart[data-has-on-click] .highcharts-crosshair,
+.seeds-chart[data-has-on-click] .highcharts-grid-line {
+  fill: transparent;
+  cursor: pointer;
+}
+
+/* =========================================================================
+ * GlobalChartStyleOverrides -> global (unscoped) rules
+ *
+ * These can't override Highcharts defaults when scoped, so they stay global.
+ * ========================================================================= */
+
+.highcharts-tooltip-container {
+  z-index: 7 !important;
+}
+.highcharts-tooltip-box {
+  fill: transparent !important;
+}
+
+/* =========================================================================
+ * ChartRenderer legend wrapper spacing (shared across all v2 families)
+ * ========================================================================= */
+
+/* legend wrapper top margin — replaces the former Box mt={350} / mt-350 utility */
+.seeds-chart-legend {
+  margin-top: var(--space-350);
+}
+
+/* =========================================================================
+ * shared cross-family time-series layer -> .seeds-chart-time-series
+ *
+ * Used by every v2 time-series family (bar, line-area); lives here rather than
+ * in a family .css so families reuse rather than duplicate it. crosshair,
+ * grid/axis lines, ticks, the zero line, the hover opacity guard, and the v2
+ * SVG axis-label typography (v2 renders styledMode SVG text/tspan, not v1 HTML
+ * spans — so these are the axisLabelV2Styles rules, not v1's).
+ * ========================================================================= */
+
+/* vertical crosshair */
+.seeds-chart-time-series .highcharts-crosshair {
+  stroke: var(--color-container-border-decorative-neutral);
+  stroke-width: 1;
+}
+
+/* axis and gridlines */
+.seeds-chart-time-series .highcharts-grid-line,
+.seeds-chart-time-series .highcharts-axis-line {
+  stroke: var(--color-container-border-base);
+}
+
+.seeds-chart-time-series .highcharts-tick {
+  stroke: none;
+}
+
+/* don't drop opacity when another series is hovered */
+.seeds-chart-time-series .highcharts-series-inactive {
+  opacity: 1;
+}
+
+.seeds-chart-time-series path.highcharts-plot-line.y-axis-zero-line {
+  stroke: var(--color-container-border-decorative-neutral);
+}
+
+/* v2 SVG axis labels (styledMode, useHTML: false). fill is the SVG text color;
+   color has no effect. */
+.seeds-chart-time-series .highcharts-xaxis-labels text,
+.seeds-chart-time-series .highcharts-yaxis-labels text {
+  font-family: var(--font-family);
+  font-size: var(--font-size-100);
+  line-height: var(--line-height-100);
+  font-weight: var(--font-weight-normal);
+  fill: var(--color-text-subtext);
+}
+
+/* two-line stacked datetime label: the boundary token is an
+   hc-axis-label-secondary tspan on a second line, rendered semibold */
+.seeds-chart-time-series
+  .highcharts-xaxis-labels
+  text
+  tspan.hc-axis-label-secondary {
+  font-weight: var(--font-weight-semibold);
+}
+
+/**
+ * Seeds BarChart per-family styles.
+ *
+ * Consumers import this alongside the shared foundation stylesheet:
+ *
+ *   import "@sproutsocial/seeds-react-data-viz/chart-styles.css";
+ *   import "@sproutsocial/seeds-react-data-viz/bar.css";
+ *
+ * chart-styles.css owns the shared .seeds-chart layer (background,
+ * annotation-label rules, the per-series .highcharts-color-0..19 palette
+ * fallback, the [data-has-on-click] cursor rules, the global tooltip overrides,
+ * and the .seeds-chart-legend spacing) AND the shared cross-family
+ * .seeds-chart-time-series layer (crosshair, grid/axis lines, ticks, zero line,
+ * hover opacity guard, and the v2 SVG axis-label typography) that line-area also
+ * uses. This file owns ONLY the truly bar-specific .seeds-chart-bar block — it
+ * deliberately does not repeat anything chart-styles.css already ships.
+ *
+ * Static theme values reference the DS token CSS variables directly
+ * (var(--color-*)) — the same tokens every other Seeds component CSS uses,
+ * emitted by seeds-react-theme and provided at runtime by the theme provider —
+ * so light/dark follows automatically. Ported from the v1 bar hover-dimming
+ * block; v1 chartStyles.ts stays in place for the v1 wrappers.
+ */
+
+/* =========================================================================
+ * bar family -> .seeds-chart-bar
+ *
+ * hover-dimming: when the chart container is hovered, dim all bars, then
+ * restore opacity for the hovered bar(s) — flagged with the bar-point-hover
+ * class by the adapter — so the non-hovered bars fade out.
+ * ========================================================================= */
+
+.seeds-chart-bar .highcharts-container:hover .highcharts-point {
+  fill-opacity: 0.3;
+}
+
+.seeds-chart-bar .highcharts-point.bar-point-hover {
+  fill-opacity: 1 !important;
+}
+
+/**
+ * Seeds LineAreaChart per-family styles.
+ *
+ * Consumers import this alongside the shared foundation stylesheet:
+ *
+ *   import "@sproutsocial/seeds-react-data-viz/chart-styles.css";
+ *   import "@sproutsocial/seeds-react-data-viz/line-area.css";
+ *
+ * chart-styles.css owns the shared .seeds-chart layer (background,
+ * annotation-label rules, the per-series .highcharts-color-0..19 palette
+ * fallback, the [data-has-on-click] cursor rules, the global tooltip overrides,
+ * and the .seeds-chart-legend spacing) AND the shared cross-family
+ * .seeds-chart-time-series layer (crosshair, grid/axis lines, ticks, zero line,
+ * hover opacity guard, and the v2 SVG axis-label typography) that bar also uses.
+ * This file owns ONLY the line/area-specific .seeds-chart-line and
+ * .seeds-chart-area blocks — it deliberately does not repeat anything
+ * chart-styles.css already ships.
+ *
+ * Static theme values reference the DS token CSS variables directly
+ * (var(--color-*)) — the same tokens every other Seeds component CSS uses,
+ * emitted by seeds-react-theme and provided at runtime by the theme provider —
+ * so light/dark follows automatically. Ported from the v1 styled-components
+ * lineChartStyles / areaChartStyles in src/styles/chartStyles.ts (which stays,
+ * still serving v1).
+ */
+
+/* =========================================================================
+ * lineChartStyles -> .seeds-chart-line
+ * ========================================================================= */
+
+.seeds-chart-line .highcharts-graph {
+  stroke-width: 3;
+}
+
+/* Dashed series. v1 set stroke-dasharray per index when patterns[i] === "dashed";
+   the container now emits data-dashed-series="<space-separated indices>", so a
+   [data-dashed-series~="N"] match dashes .highcharts-series-N. Highcharts accounts
+   for 10 series; enumerate 0..19 to match the 20-entry DATAVIZ palette. */
+.seeds-chart-line[data-dashed-series~="0"] .highcharts-series-0 {
+  stroke-dasharray: 2 8;
+}
+.seeds-chart-line[data-dashed-series~="1"] .highcharts-series-1 {
+  stroke-dasharray: 2 8;
+}
+.seeds-chart-line[data-dashed-series~="2"] .highcharts-series-2 {
+  stroke-dasharray: 2 8;
+}
+.seeds-chart-line[data-dashed-series~="3"] .highcharts-series-3 {
+  stroke-dasharray: 2 8;
+}
+.seeds-chart-line[data-dashed-series~="4"] .highcharts-series-4 {
+  stroke-dasharray: 2 8;
+}
+.seeds-chart-line[data-dashed-series~="5"] .highcharts-series-5 {
+  stroke-dasharray: 2 8;
+}
+.seeds-chart-line[data-dashed-series~="6"] .highcharts-series-6 {
+  stroke-dasharray: 2 8;
+}
+.seeds-chart-line[data-dashed-series~="7"] .highcharts-series-7 {
+  stroke-dasharray: 2 8;
+}
+.seeds-chart-line[data-dashed-series~="8"] .highcharts-series-8 {
+  stroke-dasharray: 2 8;
+}
+.seeds-chart-line[data-dashed-series~="9"] .highcharts-series-9 {
+  stroke-dasharray: 2 8;
+}
+.seeds-chart-line[data-dashed-series~="10"] .highcharts-series-10 {
+  stroke-dasharray: 2 8;
+}
+.seeds-chart-line[data-dashed-series~="11"] .highcharts-series-11 {
+  stroke-dasharray: 2 8;
+}
+.seeds-chart-line[data-dashed-series~="12"] .highcharts-series-12 {
+  stroke-dasharray: 2 8;
+}
+.seeds-chart-line[data-dashed-series~="13"] .highcharts-series-13 {
+  stroke-dasharray: 2 8;
+}
+.seeds-chart-line[data-dashed-series~="14"] .highcharts-series-14 {
+  stroke-dasharray: 2 8;
+}
+.seeds-chart-line[data-dashed-series~="15"] .highcharts-series-15 {
+  stroke-dasharray: 2 8;
+}
+.seeds-chart-line[data-dashed-series~="16"] .highcharts-series-16 {
+  stroke-dasharray: 2 8;
+}
+.seeds-chart-line[data-dashed-series~="17"] .highcharts-series-17 {
+  stroke-dasharray: 2 8;
+}
+.seeds-chart-line[data-dashed-series~="18"] .highcharts-series-18 {
+  stroke-dasharray: 2 8;
+}
+.seeds-chart-line[data-dashed-series~="19"] .highcharts-series-19 {
+  stroke-dasharray: 2 8;
+}
+
+/* =========================================================================
+ * areaChartStyles -> .seeds-chart-area
+ * ========================================================================= */
+
+/* no stroke for the line part of each area */
+.seeds-chart-area .highcharts-graph {
+  stroke-width: 0;
+}
+
+/* fill areas to full opacity */
+.seeds-chart-area .highcharts-area {
+  fill-opacity: 1;
+}
+
+/**
+ * Seeds DonutChart family styles.
+ *
+ * The donut-specific layer on top of the shared `chart-styles.css` foundation
+ * (CE-164). The base rules — the per-series color custom-property fill (default
+ * `--highcharts-color-N` resolves to the DS data-viz palette, light/dark-correct;
+ * an explicit consumer color overrides it), the chart background, annotation
+ * labels, and the clickable-cursor rules — live in `chart-styles.css` and are
+ * shared across every v2 family. This file adds only the pie rules unique to
+ * the donut, scoped under `.seeds-chart-donut`.
+ *
+ * Consumers import BOTH stylesheets once (the component never self-imports):
+ *
+ *   import "@sproutsocial/seeds-react-data-viz/chart-styles.css";
+ *   import "@sproutsocial/seeds-react-data-viz/donut.css";
+ *
+ * These rules are ported verbatim from the former `donutChartStyles`
+ * (chartStyles.ts) and the inline point-inactive block, so the output stays
+ * pixel-identical. (v1 still consumes those styled-components blocks — do not
+ * remove them.)
+ */
+
+/* Remove 250ms fade in/out when hovering over different donut chart slices. */
+.seeds-chart-donut .highcharts-point {
+  transition: opacity 0s;
+}
+
+/* Remove stroke on donut slices. */
+.seeds-chart-donut .highcharts-pie-series .highcharts-point {
+  stroke: none;
+}
+
+/* Don't reduce opacity when hovering (ported verbatim — fill-opacity: none is
+   an invalid value and effectively a no-op, kept for pixel-identical parity). */
+.seeds-chart-donut .highcharts-point-hover {
+  fill-opacity: none;
+}
+
+/* Dim non-hovered slices. Highcharts adds .highcharts-point-inactive to all pie
+   points except the hovered one. In styledMode, opacity is CSS-only
+   (JS plotOptions.states.inactive.opacity is ignored). */
+.seeds-chart-donut .highcharts-pie-series .highcharts-point-inactive {
+  opacity: 0.3;
+  transition: opacity 0s;
+}
+
+/**
+ * Seeds SparklineChart styles.
+ *
+ * Unlike the other seeds-react-data-viz charts (which inject styles at runtime
+ * via styled-components), SparklineChart ships its styling as this plain CSS
+ * file. Consumers must import it once:
+ *
+ *   import "@sproutsocial/seeds-react-data-viz/sparkline.css";
+ *
+ * The single trend color is provided by the component as the
+ * `--seeds-sparkline-color` custom property (set inline from the JS theme, so it
+ * follows light/dark without depending on the theme CSS-variable stylesheet).
+ * Size the chart by passing Tailwind utilities (or any class names) via
+ * `className` — the defaults below are overridable.
+ */
+
+.seeds-sparkline {
+  /* Compact inline micro-chart by default (matching the Highcharts sparkline
+     demo). Reach for the line/bar chart families when a full-size chart is
+     needed; override these with `className` for anything in between. */
+  display: inline-block;
+  width: 120px;
+  height: 24px;
+  vertical-align: middle;
+  /* Safety net: a chart that mis-measures its container never spills past the
+     sized wrapper. */
+  overflow: hidden;
+}
+
+/* highcharts-react-official renders the chart into a bare <div> with no
+   intrinsic size, and Highcharts measures that element to size the chart. Left
+   at its default `height: auto` the measured height collapses to 0, so
+   Highcharts falls back to its built-in 400px default and overflows the
+   wrapper. Force the render container (and the chart's own inner container +
+   root svg) to fill the sized `.seeds-sparkline` wrapper so Highcharts measures
+   a concrete height instead. */
+.seeds-sparkline > div,
+.seeds-sparkline .highcharts-container,
+.seeds-sparkline .highcharts-root {
+  width: 100%;
+  height: 100%;
+}
+
+/* A sparkline is a decorative overlay — no chart/plot background or border, so
+   it sits transparently on any surface. */
+.seeds-sparkline .highcharts-background,
+.seeds-sparkline .highcharts-plot-background {
+  fill: transparent;
+}
+
+.seeds-sparkline .highcharts-plot-border,
+.seeds-sparkline .highcharts-plot-line {
+  stroke: none;
+}
+
+/* Highcharts renders in styledMode, so fills/strokes come from CSS. Everything
+   in a sparkline is the one trend color. Rounded joins/caps give the line a
+   slightly smoother, softer read. */
+.seeds-sparkline .highcharts-graph {
+  stroke: var(--seeds-sparkline-color);
+  stroke-width: 2px;
+  stroke-linejoin: round;
+  stroke-linecap: round;
+}
+
+/* Bars/points carry no border — the fill alone is the trend color. */
+.seeds-sparkline .highcharts-point {
+  fill: var(--seeds-sparkline-color);
+  stroke: none;
+  stroke-width: 0;
+}
+
+/* Decorative micro-chart: no data-point markers on the line. */
+.seeds-sparkline .highcharts-markers {
+  display: none;
+}