Change background color to white

[connor-baer]

Addresses TL-467.

Purpose

The brand design team requested to change the global background color to white. This required some further tweaks to the components to ensure an adequate color contrast.

👀 View the design in Figma

Approach and changes

• Updated the design tokens with the new background and overlay colors
• Replaced the shadow of the Card component with a border and deprecated the shadow prop
• Increased the border radius of the Card and Modal components

Definition of done

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

[changeset-bot]

🦋 Changeset detected

Latest commit: 5b8ec32

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

This PR includes changesets to release 2 packages

Name	Type
@sumup/design-tokens	Minor
@sumup/circuit-ui	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/4Bbrh9KbyuGkonEciGWAoiFf63D7
✅ Preview: https://oss-circuit-ui-git-feature-white-background-sumup.vercel.app

[codecov]

Codecov Report

Merging #890 (5b8ec32) into main (35ce003) will increase coverage by 0.00%.
The diff coverage is 94.44%.

@@           Coverage Diff           @@
##             main     #890   +/-   ##
=======================================
  Coverage   91.99%   91.99%           
=======================================
  Files         163      163           
  Lines        3009     3011    +2     
  Branches      784      783    -1     
=======================================
+ Hits         2768     2770    +2     
  Misses        212      212           
  Partials       29       29           

Impacted Files	Coverage Δ
...uit-ui/components/CardList/components/Item/Item.js	85.00% <ø> (ø)
packages/design-tokens/themes/light.ts	0.00% <ø> (ø)
packages/circuit-ui/components/Card/Card.tsx	87.50% <80.00%> (-0.74%)	⬇️
...ackages/circuit-ui/components/CardList/CardList.js	100.00% <100.00%> (ø)
...nts/Modal/components/ModalWrapper/ModalWrapper.tsx	100.00% <100.00%> (ø)
...mponents/NotificationBanner/NotificationBanner.tsx	100.00% <100.00%> (ø)
...i/components/NotificationList/NotificationList.tsx	100.00% <100.00%> (ø)
packages/circuit-ui/components/Table/Table.tsx	94.56% <100.00%> (-0.06%)	⬇️
packages/circuit-ui/styles/style-mixins.ts	98.88% <100.00%> (+0.01%)	⬆️

[amelako]

🤍⬜️

[robinmetral]

Should we also mention the new borderRadius?

[robinmetral]

Ah it's not there, do we want to add it? Then I can make a PR to next that replaces all hardcoded values of 12px and 16px by the tokens

[connor-baer]

I removed the commit that added the border-radius to the design tokens since it would have conflicted with your change. Can you talk to Giao-Chung and figure out which value(s) to keep, please?

[robinmetral]

I will! 🙂

[robinmetral]

Oops, I already did 🤦

Do you want to do it as part of this PR or should I make a separate one? Sorry about this

[robinmetral]

Spec:

What I suggest then is that I'll make a separate PR to next removing the old values (6px for example) and updating any component using it. I'll double check the naming with design and write a codemod to automate this when migrating to v3.

[connor-baer]

Let's make a separate PR against the next branch as you suggested 👍🏻