mi6
Text styling for inline code and keyboard references
What is the purpose of the enhancement?
Previous microsite showed code with an outline box and different font. Keyboard keys should be presented differently to code, and we can explore simple formatting such as bold, italics, 'quotes' etc to highlight the key.
Why do we need it?
In the new microsite, we need to define how we display code and keyboard keys when referenced in body text.
Tasks: * New styles to be added to Figma for this. * Guidance guidance updated to define how these are referenced in the word docs. * A11y checked to ensure contrasts if introducing backgrounds. * Syntax styling?
Keyboard keys should be presented differently to code, and we can explore simple formatting such as bold, italics, 'quotes' etc to highlight the key.
Given that a piece of documentation references a keypress (such as space, enter or arrow keys)
When displayed inline in a body of text
Then it should use the keypress styling.
Given that a piece of documentation references some code (such as a classname, a prop, or a token)
When displayed inline in a body of text
Then it should use the code-reference styling.
Need to review all guidance pages to create a list of areas that requires these styling classes. @DBD324
As part of the ticket decide if we want a component only in Gatsby or it is a typography variant we use with backticks