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

package/dist/chart-styles.css

@@ -0,0 +1,295 @@
+/**
+ * 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);
+}