/* ============================================================================ chart — chart (taxonomy §D · common · S1) Root:
Parts: __head (title row: __title + __info ⓘ + __tools: a compare select / ⋮) · __stats (stat strip / stat block ABOVE the plot: __stat > __stat-label + __stat-value + __stat-legend) · __plot (positioned box, height --_h) · __svg (viewBox 600×240, preserveAspectRatio="none", strokes non-scaling) · __grid (horizontal gridlines ONLY) · __baseline · __area · __line[data-series="1…8" | data-ramp="1…3" | data-role="comparison"] · __dot (HTML marker at --_x/--_y %) · __y / __x (HTML tick labels at % positions) · __crosshair + __tooltip (hover layer) · __legend > __legend-item > __swatch · __arc (donut) · __wedge (pie) · __centre (donut total) · __bar-segment (stacked status bar) · __table (the data table — always present, hidden unless data-table="visible") · __message (error / empty line) Variants (data-variant): retool-monochrome-series-ramp · origin-current-vs-ghost · quicken-quiet-area · origin-semi-donut · attio-semantic-trio · retool-pie Calm defaults (unmarked root): horizontal gridlines only, no axis lines, no plot frame, legend centred below, the year written once on the first tick, UI face for every label (never the chart library's font). Colour rules: the FIRST series reads --ds-data-primary (= --ds-data-1 unless the theme's data-1 is its accent — ledger points it at ink), then categorical series take --ds-data-N in the FIXED order 1 → 4 → 3 → 2 → 6 → 7 → 5 → 8 (validated: adjacent pairs clear the CVD floor; blue/violet and green/pink are never neighbours); ORDERED series take --ds-chart-ramp-1…3 (dark → light); a comparison/ghost series is --ds-chart-comparison, dashed; status breakdowns take --ds-success / --ds-warning / --ds-danger and always carry a label + count. Text never wears a series colour. One enum = one hue everywhere (the retool-pie weakness). Private knobs: --_h --_series-1…3 --_area-alpha --_stroke --_x --_y (instance-set, % positions) --_w (segment width) ========================================================================== */ .ds-chart svg[fill="none"] { fill: none; } .ds-chart { --_h: 240px; --_stroke: 2px; --_area-alpha: 20%; --_series-1: var(--ds-data-primary, var(--ds-data-1)); /* the theme's chart primary — never the accent (CONTRACT §15.2) */ --_series-2: var(--ds-data-4); --_series-3: var(--ds-data-3); display: flex; flex-direction: column; gap: var(--ds-space-4); margin: 0; min-width: 0; max-width: 100%; color: var(--ds-ink); font-family: var(--ds-font-sans); /* the UI face, never the chart library's */ font-size: var(--ds-text-sm); line-height: var(--ds-lh-list); font-variant-numeric: tabular-nums; } /* ---- head: title · ⓘ · tools ---- */ .ds-chart__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--ds-space-2) var(--ds-space-4); min-width: 0; } .ds-chart__title { display: inline-flex; align-items: center; gap: var(--ds-space-2); margin: 0; font-size: var(--ds-text-lg); font-weight: var(--ds-heading-weight); letter-spacing: var(--ds-heading-tracking); color: var(--ds-ink); min-width: 0; } .ds-chart__title.ds-eyebrow { font-size: var(--ds-text-xs); font-weight: var(--ds-weight-medium); letter-spacing: .06em; } /* origin: the title IS the mono-caps label lane */ .ds-chart__info { display: inline-flex; align-items: center; justify-content: center; width: var(--ds-space-5); height: var(--ds-space-5); border: 0; background: transparent; color: var(--ds-ink-muted); border-radius: var(--ds-radius-pill); cursor: pointer; padding: 0; } .ds-chart__info svg { width: var(--ds-icon-size); height: var(--ds-icon-size); stroke: currentColor; stroke-width: var(--ds-icon-stroke); } .ds-chart__info:hover { color: var(--ds-ink); background: var(--ds-hover-bg); } .ds-chart__tools { display: inline-flex; align-items: center; gap: var(--ds-space-2); color: var(--ds-ink-muted); white-space: nowrap; } /* ---- stats above the plot (retool strip / origin block) ---- */ .ds-chart__stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(140px, 100%), 1fr)); gap: var(--ds-space-4) var(--ds-space-6); align-items: end; } .ds-chart__stat { display: flex; flex-direction: column; gap: var(--ds-space-2); min-width: 0; } .ds-chart__stat-label { font-family: var(--ds-font-label); font-size: var(--ds-text-sm); font-weight: var(--ds-weight-medium); color: var(--ds-ink-muted); letter-spacing: var(--ds-label-tracking); text-transform: var(--ds-label-case); } .ds-chart__stat-value { font-size: var(--ds-text-2xl); font-weight: var(--ds-weight-bold); line-height: var(--ds-lh-tight); letter-spacing: var(--ds-heading-tracking); color: var(--ds-ink); } .ds-chart__stat-legend { display: inline-flex; align-items: center; gap: var(--ds-space-2); color: var(--ds-ink-2); } .ds-chart__stats[data-layout="block"] { grid-template-columns: minmax(0, 1fr) auto; } /* origin: stat left, "Compare with:" right on the same baseline */ /* ---- plot ---- */ .ds-chart__plot { position: relative; height: var(--_h); min-width: 0; max-width: 100%; padding-inline-start: var(--_y-w, 0px); padding-block-end: calc(var(--ds-text-xs) * var(--ds-lh-list) + var(--ds-space-2)); } .ds-chart__plot[data-axis-y] { --_y-w: 40px; } /* retool: ≈40 px inset for y ticks */ .ds-chart__plot[data-axis-y="currency"] { --_y-w: 56px; } .ds-chart__svg { display: block; width: 100%; height: 100%; overflow: visible; } .ds-chart__grid line, .ds-chart__baseline { stroke: var(--ds-chart-grid); stroke-width: 1; vector-effect: non-scaling-stroke; } .ds-chart__baseline { stroke: var(--ds-rule-strong); } .ds-chart__line { fill: none; stroke-width: var(--_stroke); stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; } .ds-chart__line[data-series="1"], .ds-chart__swatch[data-series="1"], .ds-chart__dot[data-series="1"], .ds-chart__wedge[data-series="1"], .ds-chart__arc[data-series="1"] { stroke: var(--_series-1); --_c: var(--_series-1); } .ds-chart__line[data-series="2"], .ds-chart__swatch[data-series="2"], .ds-chart__dot[data-series="2"], .ds-chart__wedge[data-series="2"], .ds-chart__arc[data-series="2"] { stroke: var(--_series-2); --_c: var(--_series-2); } .ds-chart__line[data-series="3"], .ds-chart__swatch[data-series="3"], .ds-chart__dot[data-series="3"], .ds-chart__wedge[data-series="3"], .ds-chart__arc[data-series="3"] { stroke: var(--_series-3); --_c: var(--_series-3); } .ds-chart__line[data-series="4"], .ds-chart__swatch[data-series="4"], .ds-chart__wedge[data-series="4"], .ds-chart__arc[data-series="4"] { stroke: var(--ds-data-2); --_c: var(--ds-data-2); } .ds-chart__line[data-series="5"], .ds-chart__swatch[data-series="5"], .ds-chart__wedge[data-series="5"], .ds-chart__arc[data-series="5"] { stroke: var(--ds-data-6); --_c: var(--ds-data-6); } .ds-chart__line[data-series="6"], .ds-chart__swatch[data-series="6"], .ds-chart__wedge[data-series="6"], .ds-chart__arc[data-series="6"] { stroke: var(--ds-data-7); --_c: var(--ds-data-7); } .ds-chart__line[data-series="7"], .ds-chart__swatch[data-series="7"], .ds-chart__wedge[data-series="7"], .ds-chart__arc[data-series="7"] { stroke: var(--ds-data-5); --_c: var(--ds-data-5); } .ds-chart__line[data-series="8"], .ds-chart__swatch[data-series="8"], .ds-chart__wedge[data-series="8"], .ds-chart__arc[data-series="8"] { stroke: var(--ds-data-8); --_c: var(--ds-data-8); } /* ordered series: the one-hue ramp, dark → light */ .ds-chart__line[data-ramp="1"], .ds-chart__swatch[data-ramp="1"], .ds-chart__wedge[data-ramp="1"] { stroke: var(--ds-chart-ramp-1); --_c: var(--ds-chart-ramp-1); } .ds-chart__line[data-ramp="2"], .ds-chart__swatch[data-ramp="2"], .ds-chart__wedge[data-ramp="2"] { stroke: var(--ds-chart-ramp-2); --_c: var(--ds-chart-ramp-2); } .ds-chart__line[data-ramp="3"], .ds-chart__swatch[data-ramp="3"], .ds-chart__wedge[data-ramp="3"] { stroke: var(--ds-chart-ramp-3); --_c: var(--ds-chart-ramp-3); } /* comparison / ghost series */ .ds-chart__line[data-role="comparison"], .ds-chart__swatch[data-role="comparison"], .ds-chart__dot[data-role="comparison"] { stroke: var(--ds-chart-comparison); --_c: var(--ds-chart-comparison); stroke-dasharray: 4 4; stroke-width: 1.5px; } .ds-chart__area { fill: color-mix(in srgb, var(--_c, var(--_series-1)) var(--_area-alpha), transparent); stroke: none; } .ds-chart__area[data-series="1"] { --_c: var(--_series-1); } .ds-chart__area[data-series="2"] { --_c: var(--_series-2); } .ds-chart__area[data-series="3"] { --_c: var(--_series-3); } /* HTML markers and axis labels — positioned by percent so they never distort with the SVG */ .ds-chart__dot { position: absolute; inset-inline-start: calc(var(--_y-w, 0px) + (100% - var(--_y-w, 0px)) * var(--_x, 0) / 100); inset-block-start: calc((100% - var(--ds-text-xs) * var(--ds-lh-list) - var(--ds-space-2)) * var(--_y, 0) / 100); width: var(--ds-space-3); height: var(--ds-space-3); margin: calc(-1 * var(--ds-space-1-5)) 0 0 calc(-1 * var(--ds-space-1-5)); border-radius: var(--ds-radius-pill); background: var(--_c, var(--_series-1)); border: 2px solid var(--ds-surface); /* the 2 px surface ring so a dot never merges with a line */ } .ds-chart__dot[data-role="comparison"] { background: var(--ds-chart-comparison); } .ds-chart__y { position: absolute; inset-inline-start: 0; inset-block: 0 calc(var(--ds-text-xs) * var(--ds-lh-list) + var(--ds-space-2)); width: var(--_y-w, 0px); pointer-events: none; } .ds-chart__y span { position: absolute; inset-inline-end: var(--ds-space-2); inset-block-start: calc(var(--_y, 0) * 1%); transform: translateY(-50%); font-size: var(--ds-text-xs); color: var(--ds-ink-muted); white-space: nowrap; } .ds-chart__x { position: absolute; inset-inline: var(--_y-w, 0px) 0; inset-block-end: 0; height: calc(var(--ds-text-xs) * var(--ds-lh-list)); pointer-events: none; } .ds-chart__x span { position: absolute; inset-inline-start: calc(var(--_x, 0) * 1%); transform: translateX(-50%); font-size: var(--ds-text-xs); color: var(--ds-ink-muted); white-space: nowrap; text-align: center; line-height: var(--ds-lh-list); } .ds-chart__x span:first-child { transform: none; text-align: start; } .ds-chart__x span:last-child { transform: translateX(-100%); text-align: end; } .ds-chart__x span small { display: block; font-size: inherit; color: var(--ds-ink-muted); } /* the year, written once on the first tick */ .ds-chart__x[data-lane="mono"] span { font-family: var(--ds-font-mono); letter-spacing: .04em; } /* ---- hover layer: crosshair + tooltip (the demo shows it as a data-state="hover" twin) ---- */ .ds-chart__crosshair { position: absolute; inset-inline-start: calc(var(--_y-w, 0px) + (100% - var(--_y-w, 0px)) * var(--_x, 0) / 100); inset-block: 0 calc(var(--ds-text-xs) * var(--ds-lh-list) + var(--ds-space-2)); width: 0; border-inline-start: var(--ds-border-width) dashed var(--ds-rule-strong); pointer-events: none; } .ds-chart__tooltip { position: absolute; inset-inline-start: calc(var(--_y-w, 0px) + (100% - var(--_y-w, 0px)) * var(--_x, 0) / 100 + var(--ds-space-3)); inset-block-start: var(--ds-space-2); z-index: var(--ds-z-tooltip); min-width: 140px; max-width: min(240px, 60%); padding: var(--ds-space-2) var(--ds-space-3); background: var(--ds-surface-raised); border-radius: var(--ds-radius-md); box-shadow: var(--ds-shadow-float); color: var(--ds-ink); font-size: var(--ds-text-sm); pointer-events: none; } .ds-chart__tooltip[data-side="start"] { inset-inline-start: auto; inset-inline-end: calc(100% - (var(--_y-w, 0px) + (100% - var(--_y-w, 0px)) * var(--_x, 0) / 100) + var(--ds-space-3)); } .ds-chart__tooltip b { display: block; font-weight: var(--ds-weight-semibold); margin-block-end: var(--ds-space-1); color: var(--ds-ink-2); } .ds-chart__tooltip-row { display: flex; align-items: center; gap: var(--ds-space-2); justify-content: space-between; } .ds-chart__tooltip-row span:last-child { font-weight: var(--ds-weight-medium); } .ds-chart__plot:not([data-state="hover"]) .ds-chart__crosshair, .ds-chart__plot:not([data-state="hover"]) .ds-chart__tooltip { display: none; } .ds-chart__plot:focus-visible { border-radius: var(--ds-radius-sm); } /* ---- legend: centred below, swatch = line+dot for lines, square for fills; text in ink, never the series colour ---- */ .ds-chart__legend { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--ds-space-2) var(--ds-space-5); margin: 0; padding: 0; list-style: none; color: var(--ds-ink-muted); font-size: var(--ds-text-sm); } .ds-chart__legend[data-align="start"] { justify-content: flex-start; } .ds-chart__legend-item { display: inline-flex; align-items: center; gap: var(--ds-space-2); white-space: nowrap; } .ds-chart__legend-item b { color: var(--ds-ink); font-weight: var(--ds-weight-medium); } .ds-chart__swatch { display: inline-block; width: var(--ds-space-4); height: var(--ds-space-2); border-radius: var(--ds-radius-pill); background: var(--_c); flex: 0 0 auto; } .ds-chart__swatch[data-shape="line"] { height: 2px; border-radius: 0; position: relative; } .ds-chart__swatch[data-shape="line"]::after { content: ""; position: absolute; inset-inline-start: 50%; inset-block-start: 50%; width: var(--ds-space-2); height: var(--ds-space-2); transform: translate(-50%, -50%); border-radius: var(--ds-radius-pill); background: var(--_c); } .ds-chart__swatch[data-shape="square"] { width: var(--ds-space-3); height: var(--ds-space-3); border-radius: var(--ds-radius-xs); } .ds-chart__swatch[data-shape="dot"] { width: var(--ds-space-2); height: var(--ds-space-2); } .ds-chart__swatch[data-role="comparison"] { background: repeating-linear-gradient(to right, var(--ds-chart-comparison) 0 3px, transparent 3px 6px); height: 2px; border-radius: 0; } .ds-chart__swatch[data-tone="success"] { --_c: var(--ds-success); background: var(--_c); } .ds-chart__swatch[data-tone="warning"] { --_c: var(--ds-warning); background: var(--_c); } .ds-chart__swatch[data-tone="danger"] { --_c: var(--ds-danger); background: var(--_c); } /* ---- donut / pie ---- */ .ds-chart__plot[data-kind="donut"], .ds-chart__plot[data-kind="pie"] { height: auto; padding: 0; display: grid; place-items: center; } .ds-chart__plot[data-kind="donut"] .ds-chart__svg { width: min(100%, 320px); height: auto; aspect-ratio: 200 / 110; } .ds-chart__plot[data-kind="pie"] .ds-chart__svg { width: min(100%, 220px); height: auto; aspect-ratio: 1; } .ds-chart__arc { fill: none; stroke-width: 18; stroke-linecap: butt; } .ds-chart__arc[data-track] { stroke: var(--ds-surface-2); } .ds-chart__arc:not([data-track]) { paint-order: stroke; } .ds-chart__wedge { fill: var(--_c); stroke: var(--ds-surface); stroke-width: 2; } /* 2 px surface gap between fills */ .ds-chart__wedge-label { font-family: var(--ds-font-sans); font-size: var(--ds-text-xs); font-weight: var(--ds-weight-semibold); fill: var(--ds-ink-on-accent); pointer-events: none; } /* on the darkest ramp step only */ .ds-chart__wedge-label[data-on="light"] { fill: var(--ds-ink); } .ds-chart__centre { position: absolute; inset-inline: 0; inset-block-end: 0; text-align: center; display: flex; flex-direction: column; gap: var(--ds-space-0-5); pointer-events: none; } .ds-chart__centre b { font-size: var(--ds-text-2xl); font-weight: var(--ds-weight-bold); letter-spacing: var(--ds-heading-tracking); line-height: var(--ds-lh-tight); color: var(--ds-ink); } .ds-chart__centre span { color: var(--ds-ink-muted); font-size: var(--ds-text-sm); } .ds-chart__plot[data-kind="donut"] { position: relative; } /* ---- stacked status bar (attio semantic trio) ---- */ .ds-chart__bar { display: flex; gap: 2px; height: var(--ds-space-3); border-radius: var(--ds-radius-pill); overflow: hidden; background: var(--ds-surface-2); } .ds-chart__bar-segment { flex: 0 0 auto; width: var(--_w, 0%); background: var(--_c); } .ds-chart__bar-segment[data-tone="success"] { --_c: var(--ds-success); } .ds-chart__bar-segment[data-tone="warning"] { --_c: var(--ds-warning); } .ds-chart__bar-segment[data-tone="danger"] { --_c: var(--ds-danger); } .ds-chart__bar-segment:first-child { border-start-start-radius: var(--ds-radius-pill); border-end-start-radius: var(--ds-radius-pill); } .ds-chart__bar-segment:last-child { border-start-end-radius: var(--ds-radius-pill); border-end-end-radius: var(--ds-radius-pill); } .ds-chart__legend[data-kind="status"] { justify-content: flex-start; gap: var(--ds-space-3) var(--ds-space-6); } .ds-chart__legend[data-kind="status"] .ds-chart__legend-item svg { width: var(--ds-icon-size); height: var(--ds-icon-size); stroke: var(--_c); stroke-width: var(--ds-icon-stroke); } /* ---- the data table: always in the DOM, hidden unless asked for ---- */ .ds-chart__table { width: 100%; font-size: var(--ds-text-sm); border-collapse: collapse; } .ds-chart__table th, .ds-chart__table td { padding: var(--ds-space-1) var(--ds-space-2); border-block-end: var(--ds-border-width) solid var(--ds-rule-soft); text-align: end; } .ds-chart__table th:first-child, .ds-chart__table td:first-child { text-align: start; } .ds-chart__table thead th { font-family: var(--ds-font-label); font-size: var(--ds-text-xs); color: var(--ds-ink-muted); letter-spacing: var(--ds-label-tracking); text-transform: var(--ds-label-case); font-weight: var(--ds-weight-medium); } .ds-chart:not([data-table="visible"]) .ds-chart__table { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; border: 0; } .ds-chart__table-toggle { align-self: flex-start; border: 0; background: transparent; color: var(--ds-ink-2); font-size: var(--ds-text-sm); font-weight: var(--ds-weight-medium); min-height: var(--ds-control-h-sm); padding-inline: var(--ds-space-2); border-radius: var(--ds-radius-button); cursor: pointer; } .ds-chart__table-toggle:hover { background: var(--ds-hover-bg); color: var(--ds-ink); } /* ---- states on the root ---- */ .ds-chart[aria-busy="true"] .ds-chart__plot { background: var(--ds-skeleton); border-radius: var(--ds-radius-md); } .ds-chart[aria-busy="true"] .ds-chart__plot > * { visibility: hidden; } .ds-chart[aria-busy="true"] .ds-chart__stat-value, .ds-chart[aria-busy="true"] .ds-chart__legend { color: transparent; background: var(--ds-skeleton); border-radius: var(--ds-radius-xs); } .ds-chart[data-state="empty"] .ds-chart__plot { border: var(--ds-border-width) dashed var(--ds-rule); border-radius: var(--ds-radius-md); display: grid; place-items: center; } .ds-chart[data-state="empty"] .ds-chart__plot > :not(.ds-chart__message) { visibility: hidden; } .ds-chart__message { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; padding: var(--ds-space-4); color: var(--ds-ink-muted); font-size: var(--ds-text-sm); } .ds-chart__message a { color: var(--ds-ink-link); } .ds-chart[data-state="error"] .ds-chart__plot { border: var(--ds-border-width) dashed var(--ds-danger); border-radius: var(--ds-radius-md); } .ds-chart[data-state="error"] .ds-chart__plot > :not(.ds-chart__message) { visibility: hidden; } .ds-chart[data-state="error"] .ds-chart__message { color: var(--ds-danger-ink); } .ds-chart[data-state="error"] .ds-chart__message code { font-family: var(--ds-font-mono); color: var(--ds-ink-2); } /* zero rendered as data (origin): a flat line at the baseline with the stat reading 0 — no special state needed */ /* ========================================================================= Designer variants ========================================================================= */ /* retool: 3 ordered series on the one-hue ramp, y ticks 0/10/20, weekly x ticks with the year once, legend centred below, stat strip above */ .ds-chart[data-variant="retool-monochrome-series-ramp"] { --_stroke: 2px; } /* origin: solid current series to "today" with an end dot vs a dashed neutral comparison to month end; NO y-axis, NO gridlines, mono x ticks over a 1 px baseline */ .ds-chart[data-variant="origin-current-vs-ghost"] .ds-chart__grid { display: none; } .ds-chart[data-variant="origin-current-vs-ghost"] .ds-chart__x span { font-family: var(--ds-font-mono); letter-spacing: .04em; } /* quicken: single series, 2 px line + 20 % fill that STOPS at the last datum, currency y ticks, gridlines only, no legend, no markers */ .ds-chart[data-variant="quicken-quiet-area"] { --_area-alpha: 20%; } .ds-chart[data-variant="quicken-quiet-area"] .ds-chart__legend { display: none; } /* origin semi-donut: 4 categorical arcs (18 px stroke) + centre total and caption */ .ds-chart[data-variant="origin-semi-donut"] .ds-chart__legend { justify-content: center; } /* attio: Healthy / Watch / At risk on the reserved status colours, always with icon + label + count */ .ds-chart[data-variant="attio-semantic-trio"] .ds-chart__plot { height: auto; padding: 0; } /* retool pie: full pie, 3 slices, % labels inside — pinned to the SAME ramp mapping as the line chart (the reference used a different one) */ .ds-chart[data-variant="retool-pie"] .ds-chart__legend .ds-chart__swatch { width: var(--ds-space-3); height: var(--ds-space-3); border-radius: var(--ds-radius-xs); } /* ========================================================================= DESK-446 gap 5 — ranking chart (data-kind="rank"): horizontal bars as a list Root:
Parts: __plot[data-kind="rank"] > __rank (
    ) > __row (
  1. , --_value: NN% inline, data-series="1…8" optional, data-role="other", aria-current="true") > __row-rank · __row-label (text or ; title="" carries the full name when it truncates) · __row-bar > (aria-hidden) · __row-value · __row-share. Numbers are text in the list, bars are aria-hidden decoration. Knobs: --_value (per row, a percentage) --_c (row colour) --_tint (row-fill strength) --_bar-h --_label-w ========================================================================= */ .ds-chart[data-kind="rank"] { container-type: inline-size; } .ds-chart__rank { position: relative; list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--ds-space-1); min-width: 0; } .ds-chart__row { --_c: var(--_series-1); position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: var(--ds-space-3); min-height: var(--ds-row-h); padding-inline: var(--ds-space-2); border-radius: var(--ds-radius-md); min-width: 0; transition: background var(--ds-dur-fast) var(--ds-ease-standard); } .ds-chart__row[data-series="2"] { --_c: var(--_series-2); } .ds-chart__row[data-series="3"] { --_c: var(--_series-3); } .ds-chart__row[data-series="4"] { --_c: var(--ds-data-2); } .ds-chart__row[data-series="5"] { --_c: var(--ds-data-6); } .ds-chart__row[data-series="6"] { --_c: var(--ds-data-7); } .ds-chart__row[data-series="7"] { --_c: var(--ds-data-5); } .ds-chart__row[data-series="8"] { --_c: var(--ds-data-8); } .ds-chart__row[data-role="other"] { --_c: var(--ds-chart-comparison); } /* the "Other" remainder is neutral, never a 9th hue */ .ds-chart__row[data-role="other"] .ds-chart__row-label { color: var(--ds-ink-muted); } .ds-chart__row-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ds-ink); font-weight: var(--ds-weight-medium); } .ds-chart__row-label:is(a) { text-decoration: none; border-radius: var(--ds-radius-xs); } .ds-chart__row-label:is(a):hover { text-decoration: underline; text-underline-offset: 3px; } .ds-chart__row-bar { display: block; height: var(--_bar-h, var(--ds-space-2)); border-radius: var(--ds-radius-pill); background: var(--ds-surface-2); overflow: hidden; min-width: 0; } .ds-chart__row-bar > i { display: block; height: 100%; width: var(--_value, 0%); border-radius: var(--ds-radius-pill); background: var(--_c); } .ds-chart__row-value { color: var(--ds-ink); font-weight: var(--ds-weight-semibold); text-align: end; white-space: nowrap; } .ds-chart__row-share { color: var(--ds-ink-muted); text-align: end; white-space: nowrap; min-width: 4ch; } .ds-chart__row-rank { color: var(--ds-ink-muted); min-width: 2ch; text-align: end; } .ds-chart__row-share, .ds-chart__row-rank { display: none; } .ds-chart__row:hover, .ds-chart__row:focus-within, .ds-chart__row[data-state="hover"] { background: var(--ds-hover-bg); } .ds-chart__row[aria-current="true"] { background: var(--ds-selected-bg); } .ds-chart__row[aria-current="true"] .ds-chart__row-label { color: var(--ds-selected-ink); font-weight: var(--ds-selected-weight, var(--ds-weight-semibold)); } /* seline: the bar IS the row background — label sits inside a tinted bar, value stays outside on the right */ .ds-chart[data-variant="seline-row-fill"] .ds-chart__row { --_tint: 16%; padding-inline: 0; min-height: var(--ds-control-h-sm); } .ds-chart[data-variant="seline-row-fill"] .ds-chart__row:hover, .ds-chart[data-variant="seline-row-fill"] .ds-chart__row:focus-within, .ds-chart[data-variant="seline-row-fill"] .ds-chart__row[data-state="hover"] { background: transparent; --_tint: 28%; } .ds-chart[data-variant="seline-row-fill"] .ds-chart__row-bar { grid-area: 1 / 1; align-self: stretch; height: auto; background: transparent; border-radius: var(--ds-radius-sm); overflow: visible; } .ds-chart[data-variant="seline-row-fill"] .ds-chart__row-bar > i { border-radius: var(--ds-radius-sm); background: color-mix(in srgb, var(--_c) var(--_tint), transparent); } .ds-chart[data-variant="seline-row-fill"] .ds-chart__row-label { grid-area: 1 / 1; position: relative; z-index: 1; padding-inline: var(--ds-space-3); } .ds-chart[data-variant="seline-row-fill"] .ds-chart__row-value { grid-area: 1 / 2; padding-inline-end: var(--ds-space-2); } .ds-chart[data-variant="seline-row-fill"] .ds-chart__row[aria-current="true"] { background: transparent; --_tint: 28%; } .ds-chart[data-variant="seline-row-fill"] .ds-chart__row[data-role="other"] { --_tint: 22%; } /* replit: label | thin track | value on one line; stacks (label above the track, value right) when the card is narrow */ .ds-chart[data-variant="replit-inline-track"] .ds-chart__row { grid-template-columns: minmax(0, var(--_label-w, 11rem)) minmax(0, 1fr) auto; } .ds-chart[data-variant="replit-inline-track"] { --_bar-h: var(--ds-space-1-5); } @container (max-width: 440px) { .ds-chart[data-variant="replit-inline-track"] .ds-chart__row { grid-template-columns: minmax(0, 1fr) auto; row-gap: var(--ds-space-1); padding-block: var(--ds-space-2); } .ds-chart[data-variant="replit-inline-track"] .ds-chart__row-bar { grid-column: 1 / -1; grid-row: 2; } } /* apollo: rank number · label · bar · value · share % — a leaderboard; bar drops under the label when narrow */ .ds-chart[data-variant="apollo-ranked-share"] .ds-chart__row-rank, .ds-chart[data-variant="apollo-ranked-share"] .ds-chart__row-share { display: block; } .ds-chart[data-variant="apollo-ranked-share"] .ds-chart__row { grid-template-columns: 2ch minmax(0, 1fr) minmax(0, 1fr) auto 5ch; border-radius: var(--ds-radius-sm); border-block-end: var(--ds-border-width) solid var(--ds-rule-soft); } .ds-chart[data-variant="apollo-ranked-share"] .ds-chart__rank { gap: 0; } .ds-chart[data-variant="apollo-ranked-share"] { --_bar-h: var(--ds-space-3); } .ds-chart[data-variant="apollo-ranked-share"] .ds-chart__row-bar { border-radius: var(--ds-radius-xs); } .ds-chart[data-variant="apollo-ranked-share"] .ds-chart__row-bar > i { border-radius: var(--ds-radius-xs); } @container (max-width: 520px) { .ds-chart[data-variant="apollo-ranked-share"] .ds-chart__row { grid-template-columns: 2ch minmax(0, 1fr) auto 5ch; row-gap: var(--ds-space-1); padding-block: var(--ds-space-2); } .ds-chart[data-variant="apollo-ranked-share"] .ds-chart__row-bar { grid-column: 2 / -1; grid-row: 2; } } /* ========================================================================= DESK-446 gap 6 — empty / awaiting-data states that keep the frame Orthogonal to data-variant (a quicken area chart can be empty too), so a second root attribute: data-state="empty" + data-placeholder="savvycal-bare-axes" | "mixpanel-ghost-series" aria-busy="true" + data-placeholder="square-skeleton-frame" (loading is NOT empty) No data-placeholder = the original dashed footprint above. Parts: __message (centred line), __skeleton (>i bars, --_value heights), series elements with data-role="placeholder" (the ghost line / area / ring / wedge). Real series stay hidden. Works for line, area, donut, pie, stacked-bar and rank (rank ships ghost rows: