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

Question

Opened this issue 7 months ago · 0 comments

🐛 Bug report

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

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;