[docs] New <uxdot-best-practice> variant

[coreyvickery]

Description

Relates to issues #1449 and #2169.

Requesting a new caution variant for the <uxdot-best-practice> component:

<uxdot-best-practice variant="caution">

Suggested solution

• Image above is handled the same
• Use <rh-icon set="ui" icon="warning-fill"></rh-icon>
• Text has the same specs as Do and Don't
• The color of both the icon and text is yellow-50

Screenshots

Example API

Additional context

No response

[coreyvickery]

Relates to #2169.

[bennypowers]

idea: when docs have do/don't examples which contain code blocks, the "don't" codeblock should be themed with danger or warning colours in the backround