Wp-calypso: Border radius: unify our radii or at least create some guiding principles

[rickybanister]

I noticed today that we're not particularly consistent with our border radius settings for a number of components.

Segmented control and notice have different radii:

I'm sure many other elements have custom and arbitrary radius settings.

It'd be great to decide on some guidance for these (like use 2px to soften things, then always use multiples of 4 depending on the scale of the thing, just as an example).

[sixhours]

As I go through Calypso, I wonder if we consider only using border-radius to 1) indicate something is functional, clickable, etc. or 2) to round things into circles or pills. :) That gives us some structure, and seems to be the pattern in Gutenberg, too.

[rickybanister]

I hope we can 100% align with Gutenberg and perhaps even help influence upstream any further codification needed.

[lcollette]

@sixhours Is there anything remaining for this issue?

[sixhours]

I was thinking we should add some documentation to /devdocs, but I'm not sure where it best fits as a general design principle. Otherwise this is done :)

[rickybanister]

Could we add a linter that notices when someone tries to do border-radius: not four pix and asks if it's a necessary deviation vs arbitrary? Or is that annoying?

[sixhours]

Yep! We have the ability to lint this with stylelint scales, like we already do for fonts. I can create a PR to add it to the list of rules.

[sixhours]

Deployed the stylelint config, so closing this out!