@amulet-laboratories/hex 0.3.0

package/src/shared/components/data.css

@@ -0,0 +1,418 @@
+/* Hex — Shared Data Components
+ * Styles for Rig's data package: Sparkline, MiniBar, StatCard,
+ * BarChart, LineChart, AreaChart, ScatterPlot, Heatmap,
+ * RadarChart, Treemap, SankeyDiagram
+ */
+
+/* ───────── Sparkline ───────── */
+
+[data-rig-sparkline] {
+  @apply inline-flex items-center;
+}
+
+[data-rig-sparkline-line] {
+  fill: none;
+  stroke: var(--domain-accent, var(--color-primary));
+  stroke-width: 1.5;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+}
+
+[data-rig-sparkline-area] {
+  fill: var(--domain-accent, var(--color-primary));
+  opacity: 0.1;
+}
+
+/* ───────── MiniBar ───────── */
+
+[data-rig-mini-bar] {
+  @apply inline-flex items-end gap-px;
+}
+
+[data-rig-mini-bar-rect] {
+  fill: var(--domain-accent, var(--color-primary));
+  opacity: 0.7;
+  transition: opacity 0.15s ease;
+}
+
+[data-rig-mini-bar-rect]:hover {
+  opacity: 1;
+}
+
+/* ───────── StatCard ───────── */
+
+[data-rig-stat-card] {
+  @apply bg-card text-card-foreground border border-border/50;
+  border-radius: var(--radius);
+}
+
+[data-rig-stat-card-header] {
+  @apply flex items-center justify-between;
+}
+
+[data-rig-stat-card-label] {
+  @apply text-xs text-muted-foreground font-mono uppercase tracking-wider;
+}
+
+[data-rig-stat-card-value] {
+  @apply text-2xl font-mono font-bold;
+}
+
+[data-rig-stat-card-footer] {
+  @apply flex items-center gap-2;
+}
+
+[data-rig-stat-card-trend] {
+  @apply text-xs font-mono;
+}
+
+[data-rig-stat-card-trend][data-trend='up'] {
+  @apply text-success;
+}
+
+[data-rig-stat-card-trend][data-trend='down'] {
+  @apply text-destructive;
+}
+
+[data-rig-stat-card-description] {
+  @apply text-xs text-muted-foreground;
+}
+
+/* ───────── BarChart ───────── */
+
+[data-rig-bar-chart] {
+  @apply text-foreground;
+}
+
+[data-rig-bar-chart-bars] {
+  /* Container group — no direct styling needed */
+}
+
+[data-rig-bar-chart-bar-group] {
+  cursor: pointer;
+}
+
+[data-rig-bar-chart-bar] {
+  fill: var(--domain-accent, var(--color-primary));
+  opacity: 0.8;
+  transition: opacity 0.15s ease;
+}
+
+[data-rig-bar-chart-bar-group]:hover [data-rig-bar-chart-bar] {
+  opacity: 1;
+}
+
+[data-rig-bar-chart-label] {
+  fill: var(--color-muted-foreground);
+  @apply font-mono text-xs;
+}
+
+[data-rig-bar-chart-value] {
+  fill: var(--color-muted-foreground);
+  @apply font-mono text-xs;
+}
+
+/* ───────── LineChart ───────── */
+
+[data-rig-line-chart] {
+  @apply text-foreground;
+}
+
+[data-rig-line-chart-series] {
+  /* Series group — no direct styling needed */
+}
+
+[data-rig-line-chart-line] {
+  fill: none;
+  stroke: var(--domain-accent, var(--color-primary));
+  stroke-width: 2;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+}
+
+[data-rig-line-chart-dot] {
+  fill: var(--domain-accent, var(--color-primary));
+  transition: r 0.15s ease;
+  cursor: pointer;
+}
+
+[data-rig-line-chart-dot]:hover {
+  r: 5;
+}
+
+[data-rig-line-chart-labels] {
+  /* Label group — no direct styling needed */
+}
+
+[data-rig-line-chart-label] {
+  fill: var(--color-muted-foreground);
+  @apply font-mono text-xs;
+}
+
+/* ───────── AreaChart ───────── */
+
+[data-rig-area-chart] {
+  @apply text-foreground;
+}
+
+[data-rig-area-chart-series] {
+  /* Series group — no direct styling needed */
+}
+
+[data-rig-area-chart-fill] {
+  fill: var(--domain-accent, var(--color-primary));
+  opacity: 0.15;
+}
+
+[data-rig-area-chart-line] {
+  fill: none;
+  stroke: var(--domain-accent, var(--color-primary));
+  stroke-width: 2;
+}
+
+[data-rig-area-chart-labels] {
+  /* Label group — no direct styling needed */
+}
+
+[data-rig-area-chart-label] {
+  fill: var(--color-muted-foreground);
+  @apply font-mono text-xs;
+}
+
+/* ───────── ScatterPlot ───────── */
+
+[data-rig-scatter-plot] {
+  @apply text-foreground;
+}
+
+[data-rig-scatter-plot-point] {
+  fill: var(--domain-accent, var(--color-primary));
+  opacity: 0.7;
+  transition:
+    opacity 0.15s ease,
+    r 0.15s ease;
+  cursor: pointer;
+}
+
+[data-rig-scatter-plot-point]:hover {
+  opacity: 1;
+}
+
+[data-rig-scatter-plot] text {
+  fill: var(--color-muted-foreground);
+  @apply font-mono text-xs;
+}
+
+/* ───────── Heatmap ───────── */
+
+[data-rig-heatmap] {
+  @apply text-foreground;
+}
+
+[data-rig-heatmap-col-labels] {
+  /* Column label group — no direct styling needed */
+}
+
+[data-rig-heatmap-row-labels] {
+  /* Row label group — no direct styling needed */
+}
+
+[data-rig-heatmap-col-labels] text,
+[data-rig-heatmap-row-labels] text {
+  fill: var(--color-muted-foreground);
+  @apply font-mono text-xs;
+}
+
+[data-rig-heatmap-cells] {
+  /* Cells container group — no direct styling needed */
+}
+
+[data-rig-heatmap-cell] {
+  stroke: var(--color-background);
+  stroke-width: 1;
+  transition: opacity 0.15s ease;
+  cursor: pointer;
+}
+
+[data-rig-heatmap-cell]:hover {
+  opacity: 0.85;
+}
+
+/* ───────── RadarChart ───────── */
+
+[data-rig-radar-chart] {
+  @apply text-foreground;
+}
+
+[data-rig-radar-chart-ring] {
+  fill: none;
+  stroke: var(--color-border);
+  opacity: 0.3;
+}
+
+[data-rig-radar-chart-axis] {
+  stroke: var(--color-border);
+  opacity: 0.2;
+}
+
+[data-rig-radar-chart-series] {
+  /* Series group — no direct styling needed */
+}
+
+[data-rig-radar-chart-area] {
+  fill: var(--domain-accent, var(--color-primary));
+  opacity: 0.2;
+}
+
+[data-rig-radar-chart-line] {
+  fill: none;
+  stroke: var(--domain-accent, var(--color-primary));
+  stroke-width: 2;
+}
+
+[data-rig-radar-chart-label] {
+  fill: var(--color-muted-foreground);
+  @apply font-mono text-xs;
+}
+
+/* ───────── Treemap ───────── */
+
+[data-rig-treemap] {
+  @apply text-foreground;
+}
+
+[data-rig-treemap-node] {
+  cursor: pointer;
+}
+
+[data-rig-treemap-rect] {
+  stroke: var(--color-background);
+  stroke-width: 2;
+  transition: opacity 0.15s ease;
+}
+
+[data-rig-treemap-node]:hover [data-rig-treemap-rect] {
+  opacity: 0.85;
+}
+
+[data-rig-treemap-label] {
+  fill: var(--color-foreground);
+  @apply font-mono text-xs;
+  pointer-events: none;
+}
+
+/* ───────── SankeyDiagram ───────── */
+
+[data-rig-sankey-diagram] {
+  @apply text-foreground;
+}
+
+[data-rig-sankey-diagram-node] {
+  cursor: pointer;
+}
+
+[data-rig-sankey-diagram-rect] {
+  fill: var(--domain-accent, var(--color-primary));
+}
+
+[data-rig-sankey-diagram-label] {
+  fill: var(--color-muted-foreground);
+  @apply font-mono text-xs;
+}
+
+[data-rig-sankey-diagram-link] {
+  fill: none;
+  stroke: var(--color-muted-foreground);
+  opacity: 0.3;
+  transition: opacity 0.15s ease;
+}
+
+[data-rig-sankey-diagram-link]:hover {
+  opacity: 0.6;
+}
+
+/* ───────── StatRow ───────── */
+
+[data-rig-stat-row] {
+  @apply flex items-center justify-between text-xs font-mono;
+}
+
+[data-rig-stat-row][data-separator] {
+  padding-top: 4px;
+  border-top: 1px solid color-mix(in srgb, var(--color-border) 50%, transparent);
+}
+
+[data-rig-stat-row-label] {
+  color: color-mix(in srgb, var(--color-muted-foreground) 70%, transparent);
+}
+
+[data-rig-stat-row-value] {
+  color: var(--color-foreground);
+}
+
+[data-rig-stat-row][data-bold] [data-rig-stat-row-value] {
+  font-weight: 700;
+}
+
+[data-rig-stat-row][data-tone='success'] [data-rig-stat-row-value] {
+  color: var(--color-success);
+}
+
+[data-rig-stat-row][data-tone='danger'] [data-rig-stat-row-value] {
+  color: var(--color-destructive);
+}
+
+[data-rig-stat-row][data-tone='warning'] [data-rig-stat-row-value] {
+  color: var(--color-warning);
+}
+
+[data-rig-stat-row][data-tone='info'] [data-rig-stat-row-value] {
+  color: var(--color-info);
+}
+
+[data-rig-stat-row][data-tone='muted'] [data-rig-stat-row-value] {
+  color: var(--color-muted-foreground);
+}
+
+/* ───────── ChartTooltip ───────── */
+
+[data-rig-chart-tooltip] {
+  @apply absolute pointer-events-none z-50 text-foreground;
+
+  border-radius: 3px;
+  padding: 4px 8px;
+  font-size: 13px;
+  line-height: normal;
+  background: var(--rig-widget-bg, var(--color-popover));
+  border: 1px solid var(--rig-widget-border, var(--color-border));
+  box-shadow: 0 2px 8px rgb(0 0 0 / 36%);
+}
+
+/* ───────── ChartEmpty ───────── */
+
+[data-rig-chart-empty] {
+  @apply flex flex-col items-center justify-center text-center;
+
+  height: 100%;
+  min-height: 300px;
+  padding: 0 24px;
+}
+
+[data-rig-chart-empty-icon] {
+  color: var(--color-muted-foreground);
+  font-size: 30px;
+  margin-bottom: 12px;
+}
+
+[data-rig-chart-empty-label] {
+  @apply font-mono text-sm;
+
+  color: color-mix(in srgb, var(--color-foreground) 40%, transparent);
+  margin: 0;
+}
+
+[data-rig-chart-empty-hint] {
+  @apply text-xs text-muted-foreground;
+
+  margin: 4px 0 0;
+}