Attachment
Thirty variants of a file chip taken through its whole upload life, as a row or as a thumbnail, plus a three-up Group with no axes of its own.
A file queued but not sent gets a dashed base.border; the moment it is in flight the border goes solid. It is the one state you can read across a whole list at a glance without looking at the words, which is what a queue needs.
base.destructive at 30% on the border, at 10% behind the icon, and full strength on the glyph and the message. The two translucent ones stay as raw values on purpose: binding a token resets the alpha to 1 and the chip turns solid red.
default and sm carry a status under the name. xs has room for the name only, so the state shows through the border and the icon colour instead. That is why every xs row is 36 whatever the state, while default jumps to 70 when the error message wraps to two lines.
Attachment Group, three chips and no axes
692 by 64: three default horizontal Attachments in a row, 12 apart, on 4 of padding. No properties of its own, because the thing worth publishing is the spacing, not another matrix. Swap the chips inside an instance and the row keeps its rhythm.
In a message, in a queue, on a grid
1000 by 896, three sections. A message with the Group under it, an upload queue where every row is at a different point in its life, and a strip of image thumbnails.
Two components, thirty variants
Read straight out of the Penpot file. The axes below are the property names you will see in the variant dropdown.
Using the Attachment
Because a file that is queued but not sent is not the same object as one that is on its way, and in a list of ten you want to see which is which without reading. Dashed means nothing has left the machine yet; the moment it does, the border goes solid and stays solid through the rest of the states.
Three things, all base.destructive at different strengths: the border at 30%, the tile behind the icon at 10%, and the glyph and the message at full. The two translucent ones deliberately stay as raw values rather than token bindings, because Penpot resets alpha to 1 when a colour token is bound and the chip would turn solid red.
There is no room for one. default and sm carry the name over a status; xs carries the name only, and leans on the border and the icon colour to say where the file is. That is also why every xs row is the same height whatever the state, while default grows by 8 when the error message wraps.
Spacing. Three default horizontal chips in a row, 12 apart, on 4 of padding, published so a message body always spaces its attachments the same way. It has no properties of its own because the thing worth fixing is the rhythm, not another matrix on top of thirty.