Skip to content

Outline item action buttons in orange and put icons on common verbs - #169

Merged
ctoth merged 1 commit into
masterfrom
feat/action-buttons
Oct 6, 2026
Merged

ctoth merged 1 commit into
masterfrom
feat/action-buttons

Conversation

@ctoth

@ctoth ctoth commented Oct 6, 2026

Copy link
Copy Markdown
Contributor

Kael asked for the item action buttons to look more like actions, suggested orange, and asked about icons.

What changes

  • Orange outline. Item action buttons are an orange border and orange text, and fill solid orange on hover and press. A solid fill was tried first and was too heavy on real items: the coffee table in The Parlor lists 18 verbs.
  • Icons on common verbs. ItemAction now carries the bare verb name, and ItemCard shows an icon beside the label for sit, lie, take, remove, put, open, close, give, drop, bolt and unbolt. Other verbs stay text-only. The icon is aria-hidden; the button's accessible name is unchanged.
  • Button text colour. --color-text-button was used by the item and player card buttons but never defined, so it fell back to white on bright fills (1.74:1 on the old green item buttons). It is now defined as the dark inverse text colour. This also changes the player card's Page / Say To / Look / Follow text from white to dark (1.67–2.72:1 before, 6.7–11:1 now); their fills are unchanged.

Contrast

Pair Ratio
Orange text and border on the card background 7.64
Dark text on orange (hover) 8.11
Dark text on pressed orange 5.15

Checked

  • vitest run src/itemActions.test.ts src/components/ItemCard.test.tsx: 8 passed, including a new test that a known verb gets a hidden icon and an unknown one gets none.
  • tsc --noEmit clean.
  • In the dev client as a guest: the coffee table's 18 buttons render outlined, 12 with icons, and hover fills solid. The player card buttons are readable.

Not checked

  • The Inventory tab's card (the guest carries nothing). It is the same component.
  • Items other than the coffee table; three other rooms had nothing on the ground.

Item action buttons were white text on bright green (1.74:1). They are now an orange outline that fills on hover and press, so an item with many verbs is not a wall of colour.

--color-text-button was used but never defined, so it fell back to white. It is now the dark inverse text colour, which also makes the player card buttons readable.

ItemAction carries the bare verb name so ItemCard can pick an icon for the verbs it knows; the icon sits beside the label and is hidden from assistive tech.
@ctoth
ctoth merged commit 9d2d9f5 into master Oct 6, 2026
2 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant