Health score
A design system score made of a few checks you can open.
One score for a design system, with the checks behind it. A half-gauge shows the overall score
(green from 90, the accent from 80, red below). Point at a check — or tab to it — and the gauge
swings to that check's score and names it; leave the list and it swings back. Open a check to see
why, and, when it is fixable and you pass onFix, fix it from there: the button spins until your
promise settles, then you update the check's score and detail.
Usage
<!-- include core.css + health-score.css + health-score.js -->
<div class="card" data-c="health-score">
<div class="hsx panel">
<div class="hsx-top">
<div class="hsx-g">
<svg viewBox="0 0 120 70">
<path d="M10 64a50 50 0 0 1 100 0" class="tr" />
<path d="M10 64a50 50 0 0 1 100 0" class="fl" />
</svg>
<div class="hsx-v"><b class="num">0</b><span class="muted">of 100</span></div>
</div>
<div class="hsx-s"><b>Design system health</b><span class="muted hsx-st">Good, 2 checks need work</span></div>
</div>
<div class="hsx-list"></div>
</div>
</div>Properties
| Name | Type | Description |
|---|---|---|
checks | HealthScoreCheck[] | The checks behind the score. |
title | string | Beside the gauge. Defaults to "Design system health". |
score | number | The gauge score. Defaults to the average of the checks. |
status | string | The line under the title. Defaults to a line built from the checks. |
open | string[] | The open checks, by key (controlled). Leave out to let each row toggle itself. |
defaultOpen | string[] | The checks open at first (uncontrolled). |
onOpenChange | (open: string[]) => void | Called when the set of open checks changes. |
onFix | (check, index) => void | Promise | A check's Fix button. Return a promise and it spins until it settles; then update the check's score and detail. |
check.key | string | Identifies the check. Defaults to its label. |
check.label | string | Like "Contrast". |
check.score | number | 0 to 100. From 90 green, from 80 the accent, below that red. |
check.detail | string | One line under the check when it is open. |
check.fixable | boolean | Adds a Fix button to the open check (needs onFix). |
Theming
Works in light and dark (data-theme="dark") and in the Soft style (data-style="soft"). The card,
rows, bars and gauge track all come from the theme tokens; the gauge fill follows the score (its green
and red are the component's own --dm-hs-ok / --dm-hs-bad, the accent in between), and an open or
hovered row picks up the row tint. In Soft the card and the Fix pill are rounder.