Update border-radii design tokens

[robinmetral]

Purpose

Updates border radii to match Figma. Generally the mapping is:

value	name before	name after
1px	kilo	- 1
4px	mega	bit
6px	giga	- 2
8px	tera	byte
12px	peta	kilo
16px	-	mega

¹ the value isn't part of design tokens anymore but some 1px radii were hardcoded in Circuit where it made sense, see comments below
² 6px radii were generally switched to 8px after consulting with design

Approach and changes

• update the design tokens
• write a codemod to map the values when upgrading
• address all addressable FIXME comments in the codebase (mostly border-radius related)
• fix the <Plus /> icon (it had a hardcoded #000 color)

ℹ️ the upgrade of Circuit's @sumup/design-tokens peer dependency will be done in a separate PR, we need to release it first

Definition of done

• Development completed
• Reviewers assigned
• Unit and integration tests
• Meets minimum browser support
• Meets accessibility requirements

[sumup-clark]

Hey @robinmetral,
we are super excited that you are contributing! 🎉There's one more thing you need to do. Please accept our Contributor License Agreement. It helps you and us to collaborate on clear terms and focus on what we love most: code.

Thanks!

[changeset-bot]

🦋 Changeset detected

Latest commit: e9c4e5c

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 3 packages

Name	Type
@sumup/circuit-ui	Major
@sumup/icons	Patch
@sumup/design-tokens	Major

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[vercel]

This pull request is being automatically deployed with Vercel (learn more).
To see the status of your deployment, click below or on the icon next to each commit.

🔍 Inspect: https://vercel.com/sumup/oss-circuit-ui/7YyGMriodJdYc1w5s92ajbwk2m4X
✅ Preview: https://oss-circuit-ui-git-border-radii-update-sumup.vercel.app

[codecov]

Codecov Report

Merging #980 (e9c4e5c) into next (3cfefac) will increase coverage by 0.02%.
The diff coverage is 100.00%.

@@            Coverage Diff             @@
##             next     #980      +/-   ##
==========================================
+ Coverage   91.68%   91.70%   +0.02%     
==========================================
  Files         165      165              
  Lines        3077     3074       -3     
  Branches      782      754      -28     
==========================================
- Hits         2821     2819       -2     
  Misses        227      227              
+ Partials       29       28       -1     

Impacted Files	Coverage Δ
packages/circuit-ui/components/Anchor/Anchor.tsx	100.00% <ø> (ø)
...ndar/components/CalendarWrapper/CalendarWrapper.js	100.00% <ø> (ø)
packages/circuit-ui/components/Card/Card.tsx	87.50% <ø> (ø)
...uit-ui/components/CardList/components/Item/Item.js	85.00% <ø> (ø)
...cuit-ui/components/InlineMessage/InlineMessage.tsx	95.23% <ø> (ø)
...i/components/NotificationCard/NotificationCard.tsx	100.00% <ø> (ø)
...i/components/NotificationList/NotificationList.tsx	100.00% <ø> (ø)
.../circuit-ui/components/SearchInput/SearchInput.tsx	100.00% <ø> (ø)
packages/circuit-ui/components/Select/Select.tsx	98.52% <ø> (ø)
...ckages/circuit-ui/components/Selector/Selector.tsx	100.00% <ø> (ø)
... and 13 more

[robinmetral]

See also the deploy preview and Chromatic to review this visually ✨

[robinmetral]

Note: this doesn't replace this pattern:

const elementStyles = css`
  border-radius: ${p => p.theme.borderRadius.tera};
`;

I've seen it used more regularly recently, I'm not sure if I should extend the codemod to fit it?

[connor-baer]

Yeah, let's extend the codemod to cover this case. Would you like to pair on this?

[robinmetral]

I'd love to!