[docs] use spacing tokens names instead of values

[bennypowers]

Description

This was briefly discussed in chat over the weekend. Docs pages should use token names for spacing instead of pixel values. e.g. Guidelines pages for elements or patterns should read "vertical spacing is --rh-space-xl" instead of "vertical spacing is 24px"

I found the following instances of one or more digits followed by "px", surrounded in backticks

elements/rh-tag/docs/10-style.md
140:The tag border changes to `--rh-border-width-md` or `2px` on hover.

elements/rh-avatar/docs/20-guidelines.md
72:There is `48px` of space when avatar groups are stacked vertically.

elements/rh-button/docs/20-guidelines.md
235:The standard spacing between each button is `16px`, even for Danger
237:`8px`.

elements/rh-accordion/docs/20-guidelines.md
82:not exceed `750px` to maintain optimal readability.

elements/rh-cta/docs/20-guidelines.md
296:`24px`.
312:Horizontal and vertical spacing between the Default variant is `24px`.

Links

https://ux.redhat.com/elements/call-to-action/guidelines/#space-in-groups

Screenshots

No response

Additional context

No response

[coreyvickery]

@marionnegp Is this effort worth creating a doc or spreadsheet to capture all instances?

[marionnegp]

@marionnegp Is this effort worth creating a doc or spreadsheet to capture all instances?

Probably not. It'll double the amount of time spent looking for the instances, and you'll be able to view where changes were made within the PR. It would be good to have someone double check the DP- version of the site and review that instances weren't missed.

[bennypowers]

rg "`#\d{3,6}`" **/*.md

ripgrep is our friend

This one should help identify hex colours in backticks

The search from above, expanded to include more units

rg "`[\d.]+(px|%|r?em)`" **/*.md

https://github.com/BurntSushi/ripgrep?tab=readme-ov-file#installation

[marionnegp]

ripgrep is our friend

Thank you, @bennypowers!!

[marionnegp]

@bennypowers, is it useful to keep the number values in README files? Should those be replaced? For example, ripgrep found:

elements/rh-navigation-secondary/README.md
157:| `--rh-navigation-secondary-logo-max-width` | `10em` |
214:| `--rh-navigation-secondary-menu-section-grid-gap` | `2em` |
215:| `--rh-navigation-secondary-menu-content-max-width` | `1136px` |

[marionnegp]

I'm going to leave the 750px found in the accordion docs. We don't have a token value for that, and it's referring to a max width for the text.

[bennypowers]

@marionnegp if there's a token name for those values, why not replace them in the READMEs, too?