[BD-46] fix: fixed border-radius of buttons with sizes lg and sm

[PKulkoRaccoonGang]

Description

• updated the border-radius on the focus outline radius;
• verified the 2px offset for the focus outline;
• refactoring was carried out in the file README.md.

Issue: #2550

Deploy Preview

Button component

Merge Checklist

• If your update includes visual changes, have they been reviewed by a designer? Send them a link to the Netlify deploy preview, if applicable.
• Does your change adhere to the documented style conventions?
• Do any prop types have missing descriptions in the Props API tables in the documentation site (check deploy preview)?
• Were your changes tested using all available themes (see theme switcher in the header of the deploy preview, under the "Settings" icon)?
• Were your changes tested in the example app?
• Is there adequate test coverage for your changes?
• Consider whether this change needs to reviewed/QA'ed for accessibility (a11y). If so, please add wittjeff and adamstankiewicz as reviewers on this PR.

Post-merge Checklist

• Verify your changes were released to NPM at the expected version.
• If you'd like, share your contribution in #show-and-tell.
• 🎉 🙌 Celebrate! Thanks for your contribution.

[openedx-webhooks]

Thanks for the pull request, @PKulkoRaccoonGang!

When this pull request is ready, tag your edX technical lead.

[netlify]

✅ Deploy Preview for paragon-openedx ready!

Built without sensitive environment variables

Name	Link
🔨 Latest commit	647393e
🔍 Latest deploy log	https://app.netlify.com/sites/paragon-openedx/deploys/658318bd4d992a000883f55d
😎 Deploy Preview	https://deploy-preview-2786--paragon-openedx.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[codecov]

Codecov Report

All modified and coverable lines are covered by tests ✅

Comparison is base (40aea5e) 92.83% compared to head (647393e) 92.87%.
Report is 8 commits behind head on master.

Additional details and impacted files

@@            Coverage Diff             @@
##           master    #2786      +/-   ##
==========================================
+ Coverage   92.83%   92.87%   +0.03%     
==========================================
  Files         235      235              
  Lines        4245     4268      +23     
  Branches     1032     1033       +1     
==========================================
+ Hits         3941     3964      +23     
  Misses        300      300              
  Partials        4        4              

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

[PKulkoRaccoonGang]

@adamstankiewicz In this PR, the change Outline-primary border to $primary-500 was not implemented.
At the moment we have associated logic for all such buttons.

We also have a SCSS map, where we use the “focus” key in the open-edx theme.

If we need to change the stroke color, we need to change it for all the buttons. In this case, we will get the monotony that we have now (using "focus": "300").

Do you think we should change the outline color of all buttons from $primary-300 to $primary-500?

[adamstankiewicz]

Note: its great to remove utility classes like this as sometimes consumers tend to leave the className props in when they copy/paste components from the docs site... lol.

[adamstankiewicz]

Next steps: we'll verify at the next Paragon Working Group.

[PKulkoRaccoonGang]

@adamstankiewicz At the Paragon working group, we agreed on changing the stroke color for buttons when the focus is from 300 to 500.

[openedx-semantic-release-bot]

🎉 This PR is included in version 21.11.4 🎉

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot 📦🚀

[openedx-semantic-release-bot]

🎉 This PR is included in version 22.0.0-alpha.24 🎉

The release is available on:

• npm package (@alpha dist-tag)
• GitHub release

Your semantic-release bot 📦🚀