}); ``` `data` may be an array or a string of numbers separated by commas or whitespace; omit it and the element's `data-values` is used. Fewer than two points renders nothing (returns `null`). A flat series draws down the middle instead of dividing by zero. The stroke is non-scaling, so a stretched sparkline does not get a fat line. Attributes: `data-values`, `data-tone` (including `"auto"`), `data-label`, `data-fill="false"`, `data-dot="true"`. The end-of-series dot is **off by default** (it crowds a small card); `dot: true` / `data-dot="true"` turns it on. *(Changed in 0.2.0 — it used to be on by default.)* The dot stays round at any width: it is a zero-length path drawn by its round cap with a non-scaling stroke, so its color is `stroke` and its size is `stroke-width` (5px, with an 8px `--bg2` halo underneath). *(Changed in 0.3.0 — it was a `<circle>`, which stretched into an ellipse in any container wider than 120px. A custom rule that set `fill` on `._78-sparkline-dot` should set `stroke` now.)* Without a label, the kit writes a plain-English one: *"Trend, 7 points: 18 to 34 (up)"*. | Class | Role | |---|---| | `._78-sparkline` | The generated `<svg>`: full width, 32px tall | | `._78-sparkline-line` / `-area` / `-dot` / `-base` | Its parts, all painted from `--viz` / `--viz-lo` | | `._78-sparkline-dot-ring` | The `--bg2` halo drawn under the end dot | ### 12.3 Progress bar ```html <div class="_78-progress" data-pct="72"> <div class="_78-progress-head"> <span class="_78-progress-label">Win rate</span> <span class="_78-progress-value"></span>  </div> <div class="_78-progress-track"><div class="_78-progress-fill"></div></div> </div>  <div class="_78-progress _78-tone-warn _78-progress-lg" data-pct="68" data-label="Margin used"></div> ``` ```js _78.viz.progress(el, 72, { label: 'Win rate', // aria-label; falls back to data-label, then ._78-progress-label's text text: true // false leaves ._78-progress-value alone instead of writing "72%" }); ``` The percentage is clamped to 0–100. The track gets `role="progressbar"` with `aria-valuenow` / `min` / `max`. An existing `._78-progress-value` with text in it is never overwritten. | Class | Role | |---|---| | `._78-progress` | The wrapper — carry `data-pct` here | | `._78-progress-head` | Label row above the bar | | `._78-progress-label` / `._78-progress-value` | Its dim label and its bold tabular value | | `._78-progress-track` / `._78-progress-fill` | The 6px rail and its `--viz` fill (created if absent) | | `._78-progress-sm` / `._78-progress-lg` | 4px / 10px rail instead | ### 12.4 Bar row For ranked lists. Unlike progress, the `._78-bar-track` element must exist in your markup — the row is a three-column grid, so the kit does not guess where it goes. ```html <div class="_78-bar-list"> <div class="_78-bar-row" data-pct="82"> <span class="_78-bar-label">EUR/USD</span> <span class="_78-bar-track"><span class="_78-bar-fill"></span></span> <span class="_78-bar-value">82</span> </div> <div class="_78-bar-row _78-tone-info" data-pct="47"> <span class="_78-bar-label">GBP/USD</span> <span class="_78-bar-track"></span> <span class="_78-bar-value">47</span> </div> </div> ``` ```js _78.viz.bar(el, 82, { label: 'EUR/USD' }); // label falls back to ._78-bar-label's text ``` | Class | Role | |---|---| | `._78-bar-list` | Vertical stack of rows with a gap | | `._78-bar-row` | Grid: label (min 72px / 26%) · track · value. Carry `data-pct` here | | `._78-bar-label` | Truncates with an ellipsis | | `._78-bar-track` / `._78-bar-fill` | The 8px rail and its `--viz` fill (the fill is created if absent) | | `._78-bar-value` | Right-aligned, bold, tabular | ### 12.5 Donut and gauge ```html <div class="_78-donut" data-pct="68" data-label="Margin used"></div> <div class="_78-donut _78-gauge _78-tone-success" data-pct="41" data-label="Health"></div> <div class="_78-donut _78-donut-lg" data-pct="92"></div>  <div class="_78-donut" data-pct="76"> <div class="_78-donut-center"> <div class="_78-donut-value">3.4×</div> <div class="_78-donut-label">Leverage</div> </div> </div> ``` ```js _78.viz.donut(el, 68, { size: 100, // viewBox size (default 100) stroke: 12, // ring thickness (default 12, or 11 for a gauge) gauge: false, // true forces the 240° arc; otherwise ._78-gauge decides label: 'Margin used', value: '68%' // override the center text (default: the rounded percentage) }); ``` A gauge is the same ring drawn as a 240° arc with the gap at the bottom and the value sitting in it. The wrapper gets `role="img"` and an `aria-label` of `"<label>: <value>"`; the SVG itself is `aria-hidden`. | Class | Role | |---|---| | `._78-donut` | The wrapper — 104px wide. Carry `data-pct` here | | `._78-gauge` | Draws the ring as a 240° arc | | `._78-donut-sm` / `._78-donut-lg` | 72px / 136px wide, with the value type scaled to match | | `._78-donut-center` / `._78-donut-value` / `._78-donut-label` | Center stack (created if absent) | | `._78-donut-track` / `._78-donut-fill` | The ring's two circles: `--border` and `--viz` | ### 12.6 Trend arrow ```html <span class="_78-trend" data-delta="12.4"></span>  <span class="_78-trend" data-delta="-3.1"></span>  <span class="_78-trend" data-delta="0"></span>  <span class="_78-trend _78-trend-pill" data-delta="8.2" data-unit=" bps"></span> <span class="_78-stat-delta" data-delta="2.2" data-invert="true"></span>   <span class="_78-trend _78-up">▲ 12.4% <span class="_78-sr-only">up</span></span> ``` ```js _78.viz.trend(el, 12.4, { invert: false, // true = up is bad: colors up red and down green unit: '%', // '' for none; data-unit="" also means none text: '+12.4%', // override the rendered text entirely label: 'up' // the screen-reader word (default: 'up' / 'down' / 'no change') }); ``` Direction comes from the number's sign, with exactly `0` reading as flat. The kit renders an arrow SVG, the text, and a `._78-sr-only` direction word — so the meaning survives without color or shape. | Class | Role | |---|---| | `._78-trend` | The chip. `._78-stat-delta` is identical, for use inside a stat card | | `._78-up` / `._78-down` / `._78-flat` | Direction — set by `_78.viz.trend()`, or write it yourself | | `._78-invert` | Up is bad: swaps the success / danger colors | | `._78-trend-pill` | Pill treatment, with a tinted background per direction | Attributes: `data-delta`, `data-unit`, `data-invert="true"`. ### 12.7 Figure row — `._78-figure-row` N *related* numbers read side by side, each with a label and a semantic tone shown as a colored left edge: entry / take-profit / stop, plan / actual / variance, min / median / max, three-tier pricing. One fact in parts — where a `._78-kpi-grid` (§5.3) is unrelated metrics and a `._78-stat-card` is one headline number. CSS only, and toned with the same `._78-tone-*` classes as everything else in this section, so a figure and the chart beside it agree on color. ```html <div class="_78-figure-row"> <div class="_78-figure _78-tone-accent"> <span class="_78-figure-label">Entry</span> <span class="_78-figure-value">1.0842</span> </div> <div class="_78-figure _78-tone-success"> <span class="_78-figure-label">Take profit</span> <span class="_78-figure-value">1.0985</span> <span class="_78-figure-sub">+143 pips</span> </div> <div class="_78-figure _78-tone-danger"> <span class="_78-figure-label">Stop</span> <span class="_78-figure-value">1.0790</span> <span class="_78-figure-sub">−52 pips</span> </div> </div>  <div class="_78-figure-row _78-figure-row-sm _78-figure-strong"> … </div>  <div class="_78-figure-row _78-figure-row-plain"> … </div>  <div class="_78-figure-row"> <div class="_78-figure _78-tone-success"> … Signal when … </div> <div class="_78-figure _78-tone-danger"> … Dead if … </div> <div class="_78-figure _78-figure-neutral"> <span class="_78-figure-label">Time left</span> <span class="_78-figure-value">6</span> <span class="_78-figure-sub">trading days</span> </div> </div>  <div class="_78-figure-row _78-figure-row-neutral"> … </div> ``` | Class | Role | |---|---| | `._78-figure-row` | The row: an auto-fit grid, min 140px per figure, `--space-3` gap, wraps | | `._78-figure` | One figure: `--bg3` fill, `--radius-sm`, and a 3px `--viz` left edge | | `._78-figure-label` | The uppercase `--fs-xs` label — always say what the number is | | `._78-figure-value` | The number: `--fs-lg`, bold, tabular figures | | `._78-figure-sub` | A small dim line under the value | | `._78-figure-strong` | On a figure (or the row): the value takes the tone color too | | `._78-figure-row-sm` | Denser padding and an `--fs-base` value, for a table cell or a narrow card | | `._78-figure-row-plain` | No fill and no edge; the tone moves to the label | | `._78-figure-neutral` | On one figure: no tone, even one inherited from the row or a parent — the edge is `--border`, a `-strong` value is `--text`, a `-plain` label is `--dim`. For a figure that isn't part of the set's meaning ("Time left" beside a target and a stop) | | `._78-figure-row-neutral` | On the row: every figure neutral, so the row carries no semantic edges at all | A figure with no tone class already has a `--border` edge; `-neutral` is for when a tone would otherwise be inherited, and for saying so in the markup. The label is the meaning and the color is reinforcement — never ship a figure row whose only difference between parts is the tone. ### 12.8 Split bar — `._78-split-bar` One bar, two or more proportional segments, each with its own semantic color: risk vs reward, spent vs remaining, pass / skip / fail. `._78-progress` (§12.3) is a single fill of one track and `._78-bar-row` (§12.4) is one row of a ranked list; this is the split of a whole into named parts. ```html <div class="_78-split-head"> <span class="_78-split-title">Risk / reward</span> <span class="_78-split-total">1 : 1.9</span> </div> <div class="_78-split-bar" data-label="Risk versus reward"> <span class="_78-split-seg _78-tone-danger" data-pct="35" data-label="Risk"></span> <span class="_78-split-seg _78-tone-success" data-pct="65" data-label="Reward"></span> </div> <div class="_78-split-legend"> <span class="_78-split-key _78-tone-danger">Risk <b>35%</b></span> <span class="_78-split-key _78-tone-success">Reward <b>65%</b></span> </div> ``` ```js _78.viz.splitBar(el, [ { pct: 45, tone: 'accent', label: 'Equities' }, { pct: 30, tone: 'info', label: 'FX' }, { pct: 25, tone: 'dim', label: 'Cash' } ], { label: 'Allocation' }); // omit the array to size the markup that is already there ``` | Class | Role | |---|---| | `._78-split-bar` | The track: 8px tall, pill radius, `--border` fill, a 2px gap between segments | | `._78-split-seg` | One segment, painted from `--viz`; its width is set by `_78.viz.splitBar()` | | `._78-split-bar-sm` / `-lg` | 4px / 12px tall | | `._78-split-head` | Optional title + total line above the bar | | `._78-split-title` / `._78-split-total` | Its two halves — dim label, solid tabular value | | `._78-split-legend` | A wrapping row of keys under the bar | | `._78-split-key` | One key: takes the segment's tone class and gets a matching dot | Attributes: `data-pct` and `data-label` per segment, `data-label` on the bar itself. **Totals.** Values under 100 leave the shortfall as visible track, so "68% used" works with one segment. Values totaling more than 100 are treated as raw amounts and shared out — `512 / 96 / 32` renders as 80% / 15% / 5% with no math on your side. **Accessibility.** The bar becomes one `role="img"` whose `aria-label` names every segment and its share ("Risk versus reward: Risk 35%, Reward 65%"), and each segment repeats its own text as a `title`. Write the legend yourself — the wording is yours, and it is what makes the colors legible. --- ## 13. Disclosure — `._78-details` A styled `<details>` / `<summary>`: the native marker is removed (including Safari's `::-webkit-details-marker`) and replaced with a chevron that rotates when the element opens. **No JS** — the keyboard, screen-reader, and find-in-page behavior is the browser's own. This is the progressive "show the numbers behind this" pattern: the headline stays readable, the detail is one click away. ```html <details class="_78-details"> <summary>Show the numbers behind this <span class="_78-details-meta">3 legs</span></summary> <div class="_78-details-body"> … </div> </details> <details class="_78-details _78-details-fill" open> <summary>Assumptions</summary> <div class="_78-details-body">Commission at 0.08%, financing at base + 2.5%.</div> </details> <details class="_78-details _78-details-plain"> <summary>What counts as an open position?</summary> <div class="_78-details-body _78-text-sm">Anything with a non-zero quantity at the close.</div> </details> ``` | Class | Role | |---|---| | `._78-details` | The `<details>`: `--bg2` surface, `--border` edge, `--radius`, clipped corners | | `._78-details-summary` | Optional class on the `<summary>` — a direct `> summary` is styled anyway | | `._78-details-meta` | Pushed to the right of the summary: a count, a total, a badge | | `._78-details-body` | The revealed content: `--space-3` padding, separated by a top border | | `._78-details-plain` | No box — for a disclosure inside a card that already has one | | `._78-details-fill` | `--bg3` summary bar, the way a table or a card foot is tinted | | `._78-details-sm` | Smaller type and padding throughout | The chevron is pure CSS (two borders rotated), so there is no icon set to load and it follows the text color; `[open]` rotates it. Hover tints the summary with `--row-hover` and turns it accent; focus is the kit's 2px accent outline, inset. Consecutive `._78-details` siblings get a `--space-2` gap. Keep the summary a real summary — a sentence someone can act on. Screen readers announce it as a disclosure with its expanded state for free. --- ## 14. Utilities A deliberately small set — the kit is a component library, not a utility framework. | Group | Classes | |---|---| | Text | `._78-text-{tone}` and the short `._78-{tone}` (all six tones and their aliases, §2.9) · `._78-text-sm` `._78-text-xs` | | Type | `._78-fw-600` `._78-mono` `._78-nums` (tabular figures) `._78-truncate` | | Layout | `._78-flex` `._78-flex-between` `._78-flex-wrap` `._78-flex-col` `._78-grow` | | Gaps | `._78-gap-8` `._78-gap-12` `._78-gap-16` | | Margins | `._78-mt-8` `._78-mt-12` `._78-mt-16` `._78-mb-4` `._78-mb-8` `._78-mb-12` `._78-mb-16` | | Lists | `._78-list-plain` | | Effects | `._78-text-aurora` (animated gradient text) | | Accessibility | `._78-sr-only` | `._78-flex` and `._78-flex-between` both center their items vertically. **Aurora text — `._78-text-aurora`.** A slow multi-color gradient drifting through the letters, for a hero word, a role badge or a wordmark: ```html <h1>Theme <span class="_78-text-aurora">everything</span>, live.</h1>  <strong class="_78-text-aurora" style="--_78-aurora: var(--success), var(--info), var(--success); --_78-aurora-speed: 3s">…</strong> ``` | Property | Default | What it does | |---|---|---| | `--_78-aurora` | `var(--accent-hover), var(--cat-1), var(--cat-3), var(--cat-5), var(--accent-hover)` | The gradient's colors, comma-separated. End on the color you start with and the loop has no seam | | `--_78-aurora-speed` | `6s` | One full pass of the gradient | It's a 300%-wide `linear-gradient` clipped to the text (`background-clip: text`), moved by a linear, infinite keyframe on `background-position`. The default stops are tokens, so it re-themes, and every point of the default gradient clears 4.5:1 on `--bg`, `--bg2` and `--bg3` in both themes — `--accent-hover` rather than `--accent` because it's the higher-contrast end of the accent in both. Check your own colors the same way. **`prefers-reduced-motion: reduce` gets a still gradient.** In forced-colors mode, or a browser without `background-clip: text`, the text is solid (`CanvasText` / `--accent-hover`), never invisible. Selected text switches to `--text` so a selection stays readable. Keep it to a word or a short phrase: moving color on a paragraph is hard to read. **Lists.** The reset strips list padding everywhere, on purpose. Inside the components that hold prose (`._78-alert-body`, `._78-card`, `._78-modal-body`, `._78-details-body`) a `<ul>` / `<ol>` with **no class of its own** gets an indent and a rhythm back; everywhere else lists stay bare. The rule is written with `:where()`, so any rule of yours out-ranks it. `._78-list-plain` removes markers and indent anywhere (if your own prose CSS styles a bare `.content ul`, scope it as `ul:not([class])` or it will out-rank the utility): ```html <ul class="_78-list-plain"> <li>No markers, no indent, still a list to a screen reader</li> </ul> ``` **Paragraphs.** The reset zeroes paragraph margins too. In the same components, a `<p>` that follows a `<p>` gets a top margin back: `--space-2` in `._78-alert-body`, `--space-3` in `._78-card` and `._78-details-body` (`._78-modal-body` has always had `--space-3`). Zero specificity, so a utility such as `._78-mt-8` on the paragraph, or any rule of yours, wins. **Two spellings, one color.** Every text tone has a long and a short form — `._78-text-danger` and `._78-danger` are the same rule, for all six tones and their aliases (§2.9). The short forms started life on `._78-stat-card__num` and now work anywhere, so no spelling is a typo. **The escape hatch.** There is deliberately no margin utility above 16px and there are no padding utilities. Above the scale, use the space tokens directly — `style="padding: var(--space-5)"` — that is the intended way out, not a gap in the set. ### 14.1 JS helpers — `_78.util` Two small helpers, dependency-free and DOM-free. *(Added in 0.3.0.)* **`_78.util.sortAlpha(a, b)`** — a comparator for human sorting. Case-insensitive, locale-aware (`Intl.Collator` with `numeric: true`), so "Item 2" sorts before "Item 10". Blanks (`null`, `undefined`, `""`) sort after everything else; non-strings are compared as their text. ```js ['Item 10', 'item 2', 'Item 1', 'apple', 'Banana'].sort(_78.util.sortAlpha) // → ['apple', 'Banana', 'Item 1', 'item 2', 'Item 10'] new Tabulator('#grid', { columns: [{ title: 'Name', field: 'name', sorter: _78.util.sortAlpha }] // works as-is }); ``` **`_78.util.duration(ms, opts)`** — milliseconds as plain English. | Option | Default | What it does | |---|---|---| | `long` | `false` | `true` spells units out: "2 hours 5 minutes" instead of "2 hrs 5 min" | | `parts` | `2` | The most units to show: `1` → "3 days", `3` → "3 days 4 hrs 50 min" | | Input (ms) | Output | |---|---| | `0` | `"0 sec"` | | `400` (or `-400`) | `"< 1 sec"` | | `45000` | `"45 sec"` | | `59600` | `"1 min"` (rounded, with carry) | | `90000` | `"1 min 30 sec"` | | `7500000` | `"2 hrs 5 min"` | | `7220000` | `"2 hrs"` (a part that rounds to 0 is left out — never "0 min") | | `259200000` | `"3 days"` | | `-180000` | `"-3 min"` | | `1e12` | `"11,574 days 2 hrs"` (days are the largest unit) | | `NaN`, `"abc"` | `""` | Numeric strings are accepted (`"7500000"` → `"2 hrs 5 min"`). Singular units are singular: "1 hr", "1 day", "1 minute". --- ## 15. Library adapters *Your tables and charts match your theme automatically, including when it switches.* Adapters are **opt-in** — never part of `kit.css` — and **nothing is vendored**: you bring your own copy of each library, at your own version. Always load an adapter **after** the library it themes. ### 15.1 Tabulator (6.x, verified against 6.5.2) ```html  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/tabulator-tables@6.5.2/dist/css/tabulator.min.css"> <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/1978io/78UIKit@v0.4.0/css/adapters/tabulator.css"> <script src="https://cdn.jsdelivr.net/npm/tabulator-tables@6.5.2/dist/js/tabulator.min.js"></script> ``` For a filter-and-date toolbar above the grid, wrap it in `._78-table-card` / `._78-table-filters` (§8.1). Pure CSS: it maps Tabulator's classes onto kit tokens — frame and header to `--bg2`, cells to `--text`, row rules to `--row-border`, hover to `--row-hover`, selection to `--row-selected`, sorters, editors, filters, the pagination controls and the column resize handles to `--accent`. The table re-themes the moment `data-theme` flips, with no JS and no redraw. Tabulator renames classes across majors, so re-check the adapter on a major upgrade. **Responsive collapse** (`responsiveLayout: 'collapse'`) is themed too. The fold-out panel under each row wraps long values inside the table's width; Tabulator's cells are `nowrap`, which the panel would otherwise inherit. The +/- toggle is an `--accent` glyph on an `--accent-lo` tint in both themes (Tabulator hardcodes a white stroke; the adapter switches it to `currentColor`). The panel's text is `--fs-base`, the same as the cells, so it follows a changed type scale. ```js new Tabulator('#accounts', { layout: 'fitColumns', responsiveLayout: 'collapse', responsiveLayoutCollapseStartOpen: false, columns: [ { formatter: 'responsiveCollapse', width: 40, minWidth: 40, hozAlign: 'center', resizable: false, headerSort: false }, // the +/- toggle, first { title: 'Customer', field: 'customer', minWidth: 120, responsive: 0 }, // never collapses { title: 'Notes', field: 'notes', minWidth: 260, responsive: 3 } // collapses first ] }); ``` ### 15.2 FullCalendar (7.x core, verified against 7.0.2) ```html  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/fullcalendar@7.0.2/skeleton.css"> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/fullcalendar@7.0.2/themes/classic/theme.css"> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/fullcalendar@7.0.2/themes/classic/palette.css"> <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/1978io/78UIKit@v0.4.0/css/adapters/fullcalendar.css"> <script src="https://cdn.jsdelivr.net/npm/fullcalendar@7.0.2/all/global.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/fullcalendar@7.0.2/themes/classic/global.js"></script> ``` Core only — nothing here assumes a premium plugin. v7 ships **hashed atomic class names** (the calendar root looks like `fc-classic-dl1 fc-classic-1sP …`, and those strings change between builds), so class-level overrides are off the table: the palette custom properties are the whole supported theming surface, and remapping them onto kit tokens is all this adapter does. A legacy block at the bottom of the file covers v6.x, which still had stable class names. Everything resolves at runtime, so the calendar re-themes the instant `data-theme` flips. ### 15.3 Chart.js (4.x, verified against 4.5.1) ```html  <script src="https://cdn.jsdelivr.net/npm/chart.js@4.5.1/dist/chart.umd.js"></script> <script src="https://cdn.jsdelivr.net/gh/1978io/78UIKit@v0.4.0/js/_78.js"></script> <script src="https://cdn.jsdelivr.net/gh/1978io/78UIKit@v0.4.0/js/adapters/chartjs.js"></script> ``` This one is JS because a chart is a `<canvas>`, and canvas pixels cannot resolve `var(--accent)` — colors are baked in at draw time. So the adapter reads the tokens with `getComputedStyle`, pushes them into `Chart.defaults` (font, text, grid and axis colors, legend, title, tooltip styled as a kit card, element borders), and — the part everyone misses — re-applies them and calls `update('none')` on **every live chart** whenever `_78:themechange` fires, because `Chart.defaults` is only read when a chart is *constructed*. Load order matters: with the adapter in place before your charts are built, they are constructed already themed rather than corrected afterwards. On a live switch the scales follow too: Chart.js binds each scale's colors once, so the adapter rewrites grid, axis-line, tick and title colors on every live scale — but only values that still equal the previous theme's token, so a color a chart set for itself is never overwritten. *(Fixed in 0.3.0: before it, the grid and tick labels kept the old theme until a reload.)* **Don't set theme colors per chart.** `plugins.legend.labels.color`, `scales.x.grid.color` and friends in a chart's own options out-rank `Chart.defaults` and are read once, so they stay on the theme the page loaded in. Leave them unset and the legend (`--text`), ticks (`--dim`) and grid (`--border`) follow every switch. If one chart genuinely needs its own color, re-set it on `_78:themechange`. It also registers a plugin that colors datasets from the theme. **Dataset ownership rule:** a dataset that declares **no** `backgroundColor` and **no** `borderColor` is adopted and recolored on every theme switch. A dataset that declares either one is **never touched** — your explicit color always wins. Force it either way with `$_78: true` / `$_78: false` on the dataset. ```js // adopted: no colors declared → themed, and re-themed on every switch new Chart(ctx, { type: 'line', data: { labels: days, datasets: [{ label: 'Revenue', data: revenue }] } }); // left alone forever: it declares its own color new Chart(ctx2, { type: 'bar', data: { labels: days, datasets: [{ label: 'Budget', data: budget, backgroundColor: '#888' }] } }); ``` **The series ramp.** The first dataset gets `--accent`; the second gets `--series-2`, a true gray (no hue, so it recedes behind any accent and can never sit near it in hue); the third onward get the six categorical tones (`--cat-1` … `--cat-6`, §2.9). The semantic colors are not used for series: a series is a kind of thing, not a state, and a green line reads as "good". *(Changed in 0.3.0 — the ramp used to be accent, success, warn, danger, info, dim, so an existing chart's second and later series change color. Pin a dataset's color explicitly to keep the old look.)* The theme generator outputs `--series-2` too. Series coloring by chart type: line and radar get a solid border, a 16%-alpha fill and matching points; pie, doughnut and polar area get a per-slice palette with `--bg2` separators (polar area at 70% alpha); bar, bubble, scatter and everything else get a solid fill with an 80%-alpha hover. ```js _78.adapters.chartjs.palette(5) // → 5 series colors from the current theme: // --accent, --series-2, --cat-1 … --cat-6, // then the same ramp again at 65% and 40% alpha _78.adapters.chartjs.tokens() // → { text, dim, border, bg2, bg3, accent, success, warn, // danger, info, series2, cats: [6], font, fontSize, // radius } as resolved now _78.adapters.chartjs.alpha('#4b9eff', .16) // → 'rgba(75,158,255,0.16)' — the `-lo` idea, in JS _78.adapters.chartjs.apply() // re-read tokens, restyle defaults, update every live chart _78.adapters.chartjs.plugin // the registered plugin object, id '_78palette' ``` `alpha()` handles `#rgb`, `#rrggbb`, `#rrggbbaa`, `rgb()` and `rgba()`, and returns anything else untouched rather than mangling it. Chart.js 4's own auto-color plugin is disabled — the adapter replaces it. --- ## 16. Theme generator — `_78.gen` `js/generator.js` derives the **whole token set for light and dark** from one accent color, with live WCAG checks, an apply-to-the-page mode and a shareable URL. It is opt-in and **not** part of `_78.js` — load it only where you need it (the tool itself lives at https://78uikit.com). ```html <script src="https://cdn.jsdelivr.net/gh/1978io/78UIKit@v0.4.0/js/_78.js"></script> <script src="https://cdn.jsdelivr.net/gh/1978io/78UIKit@v0.4.0/js/generator.js"></script> ``` Two rules the file exists to enforce: **work in OKLCH** (HSL ramps go muddy — equal steps in HSL are not equal steps to the eye), and **dark is not inverted light** (each theme gets its own lightness and chroma targets). No color library, no build — both sRGB ⇄ OKLCH directions are implemented in the file, plus a chroma-reduction gamut map for OKLCH values that land outside sRGB. ### 16.1 The config ```js { accent: '#0073ea', // any hex; invalid input falls back to the default neutral: 'neutral', // 'neutral' | 'cool' | 'warm' | 'accent' — the tint of the grays radius: 8, // 0–20 px; --radius-sm/-lg are derived from it density: 'cozy' // 'compact' | 'cozy' | 'comfortable' — spacing scale + control heights } ``` `_78.gen.DEFAULTS` holds exactly that object. Density drives the `--space-*` scale (×0.75 / ×1 / ×1.25) and `--control-h` / `--control-h-sm` / `--icon-btn-size` (32/26/28, 36/28/32, 40/32/36). ### 16.2 Deriving and emitting ```js var result = _78.gen.derive({ accent: '#7c5cff', neutral: 'cool', radius: 10, density: 'cozy' }); result.config // the normalized config result.accent // the accent as {l, c, h} in OKLCH result.light // { '--bg': '…', '--text': '…', … } — the full light color token set result.dark // the same for dark result.base // the non-color tokens density and radius imply result.notes // human-readable notes about any automatic contrast nudges var css = _78.gen.css(result); // paste-ready CSS: both theme blocks + the base block var css = _78.gen.css(result, { base: false }); // color only, leaving shape/density alone var block = _78.gen.block(':root[data-theme="dark"]', result.dark, true); // one block; true = grouped ``` The categories are derived too, on fixed hues like the semantics (a category must not change meaning when the accent does); only their lightness is fitted per theme. Every generated theme includes all six. `css()` output drops straight into a `<style>` after `kit.css` and re-themes everything — components, adapters and all. ### 16.3 Contrast report ```js var rows = _78.gen.report(result.dark, 'dark'); // [{ label: '--text on --bg', ratio: 12.4, need: 4.5, large: false, soft: false, pass: true }, …] ``` The pairs that decide whether a theme is usable: `--text` on each of the three surfaces, `--dim` on `--bg2`, `--accent-text` on `--accent`, `--accent` on `--bg2` (large-text threshold, 3:1), each semantic color and each category (`--cat-1` … `--cat-6`) on its own `-lo` tint, and `--border` on `--bg2` as an advisory check (`soft: true` — an edge you cannot see is a border that is not doing its job). Lightness is nudged automatically where a pair would otherwise fail; the nudges land in `result.notes`. ### 16.4 Apply, persist, share ```js _78.gen.apply(result); // inject the CSS as <style id="_78-gen-style">, persist it, set data-_78-gen _78.gen.clear(); // remove the style, clear storage, drop the attribute _78.gen.stored(); // → the saved config, or null _78.gen.preview(el, result.light, result.base); // write one theme's tokens onto a container as inline // custom properties — e.g. show light inside a dark page ``` `apply()` writes a real stylesheet rather than inline properties, so **both** theme blocks are present and the kit's own toggle keeps working. It stores `{ config, css }` under `localStorage['_78-gen']` and fires `_78:genchange` on `document` (`e.detail.config`, `null` after `clear()`). `_78.gen.PREPAINT` is a second pre-paint snippet that puts a saved generated theme back before the first paint with no re-derivation. It runs **after** `_78.theme`'s snippet and before any stylesheet. ### 16.5 The `?theme=` URL format `accent.neutral.radius.density`, hex without the `#` — e.g. `?theme=0073ea.cool.8.cozy`. Short, readable, no backend. ```js _78.gen.encode(config) // → '0073ea.cool.8.cozy' _78.gen.decode('7c5cff.warm.10.compact') // → a normalized config object _78.gen.fromUrl() // read ?theme= from location.search → config or null _78.gen.shareUrl(config) // → the current URL with ?theme= set _78.gen.STORAGE // '_78-gen' ``` ### 16.6 Color math, exposed `_78.gen` also exposes the primitives it is built on, in case you need them: `resolve(color)` → `{r,g,b}` · `toOklch(rgb)` · `fromOklch(l, c, h)` · `oklch(l, c, h)` (formats the CSS string) · `hex(rgb)` · `rgba(rgb, a)` · `luminance(rgb)` · `contrast(a, b)` · `over(color, alpha, backdrop)` (what a tint actually looks like over a surface). --- ## 17. Events, storage keys and file map ### Events | Event | Fires on | `e.detail` | |---|---|---| | `_78:themechange` | `document` | `{ theme: 'dark'\|'light', pref: 'dark'\|'light'\|'system' }` | | `_78:railchange` | `document` | `{ rail: boolean }` | | `_78:drawerchange` | `document` | `{ open: boolean }` | | `_78:tabchange` | the `._78-tabs` list (bubbles) | `{ index, tab, panel, id }` | | `_78:segchange` | the `._78-seg` group (bubbles) | `{ index, button, value }` | | `_78:tocchange` | the `._78-toc` aside (bubbles) | `{ id }` — the section now being read | | `_78:genchange` | `document` | `{ config }` — `null` after `_78.gen.clear()` | ### localStorage keys | Key | Written by | Value | |---|---|---| | `_78-theme` | `_78.theme` | `'dark'` \| `'light'` \| `'system'` | | `_78-sidebar` | `_78.shell` | `'full'` \| `'rail'` | | `_78-gen` | `_78.gen` | `{ config, css }` as JSON | Every read and write is wrapped in `try` / `catch` — private mode or blocked storage degrades, it never throws. ### `<html>` attributes `data-theme` · `data-theme-pref` · `data-sidebar` · `data-drawer` · `data-_78-gen` ### Files ``` css/ kit.css the one stylesheet a project links (@imports everything below) tokens.css light + dark color blocks + the shared non-color tokens reset.css minimal reset, themed scrollbars, focus ring components/ shell · buttons · cards · grid · forms · switch · seg · details · badges · meta · viz · figure · split-bar · table · tabs · modal · toast · alert · notes · aurora · theme-toggle · toc · utilities adapters/ tabulator.css · fullcalendar.css — opt-in, never in kit.css js/ _78.js _78.theme · _78.tone · _78.util · _78.shell · _78.modal · _78.notify · _78.tabs · _78.seg · _78.viz · _78.toc generator.js _78.gen — opt-in, not part of _78.js adapters/ chartjs.js — _78.adapters.chartjs demo/ living examples, every page in light + dark llms.txt · llms-full.txt this reference, for AI coding assistants ``` ### Where to go next - https://78uikit.com — docs, the live component gallery, and the theme generator - https://github.com/1978io/78UIKit

` and you are done. ### 3.1 Full markup ```html

…your page…

``` A topbar-only page is the same markup minus the `

`, the `._78-scrim` and the sidebar pre-paint snippet. ### 3.2 Classes | Class | Role | |---|---| | `._78-topbar` | Fixed header, `--header-h` tall, `--bg2` with a bottom border | | `._78-topbar-brand` | Brand link — logo + name; turns accent on hover | | `._78-topbar-sub` | A small dim label next to the brand (environment, tenant); hidden below 768px | | `._78-topbar-spacer` | `flex: 1` — pushes everything after it to the right | | `._78-topbar-actions` | Right-hand cluster: toggles, buttons, the account menu | | `._78-nav-toggle` | The hamburger. Collapses to the rail on desktop, opens the drawer on mobile | | `._78-sidebar` | Fixed sidebar, `--sidebar-w` wide, below the topbar, scrolls independently | | `._78-nav` | Optional wrapper for the items (they also work as direct children) | | `._78-nav-heading` | A section label above a group of items | | `._78-nav-item` | One nav row: an `` or a `

``` | Class | Effect | |---|---| | `._78-btn` | Base: `--control-h` tall, `--bg2` fill, `--border` edge, gap for an icon | | `._78-btn-primary` | Accent fill, `--accent-text` label, `--accent-glow` shadow | | `._78-btn-ghost` | Transparent, dim label; accent tint + accent border on hover | | `._78-btn-danger` | `--danger-lo` tint with a `--danger` edge and label; fills solid on hover | | `._78-btn-sm` | `--control-h-sm` tall, smaller type and radius | | `._78-btn-full` | `width: 100%` | | `._78-icon-btn` | Square `--icon-btn-size` button, borderless until hovered. Give it an `aria-label` | | `._78-btn-group` | Inline flex row of buttons with a gap; wraps | `:disabled` and `[aria-disabled="true"]` both dim the button and block the press animation. An `

``` | Class | Role | |---|---| | `._78-seg` | The group: `--bg3` inset, `--border` edge, 3px padding, scrolls sideways if it overflows | | `._78-seg-btn` | One option. The active one gets a `--bg2` raised surface and accent label | | `._78-seg-sm` | Smaller: `--control-h-sm` height and `--fs-sm` type | | `._78-seg-full` | Fills its container; every option gets an equal share | | `._78-seg-accent` | The active option is an accent *fill* instead of a raised surface | `_78.seg.mountAll()` runs on load over every `._78-seg`: ```js var seg = _78.seg.mount(document.querySelector('._78-seg')); seg.value // '1w' — data-value, falling back to the button's text seg.index // 1 seg.select(2) // select by index; select(2, true) also moves focus seg.buttons // the button elements _78.seg.mountAll(container) // after injecting markup ``` ```js document.addEventListener('_78:segchange', function (e) { e.detail; // { index, button, value } — bubbles from the ._78-seg group }); ``` **What the mount does.** `role="radiogroup"` on the group (it keeps a role you set yourself) and `role="radio"` + `aria-checked` on each option — the ARIA for *exactly one of N*. Roving tabindex makes the group a single tab stop; ←/→/↑/↓ move between options and **step over disabled ones**, Home / End go to the first / last enabled option, and every change fires `_78:segchange`. The initial value is whichever option carries `aria-checked="true"`, `aria-pressed="true"` or `._78-active`, else the first — and that initial state does **not** fire an event. Mounting is idempotent; the mounted API is also on `el._78seg`. Give the group an `aria-label` (or `aria-labelledby`) saying what the value *is* — "Range", not "1D 1W 1M". A `._78-seg-btn` with no `type` is set to `type="button"`, so it is safe inside a `

`. --- ## 5. Cards, stat / KPI cards, grids and the meta line ### 5.1 Plain card ```html

Last 30 days Revenue by channel

…content…

Updated 4 minutes ago

Reports

Everything, sliced the way you asked for.

``` | Class | Role | |---|---| | `._78-card` | `--bg2` surface, `--border` edge, `--radius-lg`, `--space-4` padding, `--shadow` | | `._78-card-title` | `--fs-lg`, semibold; an `._78-eyebrow` inside it becomes its own line above | | `._78-card-head` | Title on the left, actions on the right, on one row | | `._78-card-foot` | Bottom action row. Full-bleed to the card's padding edges, like the modal foot, so its top border reaches both sides | | `._78-card-foot-fill` | Adds the modal foot's `--bg3` surface to that row | | `._78-card-link` | Makes the card an interactive link: accent border, lift and larger shadow on hover | | `._78-card-grid` | Responsive grid of cards — `auto-fit`, min 200px per column | | `._78-card-stack` | A vertical list of cards spaced by a `--space-4` gap (`-sm`: `--space-3`), wrapped or not | | `._78-grid` | The general auto-fit grid the card grids are presets of, with `._78-col-span-2` / `._78-col-full` children (§5.3) | Consecutive `._78-card` siblings get a `--space-4` gap automatically. Inside `._78-card-grid`, `._78-kpi-grid`, `._78-flex` or `._78-flex-between` they don't: there the container's gap spaces them, and every card lines up at the top. (In a grid of your own, set `margin-top: 0` on the cards yourself; the kit can't see it.) **A list of cards — `._78-card-stack`.** A one-column grid with a `--space-4` gap (`._78-card-stack-sm`: `--space-3`). Use it when the cards aren't direct siblings — each wrapped in a ``, a partial that brings its own wrapper, a hidden element between them — so the `+` rule can't reach them. Any child is spaced, card or not; hidden children take no gap. ```html

…

``` ### 5.2 Stat / KPI card The dashboard workhorse. Every part is optional — the label and the number alone are a valid card. ```html

Realized P/L

+$4,820

vs last month

Max drawdown

-8.1%

worse than last month

Open orders

6 awaiting fill

``` | Class | Role | |---|---| | `._78-stat-card` | Same surface as `._78-card`; combine with `._78-card-link` to make it clickable | | `._78-stat-card__head` | Label on the left, icon on the right | | `._78-stat-card__label` | Small uppercase dim label | | `._78-stat-card__icon` | 28px accent-tinted rounded icon slot | | `._78-stat-card__actions` | A control slot at the end of `__head` — a small toggle beside the label. A `._78-seg` inside drops to a 24px compact size, and the slot's negative block margin keeps the head at the label's height, so the number still lines up with its neighbors in a grid | | `._78-stat-card__num` | The number: 28px, bold, tabular figures | | `._78-stat-card__sub` | The caption under the number | | `._78-stat-card__row` | Puts the delta and the caption on one baseline-aligned row | | `._78-stat-card__spark` | Sparkline slot — full-bleed to the card's bottom edge, clipped to its radius | | `._78-stat-card__lines` | Key : value lines under the number — a two-column grid, so every key shares a column and every value starts on the same edge | | `._78-stat-card__line` | One line: a key and a value. In `__lines` it joins the grid; on its own it's a flex row | | `._78-stat-card__key` | The key: `--fs-xs`, `--dim`, never wraps | | `._78-stat-card__value` | The value: `--fs-sm`, `--text`, tabular figures. A `` is the figure (add a short tone like `._78-success`), a `` the dim aside after it | | `._78-stat-delta` | The delta chip. Styled identically to `._78-trend`; see §12.6 | **A control beside the label.** Put `._78-stat-card__actions` at the end of `._78-stat-card__head` — the head centers its items when it holds one: ```html

Account value

$48,290

``` **Key : value lines.** A label, then one or more figures, one row each: ```html

Account value

$48,290

Account +$123.45 today

vs benchmark +0.50% you +1.2% · index +0.7%

Trades −0.30% on capital deployed, across 9 days

``` Don't put a control inside `._78-stat-card__label` itself — the label is uppercase, letter-spaced text, and its styling would reach the buttons. Number color modifiers, applied to `._78-stat-card__num`: any tone from §2.9 in its short form (`._78-success`, `._78-danger`, `._78-warn` …; the old `._78-green` / `._78-red` still work). With none the number is `--text`. ### 5.3 Grids `._78-grid` is the one grid primitive: auto-fit columns no narrower than `--min`, a `--space-4` gap, no breakpoints. The two card grids are presets of it — the same template with their own `--min`. ```html

…

…

…

…

…

…

…

``` | Class / property | Layout | Span 2 from | |---|---|---| | `._78-grid` | `auto-fit`, `--min: 200px` | a 416px-wide grid | | `._78-card-grid` | Preset, `--min: 200px` — for `._78-card`s | 416px | | `._78-kpi-grid` | Preset, `--min: 190px` — the standard dashboard row, 2–6 across by width | 396px | | `._78-kpi-grid-sm` | With `._78-kpi-grid`: `--min: 150px` — more, tighter cards | 316px | | `._78-kpi-grid-lg` | With `._78-kpi-grid`: `--min: 240px` — fewer, roomier cards | 496px | | `--min` | The narrowest a column gets. Set it **on the grid** (`style="--min: 260px"`); a container narrower than one column gets one full-width column instead of overflowing | — | | `._78-col-span-2` | On a child: two columns when the grid has two or more, the whole row when it has one. Never adds an implicit column | — | | `._78-col-full` | On a child: always the whole row | — | **Why spans need care.** A plain `grid-column: span 2` in an auto-fit grid that is down to one column makes the browser add an implicit second column, and the row runs off the screen. `._78-col-span-2` decides with a container query instead. A container query can't read `var(--min)`, so each preset switches at its own fixed width (2 × `--min` + 16px) — with a `--min` of your own, spans still switch at the preset's width, so use `._78-col-full` there or the preset whose minimum matches. Without `:has()` / container-query support a span-2 child is simply full width. **Only a grid with a spanning child becomes a size container**, so every other grid renders exactly as it did before 0.4.0. A grid that does have one needs a width from its surroundings — normal flow and grid cells give it one; in a flex row give it `flex: 1`. ### 5.4 Meta line — `._78-meta` The small dim line of facts under a card headline: a scan summary, a thesis, the factors behind a score. Each fact is a **child element** and the kit draws the `·` separator between them (with empty alt text, so a screen reader doesn't read it), so the markup is a list of facts rather than a string with punctuation in it. ```html

Watch list

Tonight's scan: Scanned 1,234 names read the top 20 added 3
…

Watched for: a pullback to the 50-day average on falling volume, then a reclaim of… Open the watch list →
``` | Class / property | What it does | |---|---| | `._78-meta` | `--fs-sm`, `--dim`, tabular figures, wraps long words. A `·` before every child after the first | | `._78-meta-label` | A lead-in ("Watched for:") — `--text`, semibold, and no separator after it | | `b` / `strong` inside | A figure lifted out of the dim text: `--text`, semibold | | `._78-meta-xs` | `--fs-xs` instead of `--fs-sm` — a tally line, a timestamp | | `._78-meta-clamp` | Clamp to one line with an ellipsis | | `._78-meta-clamp-2` | Clamp to two lines | | `--_78-meta-lines` | With a clamp class: any number of lines, e.g. `style="--_78-meta-lines: 3"` | Straight after a `._78-card-title` or `._78-card-head` it tucks up to `--space-1` under the title and keeps `--space-3` below itself, so it reads as part of the heading. Text without child elements works too — it's just a dim line with no drawn separators. A link inside it never breaks across lines. --- ## 6. Forms and the toggle switch ```html
Email address
We only use this for receipts.

Market

Notes

Quantity
Quantity must be at least 1.

From

To

Email me when an order fills ``` | Class | Role | |---|---| | `._78-field` | Field wrapper with bottom margin; its `> label` is styled automatically | | `._78-label` | Same label styling, when the label is not a direct child of the field | | `._78-input` | Text-like input: full width, `--control-h` tall, `--bg3` fill | | `._78-select` | Same box with the native arrow replaced by a token-colored chevron | | `._78-textarea` | Same box, min 88px tall, vertically resizable | | `._78-check` | Inline label wrapping a checkbox or radio; natives tinted with `accent-color` | | `._78-field-hint` | Small dim helper text under the control | | `._78-field-error` | Small `--danger` message under the control | | `._78-field-row` | Flex row of fields, each `flex: 1 1 180px`; wraps on narrow screens | | `._78-form-inline` | A field or two and the button that submits them on one row, bottoms aligned so the button sits level with the input; fields `flex: 1 1 180px` with no bottom margin, buttons / checks / switches keep their size; wraps on a phone | **States.** Hover raises the border to `--dim`. Focus sets an `--accent` border plus a `--ring-w` ring in `--ring`. `:disabled` dims and blocks the cursor. `[aria-invalid="true"]` (or `._78-invalid` on an input) turns the border `--danger` and the focus ring `--danger-lo`. Placeholders render in `--dim`. **A form in a card foot** — dismiss with a reason, an add-row, a quick filter. `._78-form-inline` inside `._78-card-foot`; the foot already gives it the padding and the rule above: ```html

Northwind

Watched since Sep 14 for a renewal at the new price.

Why (optional)

``` Put a hint or an error after the form rather than inside a field: a line under one input would push the button out of line with it. A `._78-check` or `._78-switch` in the row centers on the input's line. ### 6.1 Toggle switch — `._78-switch` A real `` restyled as a track and a sliding thumb — not a `
` pretending. The keyboard (Tab, then Space), the focus ring, `:disabled`, label association and the checked state are all the native control's, so there is nothing to re-implement and nothing to get wrong. ```html Email me when an order fills Compact rows Confirm before closing a position Shows a modal every time. Live updates Two-factor (enforced) ``` | Class | Role | |---|---| | `._78-switch` | The wrapping ``: inline flex, `--space-2` gap, pointer cursor | | `._78-switch-input` | The checkbox itself, styled as the track + thumb. Optional inside `._78-switch` (a bare `input[type="checkbox"]` child is styled too), **required** when the switch stands alone | | `._78-switch-label` | The text beside it | | `._78-switch-hint` | A second, dim line under the label | | `._78-switch-sm` | Small: a 28×16 track instead of 36×20. Goes on the wrapper or on a standalone input | | `._78-switch-row` | Settings row: label left, switch pushed to the right edge, full width. Stacked rows space themselves `--space-4` apart | **Stacked rows need no wrapper.** `._78-switch-row + ._78-switch-row` gets a `--space-4` top margin, like stacked cards. Inside a `._78-flex-col` the rows drop that margin and the column's gap spaces them, so the old `_78-flex-col _78-gap-16` wrapper looks exactly the same, and a different gap is still one wrapper away. A margin utility on a row (`._78-mt-12`) still wins. *(Changed in 0.3.0; a wrapper of your own that spaces rows with `gap` now gets the gap plus 16px, so drop one.)* **Colors.** Off is a `--bg3` track with a `--border` edge and a `--dim` thumb; on is an `--accent` track with an `--accent-text` thumb. Hover raises the edge to `--dim`, focus is the kit's 2px accent outline, and `:disabled` dims the control (and its label) and blocks the cursor. Nothing is hardcoded — the switch re-themes with everything else. **Sizing** is three local custom properties on the input — `--switch-w`, `--switch-h`, `--switch-pad` — so a one-off size is an inline override rather than new CSS: `style="--switch-w: 44px; --switch-h: 24px"`. **`role="switch"`** is optional but recommended when the toggle takes effect immediately: a screen reader then says "on" / "off" rather than "checked" / "not checked". It changes nothing about the styling. Use a plain `._78-check` checkbox instead when the change only applies once a form is submitted. --- ## 7. Badges, tags, pills and the status line ```html Draft New Live Pending Failed Beta Archived EUR/USD Momentum 92 64 28 Last 30 days ``` | Class | Role | |---|---| | `._78-badge` | Small status chip: `--bg3` fill, `--border` edge, `--fs-xs`, semibold | | `._78-badge-{tone}` | Any tone from §2.9 (`accent` `success` `warn` `danger` `info`, plus aliases): `-lo` tint fill with solid text, no border | | `._78-badge-cat-1` … `-cat-6` | Categorical colors for labels that are not states (§2.9); same shape, `--cat-*` / `--cat-*-lo` | | `._78-badge-dim` | Explicitly neutral (the base look, stated) | | `._78-badge-dot` | Adds a 6px `currentColor` dot before the label — status that is not color-only | | `._78-tag` | Softer pill for keywords / filters; `--fs-sm`, full text color | | `._78-tag-{tone}` | Any tone from §2.9: a tinted tag | | `._78-tag-x` | The remove control inside a tag (a `
``` | Class | Role | |---|---| | `._78-table` | Base: full width, collapsed borders, uppercase dim ``, `--row-border` row rules | | `._78-table-compact` | Tighter padding, for dense data | | `._78-table-striped` | Zebra rows using `--bg3`, for long unbroken tables | | `._78-table-sticky` | Sticky `` — needs a scroll container with a fixed height | | `._78-table-wrap` | Bordered, rounded, `--bg2` scroll container: the table scrolls, never the page | | `._78-selected` | On a ``: `--row-selected` background | | `._78-right` | On a `` or ``: right-aligned with tabular figures — use it for numbers | | `._78-center` | On a `` or ``: centered | Rows hover to `--row-hover`, the last row drops its bottom rule, `` gets a top border and dim semibold text, and `` renders as a small dim left-aligned line above the table. ### 8.1 Table card and toolbar — `._78-table-card` The frame a data table lives in: a card with tighter padding and a filter row above the table — a date range, a checkbox or two, a count and a clear button. The same classes work over a Tabulator grid (§15.1) or a plain `._78-table`. ```html

From

To
Errors only 2 Showing 4 of 4

When Event Rows

Oct 3 Nightly import 1,204

Oct 3 Error Webhook timed out 0

Oct 2 Nightly import 986

Oct 2 Error Rate limited 0

``` Over a Tabulator, the table div replaces the `._78-table-wrap`, and Tabulator's own `setFilter` does the filtering: ```html

… the same toolbar …

``` | Class | Role | |---|---| | `._78-table-card` | The card: `._78-card`'s surface with `--space-3` padding | | `._78-table-filters` | The toolbar row: wraps, bottoms aligned so labeled fields sit level, `--space-3` apart and `--space-3` above the table. Fields lose their bottom margin; a `._78-check`, `._78-switch` or `._78-table-count` centers on the inputs' line, and so does a `._78-btn-sm` | | `._78-table-dates` | On a `._78-field` with a date input: 130–170px wide, so a From / To pair stays side by side on a phone | | `._78-table-count` | The "Showing 12 of 40" readout: `--fs-xs`, `--dim`, tabular figures | Use `._78-grow` as the spacer that pushes the count and the clear button to the right; hide the clear button with `hidden` until a filter is set. --- ## 9. Tabs ```html

…

…

…
``` `_78.js` mounts every `._78-tabs` on load. It sets `role="tablist"` / `role="tab"` / `role="tabpanel"`, links each tab to its panel with `aria-controls` / `aria-labelledby`, gives tabs an id if they lack one, adds `._78-tabpanel` to each panel, manages `aria-selected` and a roving `tabindex`, and hides inactive panels with the `hidden` attribute. Activation is automatic — the panel follows focus. | Class / attribute | Role | |---|---| | `._78-tabs` | The tab list. Underline style; scrolls horizontally on narrow screens | | `._78-tabs-segmented` | Pill variant: a bordered `--bg3` track with the selected tab raised | | `._78-tab` | One tab. `data-tab="panel-id"` names its panel (`aria-controls` also works) | | `._78-active` | On a tab in the markup: makes it the initially selected one | | `._78-tabpanel` | The panel; added automatically. `[hidden]` panels are display-none | **Keyboard:** Left / Right / Up / Down move between tabs (wrapping), Home selects the first, End the last. **Initial selection:** whichever tab is marked `aria-selected="true"` or `._78-active`, else the first. ### 9.1 API and event ```js var tabs = _78.tabs.mount(document.querySelector('._78-tabs')); tabs.select(2); // select by index; select(2, true) also moves focus tabs.tabs; // the array of tab elements tabs.el; // the list element _78.tabs.mountAll(scope) // mount every ._78-tabs in a scope (default: document) ``` `_78:tabchange` **bubbles from the tab list** (it is not a `document`-level event like the others): ```js document.querySelector('._78-tabs').addEventListener('_78:tabchange', function (e) { console.log(e.detail.index, e.detail.id, e.detail.tab, e.detail.panel); }); ``` --- ## 10. Dropdown menu Built for the account menu in the topbar, but it works anywhere on the page. ```html

Edit

``` The trigger is the element carrying `aria-haspopup`, or failing that the first `
…

``` ```js _78.modal.mount(el); // add backdrop-click dismissal (idempotent); // data-_78-dismissible="false" on the blocks // backdrop and Escape instead var returnValue = await _78.modal.show(el); // showModal() + resolve on close ``` | Class | Role | |---|---| | `._78-modal` | The dialog: 520px, `--bg2`, `--radius-lg`, `--shadow-lg`, `--overlay` backdrop | | `._78-modal-sm` / `._78-modal-lg` | 400px / 760px wide | | `._78-modal-danger` / `._78-modal-warn` | Tone: colors the title | | `._78-modal-head` | Title row with the close control | | `._78-modal-title` | The heading (`open()` links it with `aria-labelledby`) | | `._78-modal-body` | Scrolls past 60vh | | `._78-modal-foot` | Right-aligned action row on a `--bg3` bar | | `._78-modal-foot-split` | Pushes the first action to the left (a "Reset" opposite "Apply") | | `._78-modal-close` | The `
` wrapper for the × — closes with no JS | **Headless-browser note:** Chrome in `--headless` mode only fires the `` `close` event at a rendering opportunity, so promise-based modal assertions read as flaky there. Verify modals headed. ### 11.2 Toast ```js _78.notify('Copied to clipboard'); _78.notify.success('Order saved'); _78.notify.error('Could not reach the server'); // 6s instead of 4s, role="alert" _78.notify.danger('Could not reach the server'); // the same thing, by its tone name _78.notify.warn('Two rows were skipped'); _78.notify.info('Export queued'); var t = _78.notify('Uploading…', { type: 'info', // any tone (§2.9), 'error' (= danger) or 'default' title: 'Import', // optional bold line above the message duration: 0, // ms; 0 = sticky, closable only by its × button html: false // true = treat the message as markup (a DOM node also works) }); t.close(); // dismiss it yourself t.el; // the toast element ``` Defaults: 4000ms, or 6000ms for `error`. An error toast gets `role="alert"` + `aria-live="assertive"`; everything else gets `role="status"` + `aria-live="polite"`. The container is created on first use. | Class | Role | |---|---| | `._78-toasts` | The fixed stack, bottom-right, created by the kit | | `._78-toasts-left` / `._78-toasts-top` | Move the stack to another corner. The kit creates the container without them, so add the class yourself: `document.querySelector('._78-toasts').classList.add('_78-toasts-left')` — or, since the container is built on first use, target it in your own CSS | | `._78-toast` | One toast: `--bg2`, `--shadow-lg`, a 3px left edge that carries the type | | `._78-toast-success` / `-error` / `-warn` / `-info` | Type variants | | `._78-toast-title` / `._78-toast-msg` / `._78-toast-body` / `._78-toast-close` | Its parts | ### 11.3 Inline alert and empty state Pure CSS; the only behavior is dismissal, and that is delegated — any `._78-alert-close` removes its alert. ```html

Import failed
Three rows were rejected because their dates could not be parsed.

Rates refresh every 15 minutes.

No orders yet

When you place one, it will show up here.

``` | Class | Role | |---|---| | `._78-alert` | Base: `--bg3`, bordered, with a 3px left edge in `--dim` | | `._78-alert-{tone}` (any tone, §2.9) | `-lo` tint fill, colored left edge, colored title and icon | | `._78-alert-icon` | 18px icon slot on the left | | `._78-alert-body` | The text column | | `._78-alert-title` | Bold first line | | `._78-alert-close` | Optional dismiss button — wired by the kit, no JS to write | | `._78-empty` | Centered dashed-border empty state | | `._78-empty-title` | Its bold headline | Add `role="alert"` yourself when the message appears in response to an action; a standing notice does not need one. **Lists in an alert** keep their indent and markers: a plain `
` / `
` inside `._78-alert-body` (and inside a `._78-card`, `._78-modal-body` or `._78-details-body`) is indented `--space-5` with `--space-1` between items. Use `._78-list-plain` (§14) for a list with no markers. *(Fixed in 0.3.0 — the reset used to leave the bullets outside the box.)* **Paragraphs in an alert** space themselves too: consecutive `
`s inside `._78-alert-body` get a `--space-2` gap. Inside a `._78-card` or a `._78-details-body` it's `--space-3`, the same as a `._78-modal-body`. The rule weighs nothing (`:where()`), so a margin utility on the paragraph wins. *(New in 0.4.0 — before, the reset ran two paragraphs together.)* ```html

Worth a look

Earnings are due on Thursday, before the open.

The position is past its time stop.

``` ```html

Three rows were rejected

Row 7: unknown symbol

Row 12: size is zero

``` ### 11.4 Quiet notes — `._78-notes` The secondary text inside a card that an alert would shout: "close to target, nothing to do yet", the time-stop and earnings lines under a position, the reason an action isn't offered. An alert is for something to act on and `._78-empty` is for a region with nothing in it; notes are things worth knowing. Dim, `--fs-sm`, and after other content in a card they sit `--space-4` down, where a card foot would. ```html

Close to target, nothing to do yet:

AAPL is 1.2% under its first target

MSFT is 0.8% under its first target

Worth a look

NVDA reports on Thursday, before the open

AMD is past its 20-day time stop

The market check moved to caution

Nothing has been changed. These are things to know, not instructions.

No order to place: the price is already 3% past the entry.

``` | Class | Role | |---|---| | `._78-notes` | The block (or a single `
`): `--dim`, `--fs-sm`. After other content in a `._78-card`, `--space-4` above it | | `._78-notes-title` | An optional small heading: `--text`, semibold, sentence case | | `
` / `
` inside | No bullets or indent of the prose kind; each `
` gets a 6px dot marker, `--space-1` apart | | `._78-tone-{tone}` on an `
` | Colors that line's marker — any tone or category from §2.9. The text stays dim | | `._78-tone-{tone}` on the block | Colors every marker (and the box edge); a tone on a line overrides it | | `._78-notes-box` | The compact alert: `--bg3` inset, `--radius-sm`, a 3px left edge in the tone (`--border` without one) | | `._78-notes-ruled` | A hairline above and `--space-3` of padding — a footnote under the card's content | | `._78-notes-xs` | `--fs-xs` — on the block, or on one paragraph inside it | Consecutive notes blocks sit `--space-2` apart. The marker is reinforcement, never the message: write the line so it reads without its color. --- ## 12. Data-viz primitives — `_78.viz`, figure rows and split bars Sparkline, progress bar, labeled bar row, donut / gauge, trend arrow, figure row and split bar — inline SVG and plain elements painted with kit tokens, so a theme switch needs **no redraw**. They exist so you do not load a chart library to draw one 40px trend line. Anything deeper — axes, tooltips, interaction — is Chart.js and its adapter (§15.3). **Color** flows through two inherited variables: `--viz` (the solid color, falling back to `--accent`) and `--viz-lo` (its tint, falling back to `--accent-lo`). Set them with a tone class on the primitive **or any ancestor**, or by hand: | Tone class | Sets | |---|---| | `._78-tone-accent` | `--accent` / `--accent-lo` | | `._78-tone-success` | `--success` / `--success-lo` | | `._78-tone-warn` | `--warn` / `--warn-lo` | | `._78-tone-danger` | `--danger` / `--danger-lo` | | `._78-tone-info` | `--info` / `--info-lo` | | `._78-tone-dim` | `--dim` / `--row-hover` | Aliases (`._78-tone-green` / `-red` / `-amber` / `-yellow`) work too; see §2.9. ```html

``` **Accessibility rule:** every primitive either renders its value as text or gets `role="img"` plus an `aria-label`. Color or shape is never the only carrier of the meaning. ### 12.1 Auto-mounting `_78.viz.mountAll()` runs on load over the whole document, and matches: | Selector | Renders | |---|---| | `[data-values]` | A sparkline inside the element | | `._78-progress[data-pct]` | Progress track + fill + `role="progressbar"` | | `._78-bar-row[data-pct]` | Bar fill + `role="progressbar"` | | `._78-donut[data-pct]` | The ring and its center value | | `._78-split-bar` | Sizes its `._78-split-seg` children and writes the group `aria-label` | | `._78-trend[data-delta]`, `._78-stat-delta[data-delta]` | The arrow, the text and the direction word | Call `_78.viz.mountAll(container)` after injecting markup. Every function is also callable directly, and re-rendering an element replaces its previous SVG rather than stacking a second one. ### 12.2 Sparkline ```html

``` ```js _78.viz.sparkline(el, [18, 22, 19, 27, 31], { width: 120, // viewBox width (default 120) — the SVG still stretches to the container height: 32, // viewBox height (default 32) fill: true, // the area under the line (default true) dot: false, // the dot on the last point (default FALSE — opt in with dot:true) tone: 'auto', // a tone name, or 'auto': success if the series ends up, danger if down label: 'Revenue, 7 days' // aria-label + }); ``` `data` may be an array or a string of numbers separated by commas or whitespace; omit it and the element's `data-values` is used. Fewer than two points renders nothing (returns `null`). A flat series draws down the middle instead of dividing by zero. The stroke is non-scaling, so a stretched sparkline does not get a fat line. Attributes: `data-values`, `data-tone` (including `"auto"`), `data-label`, `data-fill="false"`, `data-dot="true"`. The end-of-series dot is **off by default** (it crowds a small card); `dot: true` / `data-dot="true"` turns it on. *(Changed in 0.2.0 — it used to be on by default.)* The dot stays round at any width: it is a zero-length path drawn by its round cap with a non-scaling stroke, so its color is `stroke` and its size is `stroke-width` (5px, with an 8px `--bg2` halo underneath). *(Changed in 0.3.0 — it was a `<circle>`, which stretched into an ellipse in any container wider than 120px. A custom rule that set `fill` on `._78-sparkline-dot` should set `stroke` now.)* Without a label, the kit writes a plain-English one: *"Trend, 7 points: 18 to 34 (up)"*. | Class | Role | |---|---| | `._78-sparkline` | The generated `<svg>`: full width, 32px tall | | `._78-sparkline-line` / `-area` / `-dot` / `-base` | Its parts, all painted from `--viz` / `--viz-lo` | | `._78-sparkline-dot-ring` | The `--bg2` halo drawn under the end dot | ### 12.3 Progress bar ```html <div class="_78-progress" data-pct="72"> <div class="_78-progress-head"> <span class="_78-progress-label">Win rate</span> <span class="_78-progress-value"></span>  </div> <div class="_78-progress-track"><div class="_78-progress-fill"></div></div> </div>  <div class="_78-progress _78-tone-warn _78-progress-lg" data-pct="68" data-label="Margin used"></div> ``` ```js _78.viz.progress(el, 72, { label: 'Win rate', // aria-label; falls back to data-label, then ._78-progress-label's text text: true // false leaves ._78-progress-value alone instead of writing "72%" }); ``` The percentage is clamped to 0–100. The track gets `role="progressbar"` with `aria-valuenow` / `min` / `max`. An existing `._78-progress-value` with text in it is never overwritten. | Class | Role | |---|---| | `._78-progress` | The wrapper — carry `data-pct` here | | `._78-progress-head` | Label row above the bar | | `._78-progress-label` / `._78-progress-value` | Its dim label and its bold tabular value | | `._78-progress-track` / `._78-progress-fill` | The 6px rail and its `--viz` fill (created if absent) | | `._78-progress-sm` / `._78-progress-lg` | 4px / 10px rail instead | ### 12.4 Bar row For ranked lists. Unlike progress, the `._78-bar-track` element must exist in your markup — the row is a three-column grid, so the kit does not guess where it goes. ```html <div class="_78-bar-list"> <div class="_78-bar-row" data-pct="82"> <span class="_78-bar-label">EUR/USD</span> <span class="_78-bar-track"><span class="_78-bar-fill"></span></span> <span class="_78-bar-value">82</span> </div> <div class="_78-bar-row _78-tone-info" data-pct="47"> <span class="_78-bar-label">GBP/USD</span> <span class="_78-bar-track"></span> <span class="_78-bar-value">47</span> </div> </div> ``` ```js _78.viz.bar(el, 82, { label: 'EUR/USD' }); // label falls back to ._78-bar-label's text ``` | Class | Role | |---|---| | `._78-bar-list` | Vertical stack of rows with a gap | | `._78-bar-row` | Grid: label (min 72px / 26%) · track · value. Carry `data-pct` here | | `._78-bar-label` | Truncates with an ellipsis | | `._78-bar-track` / `._78-bar-fill` | The 8px rail and its `--viz` fill (the fill is created if absent) | | `._78-bar-value` | Right-aligned, bold, tabular | ### 12.5 Donut and gauge ```html <div class="_78-donut" data-pct="68" data-label="Margin used"></div> <div class="_78-donut _78-gauge _78-tone-success" data-pct="41" data-label="Health"></div> <div class="_78-donut _78-donut-lg" data-pct="92"></div>  <div class="_78-donut" data-pct="76"> <div class="_78-donut-center"> <div class="_78-donut-value">3.4×</div> <div class="_78-donut-label">Leverage</div> </div> </div> ``` ```js _78.viz.donut(el, 68, { size: 100, // viewBox size (default 100) stroke: 12, // ring thickness (default 12, or 11 for a gauge) gauge: false, // true forces the 240° arc; otherwise ._78-gauge decides label: 'Margin used', value: '68%' // override the center text (default: the rounded percentage) }); ``` A gauge is the same ring drawn as a 240° arc with the gap at the bottom and the value sitting in it. The wrapper gets `role="img"` and an `aria-label` of `"<label>: <value>"`; the SVG itself is `aria-hidden`. | Class | Role | |---|---| | `._78-donut` | The wrapper — 104px wide. Carry `data-pct` here | | `._78-gauge` | Draws the ring as a 240° arc | | `._78-donut-sm` / `._78-donut-lg` | 72px / 136px wide, with the value type scaled to match | | `._78-donut-center` / `._78-donut-value` / `._78-donut-label` | Center stack (created if absent) | | `._78-donut-track` / `._78-donut-fill` | The ring's two circles: `--border` and `--viz` | ### 12.6 Trend arrow ```html <span class="_78-trend" data-delta="12.4"></span>  <span class="_78-trend" data-delta="-3.1"></span>  <span class="_78-trend" data-delta="0"></span>  <span class="_78-trend _78-trend-pill" data-delta="8.2" data-unit=" bps"></span> <span class="_78-stat-delta" data-delta="2.2" data-invert="true"></span>   <span class="_78-trend _78-up">▲ 12.4% <span class="_78-sr-only">up</span></span> ``` ```js _78.viz.trend(el, 12.4, { invert: false, // true = up is bad: colors up red and down green unit: '%', // '' for none; data-unit="" also means none text: '+12.4%', // override the rendered text entirely label: 'up' // the screen-reader word (default: 'up' / 'down' / 'no change') }); ``` Direction comes from the number's sign, with exactly `0` reading as flat. The kit renders an arrow SVG, the text, and a `._78-sr-only` direction word — so the meaning survives without color or shape. | Class | Role | |---|---| | `._78-trend` | The chip. `._78-stat-delta` is identical, for use inside a stat card | | `._78-up` / `._78-down` / `._78-flat` | Direction — set by `_78.viz.trend()`, or write it yourself | | `._78-invert` | Up is bad: swaps the success / danger colors | | `._78-trend-pill` | Pill treatment, with a tinted background per direction | Attributes: `data-delta`, `data-unit`, `data-invert="true"`. ### 12.7 Figure row — `._78-figure-row` N *related* numbers read side by side, each with a label and a semantic tone shown as a colored left edge: entry / take-profit / stop, plan / actual / variance, min / median / max, three-tier pricing. One fact in parts — where a `._78-kpi-grid` (§5.3) is unrelated metrics and a `._78-stat-card` is one headline number. CSS only, and toned with the same `._78-tone-*` classes as everything else in this section, so a figure and the chart beside it agree on color. ```html <div class="_78-figure-row"> <div class="_78-figure _78-tone-accent"> <span class="_78-figure-label">Entry</span> <span class="_78-figure-value">1.0842</span> </div> <div class="_78-figure _78-tone-success"> <span class="_78-figure-label">Take profit</span> <span class="_78-figure-value">1.0985</span> <span class="_78-figure-sub">+143 pips</span> </div> <div class="_78-figure _78-tone-danger"> <span class="_78-figure-label">Stop</span> <span class="_78-figure-value">1.0790</span> <span class="_78-figure-sub">−52 pips</span> </div> </div>  <div class="_78-figure-row _78-figure-row-sm _78-figure-strong"> … </div>  <div class="_78-figure-row _78-figure-row-plain"> … </div>  <div class="_78-figure-row"> <div class="_78-figure _78-tone-success"> … Signal when … </div> <div class="_78-figure _78-tone-danger"> … Dead if … </div> <div class="_78-figure _78-figure-neutral"> <span class="_78-figure-label">Time left</span> <span class="_78-figure-value">6</span> <span class="_78-figure-sub">trading days</span> </div> </div>  <div class="_78-figure-row _78-figure-row-neutral"> … </div> ``` | Class | Role | |---|---| | `._78-figure-row` | The row: an auto-fit grid, min 140px per figure, `--space-3` gap, wraps | | `._78-figure` | One figure: `--bg3` fill, `--radius-sm`, and a 3px `--viz` left edge | | `._78-figure-label` | The uppercase `--fs-xs` label — always say what the number is | | `._78-figure-value` | The number: `--fs-lg`, bold, tabular figures | | `._78-figure-sub` | A small dim line under the value | | `._78-figure-strong` | On a figure (or the row): the value takes the tone color too | | `._78-figure-row-sm` | Denser padding and an `--fs-base` value, for a table cell or a narrow card | | `._78-figure-row-plain` | No fill and no edge; the tone moves to the label | | `._78-figure-neutral` | On one figure: no tone, even one inherited from the row or a parent — the edge is `--border`, a `-strong` value is `--text`, a `-plain` label is `--dim`. For a figure that isn't part of the set's meaning ("Time left" beside a target and a stop) | | `._78-figure-row-neutral` | On the row: every figure neutral, so the row carries no semantic edges at all | A figure with no tone class already has a `--border` edge; `-neutral` is for when a tone would otherwise be inherited, and for saying so in the markup. The label is the meaning and the color is reinforcement — never ship a figure row whose only difference between parts is the tone. ### 12.8 Split bar — `._78-split-bar` One bar, two or more proportional segments, each with its own semantic color: risk vs reward, spent vs remaining, pass / skip / fail. `._78-progress` (§12.3) is a single fill of one track and `._78-bar-row` (§12.4) is one row of a ranked list; this is the split of a whole into named parts. ```html <div class="_78-split-head"> <span class="_78-split-title">Risk / reward</span> <span class="_78-split-total">1 : 1.9</span> </div> <div class="_78-split-bar" data-label="Risk versus reward"> <span class="_78-split-seg _78-tone-danger" data-pct="35" data-label="Risk"></span> <span class="_78-split-seg _78-tone-success" data-pct="65" data-label="Reward"></span> </div> <div class="_78-split-legend"> <span class="_78-split-key _78-tone-danger">Risk <b>35%</b></span> <span class="_78-split-key _78-tone-success">Reward <b>65%</b></span> </div> ``` ```js _78.viz.splitBar(el, [ { pct: 45, tone: 'accent', label: 'Equities' }, { pct: 30, tone: 'info', label: 'FX' }, { pct: 25, tone: 'dim', label: 'Cash' } ], { label: 'Allocation' }); // omit the array to size the markup that is already there ``` | Class | Role | |---|---| | `._78-split-bar` | The track: 8px tall, pill radius, `--border` fill, a 2px gap between segments | | `._78-split-seg` | One segment, painted from `--viz`; its width is set by `_78.viz.splitBar()` | | `._78-split-bar-sm` / `-lg` | 4px / 12px tall | | `._78-split-head` | Optional title + total line above the bar | | `._78-split-title` / `._78-split-total` | Its two halves — dim label, solid tabular value | | `._78-split-legend` | A wrapping row of keys under the bar | | `._78-split-key` | One key: takes the segment's tone class and gets a matching dot | Attributes: `data-pct` and `data-label` per segment, `data-label` on the bar itself. **Totals.** Values under 100 leave the shortfall as visible track, so "68% used" works with one segment. Values totaling more than 100 are treated as raw amounts and shared out — `512 / 96 / 32` renders as 80% / 15% / 5% with no math on your side. **Accessibility.** The bar becomes one `role="img"` whose `aria-label` names every segment and its share ("Risk versus reward: Risk 35%, Reward 65%"), and each segment repeats its own text as a `title`. Write the legend yourself — the wording is yours, and it is what makes the colors legible. --- ## 13. Disclosure — `._78-details` A styled `<details>` / `<summary>`: the native marker is removed (including Safari's `::-webkit-details-marker`) and replaced with a chevron that rotates when the element opens. **No JS** — the keyboard, screen-reader, and find-in-page behavior is the browser's own. This is the progressive "show the numbers behind this" pattern: the headline stays readable, the detail is one click away. ```html <details class="_78-details"> <summary>Show the numbers behind this <span class="_78-details-meta">3 legs</span></summary> <div class="_78-details-body"> … </div> </details> <details class="_78-details _78-details-fill" open> <summary>Assumptions</summary> <div class="_78-details-body">Commission at 0.08%, financing at base + 2.5%.</div> </details> <details class="_78-details _78-details-plain"> <summary>What counts as an open position?</summary> <div class="_78-details-body _78-text-sm">Anything with a non-zero quantity at the close.</div> </details> ``` | Class | Role | |---|---| | `._78-details` | The `<details>`: `--bg2` surface, `--border` edge, `--radius`, clipped corners | | `._78-details-summary` | Optional class on the `<summary>` — a direct `> summary` is styled anyway | | `._78-details-meta` | Pushed to the right of the summary: a count, a total, a badge | | `._78-details-body` | The revealed content: `--space-3` padding, separated by a top border | | `._78-details-plain` | No box — for a disclosure inside a card that already has one | | `._78-details-fill` | `--bg3` summary bar, the way a table or a card foot is tinted | | `._78-details-sm` | Smaller type and padding throughout | The chevron is pure CSS (two borders rotated), so there is no icon set to load and it follows the text color; `[open]` rotates it. Hover tints the summary with `--row-hover` and turns it accent; focus is the kit's 2px accent outline, inset. Consecutive `._78-details` siblings get a `--space-2` gap. Keep the summary a real summary — a sentence someone can act on. Screen readers announce it as a disclosure with its expanded state for free. --- ## 14. Utilities A deliberately small set — the kit is a component library, not a utility framework. | Group | Classes | |---|---| | Text | `._78-text-{tone}` and the short `._78-{tone}` (all six tones and their aliases, §2.9) · `._78-text-sm` `._78-text-xs` | | Type | `._78-fw-600` `._78-mono` `._78-nums` (tabular figures) `._78-truncate` | | Layout | `._78-flex` `._78-flex-between` `._78-flex-wrap` `._78-flex-col` `._78-grow` | | Gaps | `._78-gap-8` `._78-gap-12` `._78-gap-16` | | Margins | `._78-mt-8` `._78-mt-12` `._78-mt-16` `._78-mb-4` `._78-mb-8` `._78-mb-12` `._78-mb-16` | | Lists | `._78-list-plain` | | Effects | `._78-text-aurora` (animated gradient text) | | Accessibility | `._78-sr-only` | `._78-flex` and `._78-flex-between` both center their items vertically. **Aurora text — `._78-text-aurora`.** A slow multi-color gradient drifting through the letters, for a hero word, a role badge or a wordmark: ```html <h1>Theme <span class="_78-text-aurora">everything</span>, live.</h1>  <strong class="_78-text-aurora" style="--_78-aurora: var(--success), var(--info), var(--success); --_78-aurora-speed: 3s">…</strong> ``` | Property | Default | What it does | |---|---|---| | `--_78-aurora` | `var(--accent-hover), var(--cat-1), var(--cat-3), var(--cat-5), var(--accent-hover)` | The gradient's colors, comma-separated. End on the color you start with and the loop has no seam | | `--_78-aurora-speed` | `6s` | One full pass of the gradient | It's a 300%-wide `linear-gradient` clipped to the text (`background-clip: text`), moved by a linear, infinite keyframe on `background-position`. The default stops are tokens, so it re-themes, and every point of the default gradient clears 4.5:1 on `--bg`, `--bg2` and `--bg3` in both themes — `--accent-hover` rather than `--accent` because it's the higher-contrast end of the accent in both. Check your own colors the same way. **`prefers-reduced-motion: reduce` gets a still gradient.** In forced-colors mode, or a browser without `background-clip: text`, the text is solid (`CanvasText` / `--accent-hover`), never invisible. Selected text switches to `--text` so a selection stays readable. Keep it to a word or a short phrase: moving color on a paragraph is hard to read. **Lists.** The reset strips list padding everywhere, on purpose. Inside the components that hold prose (`._78-alert-body`, `._78-card`, `._78-modal-body`, `._78-details-body`) a `<ul>` / `<ol>` with **no class of its own** gets an indent and a rhythm back; everywhere else lists stay bare. The rule is written with `:where()`, so any rule of yours out-ranks it. `._78-list-plain` removes markers and indent anywhere (if your own prose CSS styles a bare `.content ul`, scope it as `ul:not([class])` or it will out-rank the utility): ```html <ul class="_78-list-plain"> <li>No markers, no indent, still a list to a screen reader</li> </ul> ``` **Paragraphs.** The reset zeroes paragraph margins too. In the same components, a `<p>` that follows a `<p>` gets a top margin back: `--space-2` in `._78-alert-body`, `--space-3` in `._78-card` and `._78-details-body` (`._78-modal-body` has always had `--space-3`). Zero specificity, so a utility such as `._78-mt-8` on the paragraph, or any rule of yours, wins. **Two spellings, one color.** Every text tone has a long and a short form — `._78-text-danger` and `._78-danger` are the same rule, for all six tones and their aliases (§2.9). The short forms started life on `._78-stat-card__num` and now work anywhere, so no spelling is a typo. **The escape hatch.** There is deliberately no margin utility above 16px and there are no padding utilities. Above the scale, use the space tokens directly — `style="padding: var(--space-5)"` — that is the intended way out, not a gap in the set. ### 14.1 JS helpers — `_78.util` Two small helpers, dependency-free and DOM-free. *(Added in 0.3.0.)* **`_78.util.sortAlpha(a, b)`** — a comparator for human sorting. Case-insensitive, locale-aware (`Intl.Collator` with `numeric: true`), so "Item 2" sorts before "Item 10". Blanks (`null`, `undefined`, `""`) sort after everything else; non-strings are compared as their text. ```js ['Item 10', 'item 2', 'Item 1', 'apple', 'Banana'].sort(_78.util.sortAlpha) // → ['apple', 'Banana', 'Item 1', 'item 2', 'Item 10'] new Tabulator('#grid', { columns: [{ title: 'Name', field: 'name', sorter: _78.util.sortAlpha }] // works as-is }); ``` **`_78.util.duration(ms, opts)`** — milliseconds as plain English. | Option | Default | What it does | |---|---|---| | `long` | `false` | `true` spells units out: "2 hours 5 minutes" instead of "2 hrs 5 min" | | `parts` | `2` | The most units to show: `1` → "3 days", `3` → "3 days 4 hrs 50 min" | | Input (ms) | Output | |---|---| | `0` | `"0 sec"` | | `400` (or `-400`) | `"< 1 sec"` | | `45000` | `"45 sec"` | | `59600` | `"1 min"` (rounded, with carry) | | `90000` | `"1 min 30 sec"` | | `7500000` | `"2 hrs 5 min"` | | `7220000` | `"2 hrs"` (a part that rounds to 0 is left out — never "0 min") | | `259200000` | `"3 days"` | | `-180000` | `"-3 min"` | | `1e12` | `"11,574 days 2 hrs"` (days are the largest unit) | | `NaN`, `"abc"` | `""` | Numeric strings are accepted (`"7500000"` → `"2 hrs 5 min"`). Singular units are singular: "1 hr", "1 day", "1 minute". --- ## 15. Library adapters *Your tables and charts match your theme automatically, including when it switches.* Adapters are **opt-in** — never part of `kit.css` — and **nothing is vendored**: you bring your own copy of each library, at your own version. Always load an adapter **after** the library it themes. ### 15.1 Tabulator (6.x, verified against 6.5.2) ```html  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/tabulator-tables@6.5.2/dist/css/tabulator.min.css"> <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/1978io/78UIKit@v0.4.0/css/adapters/tabulator.css"> <script src="https://cdn.jsdelivr.net/npm/tabulator-tables@6.5.2/dist/js/tabulator.min.js"></script> ``` For a filter-and-date toolbar above the grid, wrap it in `._78-table-card` / `._78-table-filters` (§8.1). Pure CSS: it maps Tabulator's classes onto kit tokens — frame and header to `--bg2`, cells to `--text`, row rules to `--row-border`, hover to `--row-hover`, selection to `--row-selected`, sorters, editors, filters, the pagination controls and the column resize handles to `--accent`. The table re-themes the moment `data-theme` flips, with no JS and no redraw. Tabulator renames classes across majors, so re-check the adapter on a major upgrade. **Responsive collapse** (`responsiveLayout: 'collapse'`) is themed too. The fold-out panel under each row wraps long values inside the table's width; Tabulator's cells are `nowrap`, which the panel would otherwise inherit. The +/- toggle is an `--accent` glyph on an `--accent-lo` tint in both themes (Tabulator hardcodes a white stroke; the adapter switches it to `currentColor`). The panel's text is `--fs-base`, the same as the cells, so it follows a changed type scale. ```js new Tabulator('#accounts', { layout: 'fitColumns', responsiveLayout: 'collapse', responsiveLayoutCollapseStartOpen: false, columns: [ { formatter: 'responsiveCollapse', width: 40, minWidth: 40, hozAlign: 'center', resizable: false, headerSort: false }, // the +/- toggle, first { title: 'Customer', field: 'customer', minWidth: 120, responsive: 0 }, // never collapses { title: 'Notes', field: 'notes', minWidth: 260, responsive: 3 } // collapses first ] }); ``` ### 15.2 FullCalendar (7.x core, verified against 7.0.2) ```html  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/fullcalendar@7.0.2/skeleton.css"> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/fullcalendar@7.0.2/themes/classic/theme.css"> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/fullcalendar@7.0.2/themes/classic/palette.css"> <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/1978io/78UIKit@v0.4.0/css/adapters/fullcalendar.css"> <script src="https://cdn.jsdelivr.net/npm/fullcalendar@7.0.2/all/global.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/fullcalendar@7.0.2/themes/classic/global.js"></script> ``` Core only — nothing here assumes a premium plugin. v7 ships **hashed atomic class names** (the calendar root looks like `fc-classic-dl1 fc-classic-1sP …`, and those strings change between builds), so class-level overrides are off the table: the palette custom properties are the whole supported theming surface, and remapping them onto kit tokens is all this adapter does. A legacy block at the bottom of the file covers v6.x, which still had stable class names. Everything resolves at runtime, so the calendar re-themes the instant `data-theme` flips. ### 15.3 Chart.js (4.x, verified against 4.5.1) ```html  <script src="https://cdn.jsdelivr.net/npm/chart.js@4.5.1/dist/chart.umd.js"></script> <script src="https://cdn.jsdelivr.net/gh/1978io/78UIKit@v0.4.0/js/_78.js"></script> <script src="https://cdn.jsdelivr.net/gh/1978io/78UIKit@v0.4.0/js/adapters/chartjs.js"></script> ``` This one is JS because a chart is a `<canvas>`, and canvas pixels cannot resolve `var(--accent)` — colors are baked in at draw time. So the adapter reads the tokens with `getComputedStyle`, pushes them into `Chart.defaults` (font, text, grid and axis colors, legend, title, tooltip styled as a kit card, element borders), and — the part everyone misses — re-applies them and calls `update('none')` on **every live chart** whenever `_78:themechange` fires, because `Chart.defaults` is only read when a chart is *constructed*. Load order matters: with the adapter in place before your charts are built, they are constructed already themed rather than corrected afterwards. On a live switch the scales follow too: Chart.js binds each scale's colors once, so the adapter rewrites grid, axis-line, tick and title colors on every live scale — but only values that still equal the previous theme's token, so a color a chart set for itself is never overwritten. *(Fixed in 0.3.0: before it, the grid and tick labels kept the old theme until a reload.)* **Don't set theme colors per chart.** `plugins.legend.labels.color`, `scales.x.grid.color` and friends in a chart's own options out-rank `Chart.defaults` and are read once, so they stay on the theme the page loaded in. Leave them unset and the legend (`--text`), ticks (`--dim`) and grid (`--border`) follow every switch. If one chart genuinely needs its own color, re-set it on `_78:themechange`. It also registers a plugin that colors datasets from the theme. **Dataset ownership rule:** a dataset that declares **no** `backgroundColor` and **no** `borderColor` is adopted and recolored on every theme switch. A dataset that declares either one is **never touched** — your explicit color always wins. Force it either way with `$_78: true` / `$_78: false` on the dataset. ```js // adopted: no colors declared → themed, and re-themed on every switch new Chart(ctx, { type: 'line', data: { labels: days, datasets: [{ label: 'Revenue', data: revenue }] } }); // left alone forever: it declares its own color new Chart(ctx2, { type: 'bar', data: { labels: days, datasets: [{ label: 'Budget', data: budget, backgroundColor: '#888' }] } }); ``` **The series ramp.** The first dataset gets `--accent`; the second gets `--series-2`, a true gray (no hue, so it recedes behind any accent and can never sit near it in hue); the third onward get the six categorical tones (`--cat-1` … `--cat-6`, §2.9). The semantic colors are not used for series: a series is a kind of thing, not a state, and a green line reads as "good". *(Changed in 0.3.0 — the ramp used to be accent, success, warn, danger, info, dim, so an existing chart's second and later series change color. Pin a dataset's color explicitly to keep the old look.)* The theme generator outputs `--series-2` too. Series coloring by chart type: line and radar get a solid border, a 16%-alpha fill and matching points; pie, doughnut and polar area get a per-slice palette with `--bg2` separators (polar area at 70% alpha); bar, bubble, scatter and everything else get a solid fill with an 80%-alpha hover. ```js _78.adapters.chartjs.palette(5) // → 5 series colors from the current theme: // --accent, --series-2, --cat-1 … --cat-6, // then the same ramp again at 65% and 40% alpha _78.adapters.chartjs.tokens() // → { text, dim, border, bg2, bg3, accent, success, warn, // danger, info, series2, cats: [6], font, fontSize, // radius } as resolved now _78.adapters.chartjs.alpha('#4b9eff', .16) // → 'rgba(75,158,255,0.16)' — the `-lo` idea, in JS _78.adapters.chartjs.apply() // re-read tokens, restyle defaults, update every live chart _78.adapters.chartjs.plugin // the registered plugin object, id '_78palette' ``` `alpha()` handles `#rgb`, `#rrggbb`, `#rrggbbaa`, `rgb()` and `rgba()`, and returns anything else untouched rather than mangling it. Chart.js 4's own auto-color plugin is disabled — the adapter replaces it. --- ## 16. Theme generator — `_78.gen` `js/generator.js` derives the **whole token set for light and dark** from one accent color, with live WCAG checks, an apply-to-the-page mode and a shareable URL. It is opt-in and **not** part of `_78.js` — load it only where you need it (the tool itself lives at https://78uikit.com). ```html <script src="https://cdn.jsdelivr.net/gh/1978io/78UIKit@v0.4.0/js/_78.js"></script> <script src="https://cdn.jsdelivr.net/gh/1978io/78UIKit@v0.4.0/js/generator.js"></script> ``` Two rules the file exists to enforce: **work in OKLCH** (HSL ramps go muddy — equal steps in HSL are not equal steps to the eye), and **dark is not inverted light** (each theme gets its own lightness and chroma targets). No color library, no build — both sRGB ⇄ OKLCH directions are implemented in the file, plus a chroma-reduction gamut map for OKLCH values that land outside sRGB. ### 16.1 The config ```js { accent: '#0073ea', // any hex; invalid input falls back to the default neutral: 'neutral', // 'neutral' | 'cool' | 'warm' | 'accent' — the tint of the grays radius: 8, // 0–20 px; --radius-sm/-lg are derived from it density: 'cozy' // 'compact' | 'cozy' | 'comfortable' — spacing scale + control heights } ``` `_78.gen.DEFAULTS` holds exactly that object. Density drives the `--space-*` scale (×0.75 / ×1 / ×1.25) and `--control-h` / `--control-h-sm` / `--icon-btn-size` (32/26/28, 36/28/32, 40/32/36). ### 16.2 Deriving and emitting ```js var result = _78.gen.derive({ accent: '#7c5cff', neutral: 'cool', radius: 10, density: 'cozy' }); result.config // the normalized config result.accent // the accent as {l, c, h} in OKLCH result.light // { '--bg': '…', '--text': '…', … } — the full light color token set result.dark // the same for dark result.base // the non-color tokens density and radius imply result.notes // human-readable notes about any automatic contrast nudges var css = _78.gen.css(result); // paste-ready CSS: both theme blocks + the base block var css = _78.gen.css(result, { base: false }); // color only, leaving shape/density alone var block = _78.gen.block(':root[data-theme="dark"]', result.dark, true); // one block; true = grouped ``` The categories are derived too, on fixed hues like the semantics (a category must not change meaning when the accent does); only their lightness is fitted per theme. Every generated theme includes all six. `css()` output drops straight into a `<style>` after `kit.css` and re-themes everything — components, adapters and all. ### 16.3 Contrast report ```js var rows = _78.gen.report(result.dark, 'dark'); // [{ label: '--text on --bg', ratio: 12.4, need: 4.5, large: false, soft: false, pass: true }, …] ``` The pairs that decide whether a theme is usable: `--text` on each of the three surfaces, `--dim` on `--bg2`, `--accent-text` on `--accent`, `--accent` on `--bg2` (large-text threshold, 3:1), each semantic color and each category (`--cat-1` … `--cat-6`) on its own `-lo` tint, and `--border` on `--bg2` as an advisory check (`soft: true` — an edge you cannot see is a border that is not doing its job). Lightness is nudged automatically where a pair would otherwise fail; the nudges land in `result.notes`. ### 16.4 Apply, persist, share ```js _78.gen.apply(result); // inject the CSS as <style id="_78-gen-style">, persist it, set data-_78-gen _78.gen.clear(); // remove the style, clear storage, drop the attribute _78.gen.stored(); // → the saved config, or null _78.gen.preview(el, result.light, result.base); // write one theme's tokens onto a container as inline // custom properties — e.g. show light inside a dark page ``` `apply()` writes a real stylesheet rather than inline properties, so **both** theme blocks are present and the kit's own toggle keeps working. It stores `{ config, css }` under `localStorage['_78-gen']` and fires `_78:genchange` on `document` (`e.detail.config`, `null` after `clear()`). `_78.gen.PREPAINT` is a second pre-paint snippet that puts a saved generated theme back before the first paint with no re-derivation. It runs **after** `_78.theme`'s snippet and before any stylesheet. ### 16.5 The `?theme=` URL format `accent.neutral.radius.density`, hex without the `#` — e.g. `?theme=0073ea.cool.8.cozy`. Short, readable, no backend. ```js _78.gen.encode(config) // → '0073ea.cool.8.cozy' _78.gen.decode('7c5cff.warm.10.compact') // → a normalized config object _78.gen.fromUrl() // read ?theme= from location.search → config or null _78.gen.shareUrl(config) // → the current URL with ?theme= set _78.gen.STORAGE // '_78-gen' ``` ### 16.6 Color math, exposed `_78.gen` also exposes the primitives it is built on, in case you need them: `resolve(color)` → `{r,g,b}` · `toOklch(rgb)` · `fromOklch(l, c, h)` · `oklch(l, c, h)` (formats the CSS string) · `hex(rgb)` · `rgba(rgb, a)` · `luminance(rgb)` · `contrast(a, b)` · `over(color, alpha, backdrop)` (what a tint actually looks like over a surface). --- ## 17. Events, storage keys and file map ### Events | Event | Fires on | `e.detail` | |---|---|---| | `_78:themechange` | `document` | `{ theme: 'dark'\|'light', pref: 'dark'\|'light'\|'system' }` | | `_78:railchange` | `document` | `{ rail: boolean }` | | `_78:drawerchange` | `document` | `{ open: boolean }` | | `_78:tabchange` | the `._78-tabs` list (bubbles) | `{ index, tab, panel, id }` | | `_78:segchange` | the `._78-seg` group (bubbles) | `{ index, button, value }` | | `_78:tocchange` | the `._78-toc` aside (bubbles) | `{ id }` — the section now being read | | `_78:genchange` | `document` | `{ config }` — `null` after `_78.gen.clear()` | ### localStorage keys | Key | Written by | Value | |---|---|---| | `_78-theme` | `_78.theme` | `'dark'` \| `'light'` \| `'system'` | | `_78-sidebar` | `_78.shell` | `'full'` \| `'rail'` | | `_78-gen` | `_78.gen` | `{ config, css }` as JSON | Every read and write is wrapped in `try` / `catch` — private mode or blocked storage degrades, it never throws. ### `<html>` attributes `data-theme` · `data-theme-pref` · `data-sidebar` · `data-drawer` · `data-_78-gen` ### Files ``` css/ kit.css the one stylesheet a project links (@imports everything below) tokens.css light + dark color blocks + the shared non-color tokens reset.css minimal reset, themed scrollbars, focus ring components/ shell · buttons · cards · grid · forms · switch · seg · details · badges · meta · viz · figure · split-bar · table · tabs · modal · toast · alert · notes · aurora · theme-toggle · toc · utilities adapters/ tabulator.css · fullcalendar.css — opt-in, never in kit.css js/ _78.js _78.theme · _78.tone · _78.util · _78.shell · _78.modal · _78.notify · _78.tabs · _78.seg · _78.viz · _78.toc generator.js _78.gen — opt-in, not part of _78.js adapters/ chartjs.js — _78.adapters.chartjs demo/ living examples, every page in light + dark llms.txt · llms-full.txt this reference, for AI coding assistants ``` ### Where to go next - https://78uikit.com — docs, the live component gallery, and the theme generator - https://github.com/1978io/78UIKit — source, releases, changelog, MIT license

Symbol	Side	Quantity	Fill price	Status
EURUSD	Buy	25,000	1.0842	Filled
GBPUSD	Sell	10,000	1.2711	Partial
Total		35,000

When	Event	Rows
Oct 3	Nightly import	1,204
Oct 3	Error Webhook timed out	0
Oct 2	Nightly import	986
Oct 2	Error Rate limited	0