Mark

Preview Code

375 768 Full

Open

html

<!-- The tint core puts on a chosen option, the active conversation, an answered question,
     on an element of yours. One class, one intent per outcome. -->
<p>
  <span class="aparte-tag aparte-mark">Chosen</span>
  <span class="aparte-tag aparte-mark aparte-mark--success">Approved: write_file</span>
  <span class="aparte-tag aparte-mark aparte-mark--danger">Rejected: delete_file</span>
  <span class="aparte-tag aparte-mark aparte-mark--neutral">The conversation you are in</span>
  <span class="aparte-tag aparte-mark aparte-mark--quiet">Declined: ask_user</span>
</p>
<!-- The start-edge bar is off by default; a theme puts it back with one variable. -->
<p style="--aparte-mark-bar: 3px">
  <span class="aparte-tag aparte-mark">Chosen</span>
  <span class="aparte-tag aparte-mark aparte-mark--success">Approved: write_file</span>
</p>

Among items of the same kind, one is the one a decision landed on: the option picked in a select, the conversation open in the list, a question answered in the transcript. The library marks it the same way everywhere, with a tint of its intent, and .aparte-mark puts that tint on an element of yours.

The intent says what the choice was: primary by default, --success for something given or approved, --danger for a destructive outcome, --neutral for where you merely are. --quiet is the outcome that did not happen, a declined request: no tint, the muted voice.

Customize

Variable	Default	Note
--aparte-mark-tint	18%	The mark (display/mark.css): how much of its intent a marked row’s ground takes, and how wide the bar on its start edge is.
--aparte-mark-bar	0px	No bar since 2026-09-05: the start-edge bar read as a dated motif on the chat-site review; the tint and the text weight carry the mark.
--aparte-mark-intent	—
--aparte-mark-intent-ink	—

A bar along the start edge is off by default; --aparte-mark-bar: 3px in a theme puts it back, on every mark at once.

Classes

.aparte-mark · .aparte-mark--danger · .aparte-mark--neutral · .aparte-mark--quiet · .aparte-mark--success

Accessibility

• The tint is a visual cue. Say the state in the markup as well: aria-selected on an option, aria-current on the item you are in, or the outcome in words.

Related

• Select — its chosen option.
• Question — the receipt, a tag with a mark.