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

Doist / reactist

Open source React components made with ❤️ by Doist

http://doist.github.io/reactist

MIT License

247 stars 21 forks source link

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

Open frankieyan opened 5 months ago

frankieyan commented 5 months ago

🐛 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