feat(BorderRadius token)!: Adding a border radius scale

[LinKCoding]

Overview

Adding a border radius token (borderRadii) into gamut. There will now be standardized border radii - where none is 0px, sm is 2px, md is 4px, lg is 8px, xl is 16px, and full is 50%.

This also addresses some components which had outdated borderRadii.

1. In doing so, this PR also adds the Video component's stories from brand to gamut.

There are also other test branches:

1. For Atoms: feat(Border Radius): Fixing Atoms' border radii #2921
2. For Molecules + Organisms: feat(Border Radius Token)!: Updating Molecules + Organism #2922

PR Checklist

• Related to designs:
• Related to a mixture of JIRA tickets: GM-592, GM-892, GM-828, GM-830
• I have run this code to verify it works
• This PR includes unit tests for the code change
• This PR includes testing instructions tests for the code change
• The alpha package of this PR is passing end-to-end tests in all relevant Codecademy repositories

Testing Instructions

1. Go to the following components and check that the components have been updated:
   Alert 3 -> 2 (small)
   Button, CTA 2 -> 4 (medium)
   Card 0 -> 4 (medium) *
   Disclosure 0 -> 4 (medium)
   Drawer 0 -> 2 (small)
   Floating Card 2 -> 0 (none)
   FormInputs:
   Checkbox 0 -> 4 (medium)
   Input 2 -> 4 (medium)
   Select Dropdown 2 -> 4 (medium)**
   Text Area 2 -> 4 (medium)**
   Modal/dialog 0 -> 2 (small)
   Tip 3 -> 2 (small)

Notes:

• in changing card from 0 => 4, I also applied these changes to the shadow variants as well (that relied on DynamicCardWrapper )
  ** the selectdropdown and textarea (from what I can tell, was 0 in prod, prior to change), though selectdropdown did have a 2px border radius for formatGroupLabel (so I added change it from 2px => 4 in this case too, since it seemed like all input-related elements were being updated to 4)

2. If inclined, pulling the branch locally, try adding a non-standardized borderRadius to an element (e.g. '4px') — this should show a TS error
3. Check out the test branches! And notion doc
4. ...
5. Profit

PR Links and Envs

Repository	PR Link	PR Env
Monolith	Monolith PR	Monolith Env
Portal	Portal Link	Portal Env
Another Repo	Another Link	Another Env

[LinKCoding]

Adding this in b.c. for shadow variants, the border-radius resets to 0

[LinKCoding]

This rounds out the corners for a video player, however since it's using .scss it doesn't use tokens

[dreamwasp]

all looks great to me! just pending approval until the integration PRs are sorted

[codecademydev]

📬Published Alpha Packages:

@codecademy/[email protected]
@codecademy/[email protected]
@codecademy/[email protected]
@codecademy/[email protected]
@codecademy/[email protected]
@codecademy/[email protected]
@codecademy/[email protected]
@codecademy/[email protected]

[codecademydev]

🚀 Styleguide deploy preview ready!

https://66cde19921541118a9de0bc4--gamut-preview.netlify.app

Deploy Logs