@vibe-labs/design-components-graphs

Graph and chart component tokens, styles, and TypeScript types for the Vibe Design System. Provides a framework-agnostic design language for chart libraries (D3, Chart.js, etc.) to consume.

Usage

@import "@vibe-labs/design-components-graphs";

import { GRAPH_SERIES_COUNT, GraphRatios, GraphStatusSeries } from "@vibe-labs/design-components-graphs/types";
import type { GraphRatio, GraphStyleProps, GraphSeriesStyleProps } from "@vibe-labs/design-components-graphs/types";

Contents

Tokens (graph.css)

Comprehensive charting tokens defined in @layer vibe.tokens:

Series Palette

8 default series colors (--graph-series-1 … --graph-series-8), chosen for dark/light distinguishability. Tenants can override or extend with --graph-series-9, etc.

Token	Default
--graph-series-1	#7c5cff (accent purple)
--graph-series-2	#38bdf8 (sky blue)
--graph-series-3	#34d399 (emerald)
--graph-series-4	#fb923c (orange)
--graph-series-5	#f472b6 (pink)
--graph-series-6	#facc15 (yellow)
--graph-series-7	#a78bfa (violet)
--graph-series-8	#22d3ee (cyan)
--graph-series-opacity	0.15 (area fills)

Status Series

--graph-positive (success) · --graph-negative (danger) · --graph-warning (warning) · --graph-neutral (muted)

Axes & Grid

Axis lines, labels, titles, major/minor ticks, major/minor grid lines (with dash patterns).

Tooltip

Background, border, shadow, padding, label color, value weight — full tooltip styling.

Legend

Font size, color, gap, swatch size/radius, inactive opacity for toggle behavior.

Data Elements

• Points: size, hover size, stroke width/color
• Lines: width, hover width, round caps/joins
• Bars: border radius, gap, hover brightness

Annotations

Reference lines with dash pattern, label background, and positive/negative/warning color variants.

Highlight & Selection

Highlight region fill/border, selection region fill (accent-tinted).

Empty State

Centered muted text for no-data scenarios.

Generated Styles (graph.g.css)

Component classes generated into @layer vibe.components.

Container

• graph — relative positioned, full width, with padding
• graph-canvas — full width/height SVG container
• Ratios: 16x9 · 4x3 · 1x1 · 21x9

Series

• Numbered: color="1" … color="8" — sets stroke and fill from series palette
• Status: color="positive|negative|warning|neutral" — semantic series colors
• Areas: area-flagged series get reduced fill opacity

Data Elements

• graph-point — circle markers with hover size transition
• graph-line — stroked paths with hover width transition
• graph-bar — rounded rects with hover brightness filter

Tooltip

Positioned overlay with label, rows (swatch + value), and auto-layout.

Legend

Flex-wrapped items with swatches, inactive state toggle, and line-style swatch variant.

Crosshair

Dashed pointer-events-none tracking line.

Annotations

Dashed reference lines with label, in positive/negative/warning variants.

Highlight & Selection

SVG rect overlays for region highlighting and brush selection.

TypeScript Types (types/)

GRAPH_SERIES_COUNT  // 8
GraphRatios         // ["16x9", "4x3", "1x1", "21x9"]
GraphStatusSeries   // ["positive", "negative", "warning", "neutral"]
GraphAnnotationVariants // ["positive", "negative", "warning"]

type GraphRatio
type GraphStatusSeriesName
type GraphAnnotationVariant

interface GraphStyleProps { ratio?: GraphRatio }
interface GraphSeriesStyleProps { color?: string }
interface GraphLegendItemStyleProps { inactive?: boolean }
interface GraphLegendSwatchStyleProps { line?: boolean }
interface GraphAnnotationStyleProps { variant?: GraphAnnotationVariant }
// + tooltip, point, line, bar, canvas, empty interfaces

Dist Structure

File	Description
index.css	Barrel — imports tokens + generated styles
graph.css	Token definitions
graph.g.css	Generated component styles
index.js / index.d.ts	TypeScript types + runtime constants

Dependencies

Requires tokens from @vibe-labs/design (colors, surfaces, borders, spacing, typography, elevation, transitions).

Build

npm run build