Mark
The mark: a row a list has settled on.
One of the sheets split out of aparte.css. Order matters: src/index.ts imports them in the order listed there, and check:derived-vars reads them concatenated in that same order, the way a browser does.
WHAT IT IS. A chosen option, an accepted answer, the conversation you are in: the one item among its peers that a decision landed on. Before this sheet the select drew it one way (an accent tint plus an inset bar on the start edge), the field choice another (a primary border), the conversation list a third (its own background and weight), and the ask-user receipt none at all — four vocabularies for one meaning, measured in the UI audit of 2026-08-28. The market agrees on two signals: a tint on the ground (Radix, shadcn, Material’s state layer) and a bar on the row’s start edge (GitHub Primer’s ActionList). This recipe is both, on one intent axis, and every row that means “this one” wears it.
THE AXIS. --aparte-mark-intent is the fill, primary by default: chosen. The
modifiers set it to the theme’s other masters — success for an answer that was
given or a call that was approved, danger for a destructive outcome, neutral for
the item you are merely in. --quiet is the outcome that did NOT happen: a declined
request, a version superseded — no tint, no bar, the muted voice. The market never
strikes through; neither does this.
THE BAR IS DRAWN IN INK. The tint is the fill at 18%, which carries almost no
contrast by itself (1.2:1 in the light theme); the bar is the whole non-text signal,
so it reads --aparte-mark-intent-ink — the master’s ink, the one the button and
the badge already derive for text on a ground. The raw success fill measured 2.27:1
on the light surface, under the 3:1 WCAG asks of a graphic; its ink is 7.1:1.
THE BAR IS A PSEUDO-ELEMENT, NOT A SHADOW. An inset shadow knows only left and
right, so a right-to-left row got its bar on the wrong edge unless a document-level
[dir="rtl"] rule caught it — which a dir on the row itself, or dir="auto",
escapes. inset-inline-start is the start edge whatever the direction, at any level.
Nothing shifts: the pseudo-element is out of the flow.
THE MEASURES. --aparte-mark-tint and --aparte-mark-bar live in theme.css so a
theme moves every mark at once.
Classes
Section titled “Classes”.aparte-mark · .aparte-mark--danger · .aparte-mark--neutral · .aparte-mark--quiet · .aparte-mark--success
The tokens these read are on the CSS variables reference; every class of the kit, on one page, is the classes reference.