@24vlh/vds 0.1.0

package/dist/components/charts.css

@@ -0,0 +1,502 @@
+/************************************************************
+ * VLAH DESIGN SYSTEM (VDS) - Charts / Data Visualization
+ *
+ *  Responsibilities:
+ *    - Provide a tokenised foundation for data-viz: chart palettes,
+ *      gridlines, axis styling, series families, loading patterns,
+ *      and structural layout containers
+ *    - Define chart containers (header, meta, actions, body, legend)
+ *      that reliably wrap SVG, canvas, or third-party chart libraries
+ *    - Expose semantic series tokens (1–6) and positive/negative/neutral
+ *      mappings aligned with VDS semantic color architecture
+ *    - Supply empty, error, and loading states for dashboard reliability
+ *
+ *  System Notes:
+ *    - Pure CSS; no assumptions about Chart.js, ECharts, Recharts, D3, or SVG
+ *    - Fully theme-driven: all colors flow from active theme tokens
+ *    - API-agnostic: classes apply to SVG <path>, <line>, <text>, and bars
+ *      regardless of rendering engine
+ *    - Loading shimmer and series-soft areas use `color-mix` for adaptive contrast
+ ************************************************************/
+
+/* ---------------------------------------------------------
+   1. CHART TOKEN DEFINITIONS (extend root)
+--------------------------------------------------------- */
+
+[data-vds-chart],
+.vds-chart {
+    --chart-min-height-sm: 10rem;
+    --chart-min-height: 14rem;
+    --chart-min-height-lg: 18rem;
+
+    --chart-padding-sm: var(--space-3);
+    --chart-padding: var(--space-4);
+    --chart-padding-lg: var(--space-6);
+
+    --chart-gap: var(--space-3);
+    --chart-legend-gap: var(--space-2);
+
+    --chart-axis-color: var(--color-text-soft);
+    --chart-axis-text-color: var(--color-text-muted);
+    --chart-gridline-color: color-mix(in srgb, var(--color-border-subtle) 70%, transparent);
+    --chart-gridline-emph: color-mix(in srgb, var(--color-border-strong) 80%, transparent);
+
+    --chart-surface-bg: var(--color-surface);
+    --chart-surface-subtle: var(--color-surface-subtle);
+    --chart-border-color: var(--color-border-subtle);
+
+    --chart-series-1: var(--color-accent);
+    --chart-series-1-soft: color-mix(in srgb, var(--color-accent) 18%, transparent);
+    --chart-series-1-line: color-mix(in srgb, var(--color-accent) 80%, black 5%);
+
+    --chart-series-2: var(--color-success);
+    --chart-series-2-soft: color-mix(in srgb, var(--color-success) 18%, transparent);
+    --chart-series-2-line: color-mix(in srgb, var(--color-success) 80%, black 5%);
+
+    --chart-series-3: var(--color-info);
+    --chart-series-3-soft: color-mix(in srgb, var(--color-info) 18%, transparent);
+    --chart-series-3-line: color-mix(in srgb, var(--color-info) 80%, black 5%);
+
+    --chart-series-4: var(--color-warning);
+    --chart-series-4-soft: color-mix(in srgb, var(--color-warning) 18%, transparent);
+    --chart-series-4-line: color-mix(in srgb, var(--color-warning) 80%, black 5%);
+
+    --chart-series-5: var(--color-danger);
+    --chart-series-5-soft: color-mix(in srgb, var(--color-danger) 18%, transparent);
+    --chart-series-5-line: color-mix(in srgb, var(--color-danger) 80%, black 5%);
+
+    --chart-series-6: var(--color-text-muted, var(--color-text-soft));
+    --chart-series-6-soft: color-mix(in srgb, var(--chart-series-6) 18%, transparent);
+    --chart-series-6-line: color-mix(in srgb, var(--chart-series-6) 80%, black 5%);
+
+    --chart-series-positive: var(--color-success);
+    --chart-series-negative: var(--color-danger);
+    --chart-series-neutral: var(--color-muted-border);
+
+    --chart-loading-stripes: linear-gradient(
+            90deg,
+            var(--color-muted-bg),
+            var(--color-surface),
+            var(--color-muted-bg)
+    );
+}
+
+/* ---------------------------------------------------------
+   2. CHART CONTAINERS
+--------------------------------------------------------- */
+
+.chart {
+    display: flex;
+    flex-direction: column;
+    gap: var(--chart-gap);
+    padding: var(--chart-padding);
+    background-color: var(--chart-surface-bg);
+    border-radius: var(--radius-md);
+    border: var(--border-width) solid var(--chart-border-color);
+    min-height: var(--chart-min-height);
+}
+
+.chart--sm {
+    padding: var(--chart-padding-sm);
+    min-height: var(--chart-min-height-sm);
+}
+
+.chart--lg {
+    padding: var(--chart-padding-lg);
+    min-height: var(--chart-min-height-lg);
+}
+
+.chart--bare {
+    background-color: transparent;
+    border: none;
+    padding: 0;
+    border-radius: 0;
+}
+
+.card .chart {
+    border: none;
+    padding: 0;
+    background-color: transparent;
+    min-height: var(--chart-min-height);
+}
+
+/* ---------------------------------------------------------
+   3. HEADER, META & ACTIONS
+--------------------------------------------------------- */
+
+.chart__header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: var(--space-3);
+}
+
+.chart__title {
+    font-size: var(--text-sm);
+    font-weight: var(--font-weight-semibold);
+    color: var(--color-text);
+}
+
+.chart__subtitle {
+    margin-top: var(--space-1);
+    font-size: var(--text-xs);
+    color: var(--color-text-muted);
+}
+
+.chart__meta {
+    display: flex;
+    align-items: center;
+    gap: var(--space-2);
+    font-size: var(--text-xs);
+    color: var(--color-text-muted);
+}
+
+.chart__meta-item {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--space-1);
+    white-space: nowrap;
+}
+
+.chart__meta-dot {
+    width: var(--space-1_5);
+    height: var(--space-1_5);
+    border-radius: var(--radius-full);
+    background-color: var(--color-border-subtle);
+}
+
+.chart__actions {
+    display: flex;
+    align-items: center;
+    gap: var(--space-2);
+}
+
+/* ---------------------------------------------------------
+   4. BODY & CANVAS WRAPPER
+--------------------------------------------------------- */
+
+.chart__body {
+    position: relative;
+    flex: 1 1 auto;
+    min-height: var(--chart-min-height-sm);
+    display: flex;
+    align-items: stretch;
+}
+
+.chart__canvas {
+    flex: 1 1 auto;
+    min-height: inherit;
+    position: relative;
+}
+
+.chart__canvas canvas,
+.chart__canvas svg {
+    width: 100% !important;
+    height: 100% !important;
+}
+
+.chart__canvas canvas,
+.chart__canvas svg {
+    display: block;
+}
+
+/* ---------------------------------------------------------
+   5. LEGEND SYSTEM
+--------------------------------------------------------- */
+
+.chart__legend {
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--chart-legend-gap);
+    align-items: center;
+    font-size: var(--text-xs);
+    color: var(--color-text-muted);
+}
+
+.chart__legend--right {
+    margin-left: auto;
+    justify-content: flex-end;
+}
+
+.chart-legend__item {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--space-1_5);
+}
+
+.chart-legend__swatch {
+    width: var(--space-2);
+    height: var(--space-2);
+    border-radius: var(--radius-full);
+    background-color: var(--chart-series-1);
+    box-shadow: 0 0 0 1px color-mix(in srgb, var(--color-bg-soft) 70%, transparent);
+}
+
+.chart-legend__swatch--1 {
+    background-color: var(--chart-series-1);
+}
+
+.chart-legend__swatch--2 {
+    background-color: var(--chart-series-2);
+}
+
+.chart-legend__swatch--3 {
+    background-color: var(--chart-series-3);
+}
+
+.chart-legend__swatch--4 {
+    background-color: var(--chart-series-4);
+}
+
+.chart-legend__swatch--5 {
+    background-color: var(--chart-series-5);
+}
+
+.chart-legend__swatch--6 {
+    background-color: var(--chart-series-6);
+}
+
+.chart-legend__label {
+    white-space: nowrap;
+}
+
+/* ---------------------------------------------------------
+   6. AXES & GRIDLINE HOOKS (SVG / Canvas wrappers)
+--------------------------------------------------------- */
+
+.chart-axis line,
+.chart-axis path {
+    stroke: var(--chart-axis-color);
+    stroke-width: 1;
+}
+
+.chart-axis text {
+    fill: var(--chart-axis-text-color);
+    font-size: var(--text-xxs);
+}
+
+.chart-axis--x text {
+    dominant-baseline: hanging;
+}
+
+.chart-axis--y text {
+    dominant-baseline: middle;
+}
+
+.chart-grid line {
+    stroke: var(--chart-gridline-color);
+    stroke-width: 1;
+    shape-rendering: crispEdges;
+}
+
+.chart-grid line[data-major="true"],
+.chart-grid line.major {
+    stroke: var(--chart-gridline-emph);
+}
+
+/* ---------------------------------------------------------
+   7. SERIES HOOKS (lines, areas, bars)
+   Apply to SVG elements created by chart libs or custom D3.
+--------------------------------------------------------- */
+
+.chart-series--1 {
+    stroke: var(--chart-series-1-line);
+    fill: none;
+}
+
+.chart-series--2 {
+    stroke: var(--chart-series-2-line);
+    fill: none;
+}
+
+.chart-series--3 {
+    stroke: var(--chart-series-3-line);
+    fill: none;
+}
+
+.chart-series--4 {
+    stroke: var(--chart-series-4-line);
+    fill: none;
+}
+
+.chart-series--5 {
+    stroke: var(--chart-series-5-line);
+    fill: none;
+}
+
+.chart-series--6 {
+    stroke: var(--chart-series-6-line);
+    fill: none;
+}
+
+.chart-area--1 {
+    fill: var(--chart-series-1-soft);
+}
+
+.chart-area--2 {
+    fill: var(--chart-series-2-soft);
+}
+
+.chart-area--3 {
+    fill: var(--chart-series-3-soft);
+}
+
+.chart-area--4 {
+    fill: var(--chart-series-4-soft);
+}
+
+.chart-area--5 {
+    fill: var(--chart-series-5-soft);
+}
+
+.chart-area--6 {
+    fill: var(--chart-series-6-soft);
+}
+
+.chart-bar--1 {
+    background-color: var(--chart-series-1);
+    fill: var(--chart-series-1);
+}
+
+.chart-bar--2 {
+    background-color: var(--chart-series-2);
+    fill: var(--chart-series-2);
+}
+
+.chart-bar--3 {
+    background-color: var(--chart-series-3);
+    fill: var(--chart-series-3);
+}
+
+.chart-bar--4 {
+    background-color: var(--chart-series-4);
+    fill: var(--chart-series-4);
+}
+
+.chart-bar--5 {
+    background-color: var(--chart-series-5);
+    fill: var(--chart-series-5);
+}
+
+.chart-bar--6 {
+    background-color: var(--chart-series-6);
+    fill: var(--chart-series-6);
+}
+
+.chart-bar--positive {
+    background-color: var(--chart-series-positive);
+    fill: var(--chart-series-positive);
+}
+
+.chart-bar--negative {
+    background-color: var(--chart-series-negative);
+    fill: var(--chart-series-negative);
+}
+
+.chart-bar--neutral {
+    background-color: var(--chart-series-neutral);
+    fill: var(--chart-series-neutral);
+}
+
+/* ---------------------------------------------------------
+   8. EMPTY / ERROR / LOADING STATES
+--------------------------------------------------------- */
+
+.chart--empty .chart__canvas,
+.chart--error .chart__canvas,
+.chart--loading .chart__canvas {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.chart-state {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: var(--space-2);
+    text-align: center;
+    max-width: 26rem;
+}
+
+.chart-state__icon {
+    width: var(--icon-lg);
+    height: var(--icon-lg);
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    color: var(--color-text-soft);
+}
+
+.chart-state__title {
+    font-size: var(--text-sm);
+    font-weight: var(--font-weight-medium);
+    color: var(--color-text);
+}
+
+.chart-state__body {
+    font-size: var(--text-xs);
+    color: var(--color-text-muted);
+}
+
+.chart--empty .chart-state__icon {
+    color: var(--color-text-soft);
+}
+
+.chart--error .chart-state__icon {
+    color: var(--color-danger);
+}
+
+.chart--loading .chart__canvas::before {
+    content: "";
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    border-radius: var(--radius-md);
+    background-image: var(--chart-loading-stripes);
+    background-size: 200% 100%;
+    opacity: 0.55;
+    animation: chart-loading-shimmer 1.4s infinite;
+}
+
+/* ---------------------------------------------------------
+   9. RESPONSIVE TUNING
+--------------------------------------------------------- */
+
+@media (max-width: 768px) {
+    .chart {
+        padding: var(--chart-padding-sm);
+        min-height: var(--chart-min-height-sm);
+    }
+
+    .chart__header {
+        flex-direction: column;
+        align-items: flex-start;
+        gap: var(--space-2);
+    }
+
+    .chart__actions {
+        width: 100%;
+        justify-content: flex-start;
+        flex-wrap: wrap;
+    }
+
+    .chart__legend {
+        width: 100%;
+    }
+}
+
+/* ---------------------------------------------------------
+   10. ANIMATIONS
+--------------------------------------------------------- */
+
+@keyframes chart-loading-shimmer {
+    0% {
+        background-position: -150% 0;
+    }
+    100% {
+        background-position: 150% 0;
+    }
+}

package/dist/components/charts.min.css

@@ -0,0 +1 @@
+.vds-chart,[data-vds-chart]{--chart-min-height-sm:10rem;--chart-min-height:14rem;--chart-min-height-lg:18rem;--chart-padding-sm:var(--space-3);--chart-padding:var(--space-4);--chart-padding-lg:var(--space-6);--chart-gap:var(--space-3);--chart-legend-gap:var(--space-2);--chart-axis-color:var(--color-text-soft);--chart-axis-text-color:var(--color-text-muted);--chart-gridline-color:color-mix(in srgb,var(--color-border-subtle) 70%,transparent);--chart-gridline-emph:color-mix(in srgb,var(--color-border-strong) 80%,transparent);--chart-surface-bg:var(--color-surface);--chart-surface-subtle:var(--color-surface-subtle);--chart-border-color:var(--color-border-subtle);--chart-series-1:var(--color-accent);--chart-series-1-soft:color-mix(in srgb,var(--color-accent) 18%,transparent);--chart-series-1-line:color-mix(in srgb,var(--color-accent) 80%,#000 5%);--chart-series-2:var(--color-success);--chart-series-2-soft:color-mix(in srgb,var(--color-success) 18%,transparent);--chart-series-2-line:color-mix(in srgb,var(--color-success) 80%,#000 5%);--chart-series-3:var(--color-info);--chart-series-3-soft:color-mix(in srgb,var(--color-info) 18%,transparent);--chart-series-3-line:color-mix(in srgb,var(--color-info) 80%,#000 5%);--chart-series-4:var(--color-warning);--chart-series-4-soft:color-mix(in srgb,var(--color-warning) 18%,transparent);--chart-series-4-line:color-mix(in srgb,var(--color-warning) 80%,#000 5%);--chart-series-5:var(--color-danger);--chart-series-5-soft:color-mix(in srgb,var(--color-danger) 18%,transparent);--chart-series-5-line:color-mix(in srgb,var(--color-danger) 80%,#000 5%);--chart-series-6:var(--color-text-muted,var(--color-text-soft));--chart-series-6-soft:color-mix(in srgb,var(--chart-series-6) 18%,transparent);--chart-series-6-line:color-mix(in srgb,var(--chart-series-6) 80%,#000 5%);--chart-series-positive:var(--color-success);--chart-series-negative:var(--color-danger);--chart-series-neutral:var(--color-muted-border);--chart-loading-stripes:linear-gradient(90deg,var(--color-muted-bg),var(--color-surface),var(--color-muted-bg))}.chart{background-color:var(--chart-surface-bg);border:var(--border-width) solid var(--chart-border-color);border-radius:var(--radius-md);display:flex;flex-direction:column;gap:var(--chart-gap);min-height:var(--chart-min-height);padding:var(--chart-padding)}.chart--sm{min-height:var(--chart-min-height-sm);padding:var(--chart-padding-sm)}.chart--lg{min-height:var(--chart-min-height-lg);padding:var(--chart-padding-lg)}.chart--bare{border:none;border-radius:0}.card .chart,.chart--bare{background-color:transparent;padding:0}.card .chart{border:none;min-height:var(--chart-min-height)}.chart__header{align-items:center;display:flex;gap:var(--space-3);justify-content:space-between}.chart__title{color:var(--color-text);font-size:var(--text-sm);font-weight:var(--font-weight-semibold)}.chart__subtitle{margin-top:var(--space-1)}.chart__meta,.chart__subtitle{color:var(--color-text-muted);font-size:var(--text-xs)}.chart__meta{align-items:center;display:flex;gap:var(--space-2)}.chart__meta-item{align-items:center;display:inline-flex;gap:var(--space-1);white-space:nowrap}.chart__meta-dot{background-color:var(--color-border-subtle);border-radius:var(--radius-full);height:var(--space-1_5);width:var(--space-1_5)}.chart__actions{align-items:center;display:flex;gap:var(--space-2)}.chart__body{align-items:stretch;display:flex;min-height:var(--chart-min-height-sm)}.chart__body,.chart__canvas{flex:1 1 auto;position:relative}.chart__canvas{min-height:inherit}.chart__canvas canvas,.chart__canvas svg{display:block;height:100%!important;width:100%!important}.chart__legend{align-items:center;color:var(--color-text-muted);display:flex;flex-wrap:wrap;font-size:var(--text-xs);gap:var(--chart-legend-gap)}.chart__legend--right{justify-content:flex-end;margin-left:auto}.chart-legend__item{align-items:center;display:inline-flex;gap:var(--space-1_5)}.chart-legend__swatch{border-radius:var(--radius-full);box-shadow:0 0 0 1px color-mix(in srgb,var(--color-bg-soft) 70%,transparent);height:var(--space-2);width:var(--space-2)}.chart-legend__swatch,.chart-legend__swatch--1{background-color:var(--chart-series-1)}.chart-legend__swatch--2{background-color:var(--chart-series-2)}.chart-legend__swatch--3{background-color:var(--chart-series-3)}.chart-legend__swatch--4{background-color:var(--chart-series-4)}.chart-legend__swatch--5{background-color:var(--chart-series-5)}.chart-legend__swatch--6{background-color:var(--chart-series-6)}.chart-legend__label{white-space:nowrap}.chart-axis line,.chart-axis path{stroke:var(--chart-axis-color);stroke-width:1}.chart-axis text{fill:var(--chart-axis-text-color);font-size:var(--text-xxs)}.chart-axis--x text{dominant-baseline:hanging}.chart-axis--y text{dominant-baseline:middle}.chart-grid line{stroke:var(--chart-gridline-color);stroke-width:1;shape-rendering:crispEdges}.chart-grid line.major,.chart-grid line[data-major=true]{stroke:var(--chart-gridline-emph)}.chart-series--1{stroke:var(--chart-series-1-line);fill:none}.chart-series--2{stroke:var(--chart-series-2-line);fill:none}.chart-series--3{stroke:var(--chart-series-3-line);fill:none}.chart-series--4{stroke:var(--chart-series-4-line);fill:none}.chart-series--5{stroke:var(--chart-series-5-line);fill:none}.chart-series--6{stroke:var(--chart-series-6-line);fill:none}.chart-area--1{fill:var(--chart-series-1-soft)}.chart-area--2{fill:var(--chart-series-2-soft)}.chart-area--3{fill:var(--chart-series-3-soft)}.chart-area--4{fill:var(--chart-series-4-soft)}.chart-area--5{fill:var(--chart-series-5-soft)}.chart-area--6{fill:var(--chart-series-6-soft)}.chart-bar--1{fill:var(--chart-series-1);background-color:var(--chart-series-1)}.chart-bar--2{fill:var(--chart-series-2);background-color:var(--chart-series-2)}.chart-bar--3{fill:var(--chart-series-3);background-color:var(--chart-series-3)}.chart-bar--4{fill:var(--chart-series-4);background-color:var(--chart-series-4)}.chart-bar--5{fill:var(--chart-series-5);background-color:var(--chart-series-5)}.chart-bar--6{fill:var(--chart-series-6);background-color:var(--chart-series-6)}.chart-bar--positive{fill:var(--chart-series-positive);background-color:var(--chart-series-positive)}.chart-bar--negative{fill:var(--chart-series-negative);background-color:var(--chart-series-negative)}.chart-bar--neutral{fill:var(--chart-series-neutral);background-color:var(--chart-series-neutral)}.chart--empty .chart__canvas,.chart--error .chart__canvas,.chart--loading .chart__canvas{align-items:center;display:flex;justify-content:center}.chart-state{align-items:center;display:flex;flex-direction:column;gap:var(--space-2);max-width:26rem;text-align:center}.chart-state__icon{align-items:center;color:var(--color-text-soft);display:inline-flex;height:var(--icon-lg);justify-content:center;width:var(--icon-lg)}.chart-state__title{color:var(--color-text);font-size:var(--text-sm);font-weight:var(--font-weight-medium)}.chart-state__body{color:var(--color-text-muted);font-size:var(--text-xs)}.chart--empty .chart-state__icon{color:var(--color-text-soft)}.chart--error .chart-state__icon{color:var(--color-danger)}.chart--loading .chart__canvas:before{animation:chart-loading-shimmer 1.4s infinite;background-image:var(--chart-loading-stripes);background-size:200% 100%;border-radius:var(--radius-md);bottom:0;content:"";left:0;opacity:.55;position:absolute;right:0;top:0}@media (max-width:768px){.chart{min-height:var(--chart-min-height-sm);padding:var(--chart-padding-sm)}.chart__header{align-items:flex-start;flex-direction:column;gap:var(--space-2)}.chart__actions{flex-wrap:wrap;justify-content:flex-start;width:100%}.chart__legend{width:100%}}@keyframes chart-loading-shimmer{0%{background-position:-150% 0}to{background-position:150% 0}}