MOON-472: Add border radius variables for selectors #470
Conversation
src/tokens/borders/_borders.scss
Outdated
| @@ -1,6 +1,8 @@ | |||
| @forward '../colors/colors'; | |||
There was a problem hiding this comment.
I missed it last time, but I guess you don't need to import colors.
| border-radius: 4px; | ||
| border-radius: var(--selector-border-radius_big); |
There was a problem hiding this comment.
All selectors should have the same border radius, especially EmptyCardSelector and CardSelector . So you can use the same than CardSelector.
src/tokens/borders/_borders.scss
Outdated
| --selector-border-radius: 2px; | ||
| --selector-border-radius_big: 4px; |
There was a problem hiding this comment.
We can go further and always manage all border-radius with variables. I propose:
--radius: 4px;
--radius_selector: 2px;
--radius_rounded: 2rem;
This naming is not perfect because it mixes the style rounded and the usage selector, but I hope it will be easier to understand when to use each variables.
There was a problem hiding this comment.
I proposed to replace --selector-border-radius with --radius_selector and --selector-border-radius_big with --radius and add --radius_rounded. Not adding more variables.
In that case, we would have something more generic, and we could use those variables for all components, not only selectors with a shorter naming.
src/tokens/borders/_borders.scss
Outdated
| --selector-border-radius: 2px; | ||
| --selector-border-radius_big: 4px; |
There was a problem hiding this comment.
I proposed to replace --selector-border-radius with --radius_selector and --selector-border-radius_big with --radius and add --radius_rounded. Not adding more variables.
In that case, we would have something more generic, and we could use those variables for all components, not only selectors with a shorter naming.
…styles with the new variables
JIRA
https://jira.jahia.org/browse/MOON-472
Description
Add globals --selector-border-radius & --selector-border-radius_big