SWED-2279 color page update

[goldenraphti]

Description

https://payexjira.atlassian.net/browse/SWED-2279

Rewrite of the Colors page,
and I took advantage of being in the middle of the colors to do some modifications on color variables and add E2E testing to the page.

I will create E2E tests specifically dedicated to testing whether all the color CSS custom properties are actually defined in a later ticket. I'll probably bundle it in a ticket where I continue on the migration from LESS variables to pure CSS variables.

It looks like a huuuge PR. And, to be fair, it is a pretty big one. But don't get scared off by the amount of files changed:

• there is 20 image files (used for illustration on the page)
• around 30 E2E visual screenshots for visual comparisons
• 11 Jest page snapshots where the only difference is a whitespace
• ...

basically, only about 10-15 files require attention 😉 👍

Motivation and Context

How Has This Been Tested?

Screenshots (if appropriate):

Types of changes

• Bug fix (non-breaking change which fixes an issue)
• New feature (non-breaking change which adds functionality)
• Breaking change (fix or feature that would cause existing functionality to change)

Checklist:

• My code follows the code style of this project.
• My change requires a change to the documentation.
• I have updated the documentation accordingly.
• I have read the CONTRIBUTING document.
• I have updated the CHANGELOG document.
• I have added tests to cover my changes.
• All new and existing tests passed.

Review instructions

Review instructions

[codecov]

Codecov Report

Merging #914 (06de6c6) into develop (8af0bd2) will decrease coverage by 0.01%.
Report is 3 commits behind head on develop.
The diff coverage is 76.36%.

Additional details and impacted files

@@             Coverage Diff             @@
##           develop     #914      +/-   ##
===========================================
- Coverage    72.31%   72.30%   -0.01%     
===========================================
  Files          212      212              
  Lines         4573     4586      +13     
  Branches      1302     1306       +4     
===========================================
+ Hits          3307     3316       +9     
- Misses        1122     1126       +4     
  Partials       144      144              

Files	Coverage Δ
src/App/Home/constants.js	100.00% <ø> (ø)
src/App/Identity/identity/Color/payex-colors.js	100.00% <ø> (ø)
.../App/Identity/identity/Color/swedbankpay-colors.js	100.00% <100.00%> (ø)
src/App/components/DisplayColor/index.js	100.00% <100.00%> (+12.50%)	⬆️
src/App/docutils/DocContainer/index.js	62.50% <100.00%> (ø)
src/App/routes/components.js	100.00% <ø> (ø)
src/App/Identity/identity/Color/index.js	61.01% <61.76%> (-2.82%)	⬇️

---

Continue to review full report in Codecov by Sentry.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update 78b06d1...06de6c6. Read the comment docs.

[github-actions]

Size Change: +3.12 kB (0%)

Total Size: 1.12 MB

Filename	Size	Change
dist/designguide/styles/documentation-payex.css	9.91 kB	+630 B (+7%)	🔍
dist/designguide/styles/documentation-swedbankpay.css	8.99 kB	+616 B (+7%)	🔍
dist/designguide/styles/payex.css	44.4 kB	+202 B (0%)
dist/designguide/styles/swedbankpay.css	42.2 kB	+105 B (0%)
dist/styles/documentation-payex.css	9.91 kB	+630 B (+7%)	🔍
dist/styles/documentation-swedbankpay.css	8.99 kB	+616 B (+7%)	🔍
dist/styles/payex.css	44.4 kB	+202 B (0%)
dist/styles/swedbankpay.css	42.2 kB	+105 B (0%)

ℹ️ View Unchanged

Filename	Size	Change
dist/designguide/scripts/dg-dashboard.js	72.9 kB	0 B
dist/designguide/scripts/dg.js	24.8 kB	0 B
dist/scripts/9438.js	71.8 kB	0 B
dist/scripts/dg-dashboard.js	72.9 kB	0 B
dist/scripts/dg.js	24.8 kB	0 B
dist/scripts/payex.js	323 kB	+5 B (0%)
dist/scripts/swedbankpay.js	323 kB	+4 B (0%)

_{compressed-size-action}