Skip to content
Design Token Authority

Checks

The checks of a pull request as flat rows on bg-surface with a hairline, and the approve action.

The checks in the order of the strip

Light
  • dta lintpassed · 0 violations
  • dta buildpassed
  • dta diffchanges to review · 6 stories
Graphite
  • dta lintpassed · 0 violations
  • dta buildpassed
  • dta diffchanges to review · 6 stories

Story: /stories/checks/default/

Every status: passed, with warnings, failed, changes to review, pending

Light
  • dta lintpassed · 0 violations
  • dta lintpassed with warnings
  • dta buildfailed · 2 errors
  • dta diffchanges to review · 2 stories
  • dta diffpending
Graphite
  • dta lintpassed · 0 violations
  • dta lintpassed with warnings
  • dta buildfailed · 2 errors
  • dta diffchanges to review · 2 stories
  • dta diffpending

Story: /stories/checks/states/

The check that waits for a person, and the approve action

Light
  • dta diffchanges to review · 6 stories
Add label dta-diff-approved
Graphite
  • dta diffchanges to review · 6 stories
Add label dta-diff-approved

Story: /stories/checks/decision/

Guidelines

Section titled “Guidelines”
  • Each row: a marker, the check’s name, its status word with an optional detail. In the status colours: passed with the dot in status-success-marker and the word in status-success-text, passed with warnings with the open ring and status-warning-text, failed with the filled square and status-error-text.
  • changes to review is a diff state, not a problem: the pull request changed something a person looks at. It stays signal (the dot in signal-bg, the word in signal-text), never a warning (decision, TICKET-120). The dta diff report shows its review verdict in signal too (TICKET-121, see Status colours). pending stays in the ink (fg-subtle dot, fg-muted word).
  • On the landing page the list appears twice: all checks in the strip’s order in scene 02 (no approve action: nothing there needs a person), and in scene 03 only the check that waits for a person (dta diff · changes to review) with the approve action under it, beside the differences it approves (maintainer decision, 2026-10-19).
  • The approve action is the one blue surface on the landing page: action-text with action-fg, 9.7:1 in Light and 12:1 in Graphite. It is a label of what the person does, not a working button on the page.

Tokens used

Section titled “Tokens used”

Read from the component’s source:

--action-fg--action-text--bg-surface--border-default--fg-default--fg-muted--fg-subtle--font-mono--font-sans--radius-full--signal-bg--signal-text--space-4--status-error-marker--status-error-text--status-success-marker--status-success-text--status-warning-marker--status-warning-text--stroke-hairline--stroke-ink--type-body-sm-size--type-meta-size