KeybindingHint component styling doesn’t match global <kbd> element styling

[dylanatsmith]

Description

The <kbd> element has a lil shadow/border that looks keycappy, while the <kbd> element output by KeybindingHint just has a border.

Screen.Recording.2024-10-15.at.16.28.35.mov

Steps to reproduce

1. Compare any <kbd> element with any rendered <KeybindingHint> element

Note: I’m flagged into the CSS modules staff ship

Version

Latest in dotcom

Browser

Firefox

[iansan5653]

This was intentional when we originally built this for Projects; we wanted a more minimal and modern looking design that wouldn't be so distracting in menus and tooltips. The kbd element default styling feels targeted more for rendering in Markdown than as a keyboard shortcut hint.

[dylanatsmith]

Cool, thanks for the context!