feat(fuselage): quieter message header metadata

Merged
IV
2mo ago
+161-2

Summary

Task

Part of the user information redesign in RocketChat/Rocket.Chat#41650 (Figma spec), where these styles are currently applied as .rcx-* overrides inside the app — this PR moves them into the design system so the app can drop the overrides and consume them from fuselage.

  • Author names (rcx-message-header__name, rcx-message-system__name and their shared name container) use the titles-labels font color token. When the name container acts as a button ([role='button']) it shows a pointer cursor and underlines on hover — in the app it is the hover/click trigger for the user card and full profile. Non-interactive name containers are unaffected.
  • Timestamps (rcx-message-header__time, rcx-message-system__time) are quieter through color alone: they stay on the c1 scale they already declared and use the secondary-info font color token. No explicit font sizes — the type ramp has no 10px regular step (micro is bold), so the size stays on the scale and the color does the work.
  • Contrast on hover: secondary-info meets WCAG AA on the room surface (4.80:1) but not on the hover surface (4.33:1), so the regular-message timestamp steps up to the default token while the message is hovered (11.26:1). System messages don't change surface on hover, so no rule is needed there.

Impact

This intentionally changes the header metadata of every Message/MessageSystem consumer — it is the design-system side of the approved redesign, and the app PR above stops overriding these styles once this ships.

Screenshots

Message header — before / after (timestamp in secondary-info; name uses titles-labels):

BeforeAfter
beforeafter

Hover underline on a clickable author name (new WithClickableAuthorName story):

Testing

  • WithClickableAuthorName story added — hover the author name to see the pointer cursor and underline (only when role='button' is set).
  • 28 visual-regression goldens regenerated; 506 tests passing.
  • Jest specs and DOM snapshots unaffected (style-only change); lint/stylelint green.

🤖 Generated with Claude Code