@stephen-netu/design-system 0.1.0

package/src/base.css

@@ -0,0 +1,152 @@
+/* @kos/design-system - Base Styles */
+@import url('https://fonts.googleapis.com/css2?family=Crimson+Pro:ital,wght@0,300..900;1,300..900&family=Outfit:wght@100..900&display=swap');
+@import './p0-primitives/tokens/tokens.css';
+
+/* --- Reset & Global --- */
+*, *::before, *::after {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
+
+html {
+  font-family: var(--font-sans);
+  font-size: 16px;
+  line-height: 1.5;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  text-rendering: optimizeLegibility;
+  background-color: var(--color-bg-app);
+  color: var(--color-text-primary);
+  /* The design system defaults to dark mode */
+  color-scheme: dark;
+}
+
+[data-theme="light"], .theme-light {
+  color-scheme: light;
+}
+
+body {
+  width: 100vw;
+  height: 100vh;
+  overflow: hidden;
+}
+
+/* --- Scrollbars --- */
+::-webkit-scrollbar {
+  width: 8px;
+  height: 8px;
+}
+
+::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+::-webkit-scrollbar-thumb {
+  background: rgba(184, 115, 51, 0.2); /* Brass tinted scrollbar */
+  border-radius: var(--radius-full);
+  border: 2px solid transparent;
+  background-clip: padding-box;
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background: var(--color-accent-subtle);
+  border: 1px solid transparent;
+  background-clip: padding-box;
+}
+
+/* --- Focus Management --- */
+:focus-visible {
+  outline: 2px solid var(--color-accent);
+  outline-offset: 2px;
+}
+
+a {
+  color: var(--color-accent);
+  text-decoration: none;
+  transition: color var(--transition-fast);
+}
+
+a:hover {
+  color: var(--color-accent-hover);
+}
+
+/* --- Selection --- */
+::selection {
+  background-color: var(--color-accent-subtle);
+  color: var(--color-accent-hover);
+}
+
+/* --- Utility Classes --- */
+
+/* Typography */
+h1, .ds-text-h1 { font-family: var(--font-sans); font-size: var(--text-4xl); font-weight: 700; line-height: 1.1; letter-spacing: -0.02em; }
+h2, .ds-text-h2 { font-family: var(--font-sans); font-size: var(--text-3xl); font-weight: 600; line-height: 1.2; letter-spacing: -0.01em; }
+h3, .ds-text-h3 { font-family: var(--font-sans); font-size: var(--text-2xl); font-weight: 600; line-height: 1.3; }
+h4, .ds-text-h4 { font-family: var(--font-sans); font-size: var(--text-xl); font-weight: 500; line-height: 1.4; }
+h5, .ds-text-h5 { font-family: var(--font-sans); font-size: var(--text-lg); font-weight: 500; line-height: 1.4; }
+h6, .ds-text-h6 { font-family: var(--font-sans); font-size: var(--text-base); font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--color-text-secondary); }
+
+p, .ds-text-body { font-size: var(--text-base); line-height: 1.6; color: var(--color-text-secondary); }
+small, .ds-text-sm { font-size: var(--text-sm); }
+.ds-text-xs { font-size: var(--text-xs); }
+.ds-text-muted { color: var(--color-text-muted); }
+
+code, pre {
+  font-family: var(--font-mono);
+  font-size: 0.9em;
+  background: var(--color-bg-panel-elevated);
+  padding: 0.2em 0.4em;
+  border-radius: var(--radius-sm);
+  color: var(--color-accent-hover);
+}
+
+/* Layout Primitives */
+.ds-stack {
+  display: flex;
+  flex-direction: column;
+}
+
+.ds-stack-1 { gap: var(--space-1); }
+.ds-stack-2 { gap: var(--space-2); }
+.ds-stack-3 { gap: var(--space-3); }
+.ds-stack-4 { gap: var(--space-4); }
+.ds-stack-5 { gap: var(--space-5); }
+.ds-stack-6 { gap: var(--space-6); }
+
+.ds-flex { display: flex; }
+.ds-flex-row { flex-direction: row; }
+.ds-flex-col { flex-direction: column; }
+.ds-items-center { align-items: center; }
+.ds-justify-between { justify-content: space-between; }
+.ds-justify-center { justify-content: center; }
+.ds-flex-wrap { flex-wrap: wrap; }
+
+.ds-grid {
+  display: grid;
+}
+
+.ds-canvas-grid {
+  background-image: 
+    linear-gradient(var(--grid-line) 1px, transparent 1px),
+    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
+  background-size: 40px 40px;
+}
+
+.ds-canvas-dots {
+  background-image: radial-gradient(var(--grid-dot) 1px, transparent 1px);
+  background-size: 20px 20px;
+}
+
+/* Accessibility */
+.sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border-width: 0;
+}

package/src/d0-data-viz/BarChart.svelte

@@ -0,0 +1,236 @@
+<script lang="ts">
+  import type { DataSeries } from './types';
+
+  interface BarChartProps {
+    series: DataSeries[];
+    width?: number;
+    height?: number;
+    orientation?: 'vertical' | 'horizontal';
+    showLabels?: boolean;
+    showGrid?: boolean;
+  }
+
+  let {
+    series,
+    width = 400,
+    height = 300,
+    orientation = 'vertical',
+    showLabels = true,
+    showGrid = true,
+  }: BarChartProps = $props();
+
+  const PADDING = { top: 16, right: 16, bottom: 32, left: 48 };
+  const GRID_LINES = 5;
+
+  let allPoints = $derived(series.flatMap((s) => s.data));
+
+  let maxValue = $derived(
+    allPoints.length > 0 ? Math.max(...allPoints.map((p) => p.value)) : 0
+  );
+
+  let chartWidth = $derived(width - PADDING.left - PADDING.right);
+  let chartHeight = $derived(height - PADDING.top - PADDING.bottom);
+
+  let gridValues = $derived(
+    Array.from({ length: GRID_LINES + 1 }, (_, i) =>
+      maxValue > 0 ? (maxValue / GRID_LINES) * i : 0
+    )
+  );
+
+  /** Flatten all points across series for bar layout. */
+  let flatBars = $derived.by(() => {
+    const bars: Array<{
+      label: string;
+      value: number;
+      color: string | undefined;
+      seriesIndex: number;
+      pointIndex: number;
+    }> = [];
+    for (let si = 0; si < series.length; si++) {
+      const s = series[si];
+      const seriesColor = s.color ?? undefined;
+      for (let pi = 0; pi < s.data.length; pi++) {
+        const pt = s.data[pi];
+        bars.push({
+          label: pt.label,
+          value: pt.value,
+          color: pt.color ?? seriesColor,
+          seriesIndex: si,
+          pointIndex: pi,
+        });
+      }
+    }
+    return bars;
+  });
+
+  let barGap = $derived(flatBars.length > 0
+    ? (orientation === 'vertical'
+        ? chartWidth / flatBars.length
+        : chartHeight / flatBars.length)
+    : 0
+  );
+
+  let barWidth = $derived(Math.max(barGap * 0.7, 2));
+
+  function barGeometry(index: number, value: number) {
+    const ratio = maxValue > 0 ? value / maxValue : 0;
+    if (orientation === 'vertical') {
+      const barH = chartHeight * ratio;
+      return {
+        x: PADDING.left + index * barGap + (barGap - barWidth) / 2,
+        y: PADDING.top + chartHeight - barH,
+        w: barWidth,
+        h: barH,
+      };
+    }
+    const barW = chartWidth * ratio;
+    return {
+      x: PADDING.left,
+      y: PADDING.top + index * barGap + (barGap - barWidth) / 2,
+      w: barW,
+      h: barWidth,
+    };
+  }
+</script>
+
+<svg
+  class="d0-bar-chart"
+  viewBox="0 0 {width} {height}"
+  xmlns="http://www.w3.org/2000/svg"
+  role="img"
+  aria-label="Bar chart"
+>
+  <!-- Background -->
+  <rect
+    class="d0-chart-bg"
+    x={0}
+    y={0}
+    width={width}
+    height={height}
+    rx={6}
+    ry={6}
+  />
+
+  <!-- Grid lines -->
+  {#if showGrid}
+    {#each gridValues as gv, i}
+      {#if orientation === 'vertical'}
+        {@const gy = PADDING.top + chartHeight - (maxValue > 0 ? (gv / maxValue) * chartHeight : 0)}
+        <line
+          class="d0-grid-line"
+          x1={PADDING.left}
+          y1={gy}
+          x2={PADDING.left + chartWidth}
+          y2={gy}
+        />
+        {#if showLabels}
+          <text
+            class="d0-axis-label"
+            x={PADDING.left - 6}
+            y={gy + 4}
+            text-anchor="end"
+          >
+            {Math.round(gv)}
+          </text>
+        {/if}
+      {:else}
+        {@const gx = PADDING.left + (maxValue > 0 ? (gv / maxValue) * chartWidth : 0)}
+        <line
+          class="d0-grid-line"
+          x1={gx}
+          y1={PADDING.top}
+          x2={gx}
+          y2={PADDING.top + chartHeight}
+        />
+        {#if showLabels}
+          <text
+            class="d0-axis-label"
+            x={gx}
+            y={PADDING.top + chartHeight + 16}
+            text-anchor="middle"
+          >
+            {Math.round(gv)}
+          </text>
+        {/if}
+      {/if}
+    {/each}
+  {/if}
+
+  <!-- Bars -->
+  {#each flatBars as bar, idx (idx)}
+    {@const geo = barGeometry(idx, bar.value)}
+    <rect
+      class="d0-bar"
+      x={geo.x}
+      y={geo.y}
+      width={geo.w}
+      height={geo.h}
+      fill={bar.color ?? undefined}
+      rx={2}
+      ry={2}
+    >
+      <title>{bar.label}: {bar.value}</title>
+    </rect>
+
+    <!-- Bar labels -->
+    {#if showLabels}
+      {#if orientation === 'vertical'}
+        <text
+          class="d0-bar-label"
+          x={geo.x + geo.w / 2}
+          y={PADDING.top + chartHeight + 16}
+          text-anchor="middle"
+        >
+          {bar.label}
+        </text>
+      {:else}
+        <text
+          class="d0-bar-label"
+          x={PADDING.left - 6}
+          y={geo.y + geo.h / 2 + 4}
+          text-anchor="end"
+        >
+          {bar.label}
+        </text>
+      {/if}
+    {/if}
+  {/each}
+</svg>
+
+<style>
+  .d0-bar-chart {
+    display: block;
+    width: 100%;
+    height: auto;
+  }
+
+  .d0-chart-bg {
+    fill: var(--d0-chart-bg, #222);
+  }
+
+  .d0-grid-line {
+    stroke: var(--d0-chart-grid, rgba(184, 115, 51, 0.1));
+    stroke-width: 1;
+  }
+
+  .d0-axis-label {
+    fill: var(--d0-chart-text, #a09880);
+    font-family: var(--font-sans, system-ui, sans-serif);
+    font-size: 10px;
+  }
+
+  .d0-bar {
+    fill: var(--d0-chart-accent, #b87333);
+    transition: opacity 150ms ease;
+  }
+
+  .d0-bar:hover {
+    opacity: 0.8;
+  }
+
+  .d0-bar-label {
+    fill: var(--d0-chart-text, #a09880);
+    font-family: var(--font-sans, system-ui, sans-serif);
+    font-size: 10px;
+  }
+</style>