@blueprint-chart/lib 0.1.2

package/src/charts/chart.scss

@@ -0,0 +1,481 @@
+// ============================================================================
+// Blueprint Chart — Standalone Chart Styles
+// ============================================================================
+//
+// All visual properties use CSS custom properties so consumers can theme
+// charts without touching this file.  Default values produce the canonical
+// "Blueprint" look and feel.
+//
+// Class names match the DOM generated by the lib's TypeScript renderers.
+// Do NOT rename classes here — they are referenced by name throughout the
+// chart codebase (frame.ts, canvas.ts, legend.ts, chart-type files, plugins).
+//
+// This file is standalone: no Bootstrap or editor dependency.
+// ============================================================================
+
+// ---------------------------------------------------------------------------
+// Frame
+// ---------------------------------------------------------------------------
+
+.bc-frame {
+  --bc-frame-font-family: system-ui, -apple-system, sans-serif;
+  --bc-frame-padding: 0;
+  --bc-frame-bg: var(--bs-card-bg, #fff);
+
+  font-family: var(--bc-frame-font-family);
+  background: var(--bc-frame-bg);
+}
+
+// Constrained-height mode: when the frame's container has a definite height
+// (fixed or aspect-ratio).
+//
+// The body (SVG container) is positioned absolutely over the full frame so
+// its dimensions never change between scenes. Header and footer float on
+// top via z-index with flex layout pushing footer to the bottom.
+// The chart content inside the SVG uses extra margins (set by createCanvas
+// from data-header-h / data-footer-h) to avoid overlapping header/footer.
+// When the header height changes, only the chart margins change — smoothly
+// animated by D3 transitions. The SVG itself is perfectly stable.
+.bc-frame--constrained {
+  flex: 1;
+  position: relative;
+  min-height: 0;
+  overflow: hidden;
+
+  .bc-frame-header {
+    position: relative;
+    z-index: 1;
+    // Opaque background so the header covers SVG content behind it.
+    // Uses the card/container background or white as fallback.
+    background: var(--bc-frame-header-bg, var(--bs-card-bg, #fff));
+  }
+
+  .bc-frame-body {
+    position: absolute;
+    inset: 0;
+    z-index: 0;
+    overflow: hidden;
+  }
+
+  .bc-frame-note {
+    position: absolute;
+    bottom: var(--bc-footer-h, 0);
+    left: 0;
+    right: 0;
+    z-index: 1;
+  }
+
+  .bc-frame-footer {
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    z-index: 1;
+  }
+}
+
+// -- Header elements --------------------------------------------------------
+
+.bc-frame-header {
+  padding: var(--bc-frame-padding) var(--bc-frame-padding) var(--bc-frame-header-padding-bottom, var(--bc-frame-padding));
+  background: var(--bc-frame-header-bg, transparent);
+  border-bottom: var(--bc-frame-header-border-bottom, none);
+  margin-bottom: var(--bc-frame-header-margin-bottom, 0);
+}
+
+.bc-frame-title {
+  --bc-frame-title-color: var(--bc-text-color, #333);
+  --bc-frame-title-font-size: 1.25rem;
+  --bc-frame-title-font-weight: bold;
+
+  color: var(--bc-frame-title-color);
+  font-size: var(--bc-frame-title-font-size);
+  font-weight: var(--bc-frame-title-font-weight);
+  margin: 0;
+}
+
+.bc-frame-description {
+  --bc-frame-description-color: var(--bc-text-color, #555);
+  --bc-frame-description-font-size: 0.875rem;
+
+  color: var(--bc-frame-description-color);
+  font-size: var(--bc-frame-description-font-size);
+  margin: 0.25rem 0 0;
+}
+
+// -- Body -------------------------------------------------------------------
+
+.bc-frame-body {
+  padding: 0 var(--bc-frame-padding);
+}
+
+// -- Note -------------------------------------------------------------------
+
+.bc-frame-note {
+  --bc-frame-note-color: var(--bc-text-color, #888);
+  --bc-frame-note-font-size: 0.75rem;
+
+  font-style: italic;
+  color: var(--bc-frame-note-color);
+  font-size: var(--bc-frame-note-font-size);
+  margin: 0;
+  padding: 0 var(--bc-frame-padding) var(--bc-frame-padding);
+}
+
+// -- Footer -----------------------------------------------------------------
+
+.bc-frame-footer {
+  --bc-frame-footer-gap: 0.25rem 1rem;
+
+  gap: var(--bc-frame-footer-gap);
+  padding: var(--bc-frame-footer-padding-top, var(--bc-frame-padding)) var(--bc-frame-padding) var(--bc-frame-padding);
+  background: var(--bc-frame-footer-bg, transparent);
+  border-top: var(--bc-frame-footer-border-top, none);
+}
+
+.bc-frame-footer-left {
+  --bc-frame-footer-left-gap: 0.25rem 0.75rem;
+  --bc-frame-footer-separator-color: var(--bc-text-color, #888);
+
+  display: flex;
+  align-items: baseline;
+  flex-wrap: wrap;
+  gap: var(--bc-frame-footer-left-gap);
+
+  > :not(:first-child)::before {
+    content: "\00B7"; // middle dot
+    margin-right: 0.5rem;
+    color: var(--bc-frame-footer-separator-color);
+  }
+}
+
+.bc-frame-footer-right {
+  display: flex;
+  align-items: center;
+}
+
+// -- Byline & Source --------------------------------------------------------
+
+.bc-frame-byline,
+.bc-frame-source {
+  --bc-frame-meta-color: var(--bc-text-color, #888);
+  --bc-frame-meta-font-size: 0.75rem;
+
+  color: var(--bc-frame-meta-color);
+  font-size: var(--bc-frame-meta-font-size);
+}
+
+.bc-frame-source-prefix {
+  // Inherits color/size from .bc-frame-source.
+}
+
+.bc-frame-source-link {
+  --bc-frame-source-link-color: inherit;
+
+  color: var(--bc-frame-source-link-color);
+  text-decoration: underline;
+}
+
+// -- Credit -----------------------------------------------------------------
+
+.bc-frame-credit {
+  --bc-frame-credit-color: var(--bc-text-color, #666);
+  --bc-frame-credit-font-size: 0.75rem;
+  --bc-frame-credit-font-weight: 600;
+
+  color: var(--bc-frame-credit-color);
+  font-size: var(--bc-frame-credit-font-size);
+  font-weight: var(--bc-frame-credit-font-weight);
+  display: inline-flex;
+  align-items: center;
+}
+
+// ---------------------------------------------------------------------------
+// Axes
+// ---------------------------------------------------------------------------
+
+.bc-axis {
+  --bc-axis-tick-color: var(--bc-axis-color, #333);
+  --bc-axis-tick-font-size: 10px;
+  --bc-axis-domain-color: var(--bc-axis-color, #333);
+
+  // D3 axis generates .domain and .tick elements; style them here.
+  .domain {
+    stroke: var(--bc-axis-domain-color);
+  }
+
+  .tick text {
+    fill: var(--bc-axis-tick-color);
+    font-size: var(--bc-axis-tick-font-size);
+  }
+
+  .tick line {
+    stroke: var(--bc-axis-tick-color);
+  }
+}
+
+.bc-axis-vertical {
+  // Direction-specific overrides can be placed here.
+}
+
+.bc-axis-horizontal {
+  // Direction-specific overrides can be placed here.
+}
+
+// ---------------------------------------------------------------------------
+// Grid lines
+// ---------------------------------------------------------------------------
+
+// Grid lines live inside .bc-axis .tick, so we need enough specificity
+// to beat the `.bc-axis .tick line` selector (0-2-1).
+.bc-axis .tick line.bc-grid-line {
+  --bc-grid-line-color: var(--bc-grid-color, #e0e0e0);
+  --bc-grid-line-width: 1;
+  --bc-grid-line-opacity: 1;
+
+  stroke: var(--bc-grid-line-color);
+  stroke-width: var(--bc-grid-line-width);
+  opacity: var(--bc-grid-line-opacity);
+}
+
+// ---------------------------------------------------------------------------
+// Zero baseline
+// ---------------------------------------------------------------------------
+
+.bc-zero-baseline {
+  --bc-zero-baseline-color: #666;
+  --bc-zero-baseline-width: 1;
+
+  stroke: var(--bc-zero-baseline-color);
+  stroke-width: var(--bc-zero-baseline-width);
+}
+
+// ---------------------------------------------------------------------------
+// Legend
+// ---------------------------------------------------------------------------
+
+.bc-legend {
+  // Container <g>; positioning handled by legend.ts.
+}
+
+.bc-legend-item {
+  --bc-legend-item-font-size: 12px;
+  --bc-legend-item-text-color: var(--bc-text-color, #555);
+
+  cursor: default;
+
+  text {
+    fill: var(--bc-legend-item-text-color);
+    font-size: var(--bc-legend-item-font-size);
+  }
+}
+
+// ---------------------------------------------------------------------------
+// Bar charts
+// ---------------------------------------------------------------------------
+
+.bc-bar {
+  // Fill is set via D3 .attr('fill') from data-bound colors/highlights.
+  // Do NOT set fill in CSS — CSS rules override SVG attributes.
+}
+
+.bc-bar-multi {
+  // Same as .bc-bar — fill is data-driven.
+  // Additional class for multi-series bars.
+}
+
+// ---------------------------------------------------------------------------
+// Line charts
+// ---------------------------------------------------------------------------
+
+.bc-line {
+  --bc-line-stroke-width: 2;
+
+  fill: none;
+  stroke-width: var(--bc-line-stroke-width);
+  // stroke is set inline from data-bound color.
+}
+
+.bc-area {
+  // fill + opacity are set inline by D3.
+}
+
+.bc-dot {
+  --bc-dot-radius: 3;
+
+  // fill is set inline from data-bound color.
+  // r is set inline but we provide a CSS default for reference.
+}
+
+// ---------------------------------------------------------------------------
+// Symbols (line-symbols.ts)
+// ---------------------------------------------------------------------------
+
+.bc-symbols {
+  // Container group; per-series data-series attribute set inline.
+}
+
+.bc-symbol {
+  // Shape + fill set inline by D3.
+}
+
+// ---------------------------------------------------------------------------
+// Area fills (line-multi)
+// ---------------------------------------------------------------------------
+
+.bc-area-fills {
+  // Container group for area fill paths.
+}
+
+.bc-area-fill {
+  // fill + opacity set inline by D3.
+}
+
+.bc-area-fill-negative {
+  // Inherits from .bc-area-fill; same inline approach.
+}
+
+// ---------------------------------------------------------------------------
+// Value labels
+// ---------------------------------------------------------------------------
+
+.bc-value-labels {
+  // Wrapper group (if used).
+}
+
+.bc-value-label-group {
+  // Group for animated value-label transitions.
+}
+
+.bc-value-label {
+  --bc-value-label-font-size: 11px;
+
+  font-size: var(--bc-value-label-font-size);
+  // fill is set via D3 .attr('fill') — uses contrastTextColor for inside-bar labels.
+  // Do NOT set fill in CSS — it would break contrast-based readability.
+}
+
+// ---------------------------------------------------------------------------
+// Direct labels (line-multi, bar-multi)
+// ---------------------------------------------------------------------------
+
+.bc-direct-label {
+  --bc-direct-label-font-size: 12px;
+  --bc-direct-label-font-weight: 600;
+
+  font-size: var(--bc-direct-label-font-size);
+  font-weight: var(--bc-direct-label-font-weight);
+}
+
+// ---------------------------------------------------------------------------
+// Tooltip
+// ---------------------------------------------------------------------------
+
+.bc-tooltip {
+  --bc-tooltip-bg: var(--bs-body-bg, #fff);
+  --bc-tooltip-color: var(--bs-body-color, #212529);
+  --bc-tooltip-border-color: var(--bs-border-color, #dee2e6);
+  --bc-tooltip-border-radius: 4px;
+  --bc-tooltip-padding: 6px 10px;
+  --bc-tooltip-font-size: 13px;
+  --bc-tooltip-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
+
+  position: absolute;
+  pointer-events: none;
+  background: var(--bc-tooltip-bg);
+  color: var(--bc-tooltip-color);
+  border: 1px solid var(--bc-tooltip-border-color);
+  border-radius: var(--bc-tooltip-border-radius);
+  padding: var(--bc-tooltip-padding);
+  font-size: var(--bc-tooltip-font-size);
+  box-shadow: var(--bc-tooltip-shadow);
+  z-index: 9999;
+  display: none;
+}
+
+// ---------------------------------------------------------------------------
+// Crosshair
+// ---------------------------------------------------------------------------
+
+.bc-crosshair {
+  --bc-crosshair-color: #999;
+  --bc-crosshair-width: 1;
+
+  stroke: var(--bc-crosshair-color);
+  stroke-width: var(--bc-crosshair-width);
+  // stroke-dasharray is set via inline style by the crosshair/proximity plugins
+  // so that crosshairStyle ("solid", "dashed", "dotted") takes effect.
+  pointer-events: none;
+}
+
+.bc-crosshair-v {
+  // Inherits from .bc-crosshair.
+}
+
+.bc-crosshair-h {
+  // Inherits from .bc-crosshair.
+}
+
+// ---------------------------------------------------------------------------
+// Arc labels (pie / donut)
+// ---------------------------------------------------------------------------
+
+.bc-arc-labels {
+  // Container group for outside arc labels.
+}
+
+.bc-arc-label-line {
+  --bc-arc-label-line-color: #999;
+  --bc-arc-label-line-width: 1;
+
+  fill: none;
+  stroke: var(--bc-arc-label-line-color);
+  stroke-width: var(--bc-arc-label-line-width);
+}
+
+.bc-arc-direct-label {
+  // font-size set inline from opts.fontSize.
+  // fill set inline per-tspan from readableColor / data color.
+}
+
+.bc-arc-labels-inside {
+  // Container group for inside arc labels.
+}
+
+.bc-arc-inside-label {
+  // font-size set inline from opts.fontSize.
+  // fill set inline from contrastTextColor.
+}
+
+// ---------------------------------------------------------------------------
+// Annotations
+// ---------------------------------------------------------------------------
+
+.bc-annotations {
+  // Container group for point / free annotations.
+}
+
+.bc-annotations-range {
+  // Container group for range annotations (inserted first for z-order).
+}
+
+// ---------------------------------------------------------------------------
+// Error state (runtime embed)
+// ---------------------------------------------------------------------------
+
+// ---------------------------------------------------------------------------
+// Themes
+// ---------------------------------------------------------------------------
+
+@import "themes/blueprint";
+@import "themes/blueprint-framed";
+
+// ---------------------------------------------------------------------------
+// Error state (runtime embed)
+// ---------------------------------------------------------------------------
+
+.blueprint-chart-error {
+  color: red;
+  padding: 1em;
+  border: 1px solid red;
+}