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.
🐛 Bug report
Current behavior
In our product library, dividers and borders are different colours and have different semantic meaning.
Related figma discussion
Possible solutions
--reactist-border-idle-tint
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 theBox
element is interactive, unless it's rendered as a different element withas
.secondary
andtertiary
optionsAlternatively, consider following our product library by combining inputs and border variables.
Default colours:
Environment
@doist/reactist
version: 23.2.0