<Box> should use a separate variable for border colours other than --reactist-divider-primary

[frankieyan]

🐛 Bug report

Current behavior

In our product library, dividers and borders are different colours and have different semantic meaning.

Related figma discussion

Possible solutions

• Expose new variables, i.e. --reactist-border-idle-tint
• Expose a prop (e.g. showHoverState) to determine whether hover or focus states are needed, and expose variables: --reactist-border-hover-tint, --reactist-border-focus-tint. This should default to false as there shouldn't be many situations where the Box element is interactive, unless it's rendered as a different element with as.
• Remove secondary and tertiary options

Alternatively, consider following our product library by combining inputs and border variables.

Default colours:

--reactist-border-idle-tint: #b8b8b8;
--reactist-border-hover-tint: #cccccc;
--reactist-border-idle-tint: #e6e6e6;

Environment

• @doist/reactist version: 23.2.0