style(pod): modify colours to fix poor colour contrast ratios

[Parsium]

fixes #5301

Proposed behaviour

• Update color css for text within a Pod in a soft delete state to improve colour contrast with Pod background
• Update background-color for tertiary variant Pod to improve colour contrast when used with secondary or tertiary buttons
• Refactored markup in address example and soft delete state stories for Pod

Current behaviour

• Having a secondary or tertiary Button within a tertiary variant Pod causes a colour contrast warning in AXE
• Any text within a Pod in a soft delete state causes a colour contrast warning in AXE

Checklist

• [x] Commits follow our style guide
• [x] Related issues linked in commit messages if required
• [x] Screenshots are included in the PR if useful
• [x] All themes are supported if required
• [x] Unit tests added or updated if required
• [x] Cypress automation tests added or updated if required
• [x] Storybook added or updated if required
• [x] Translations added or updated (including creating or amending translation keys table in storybook) if required
• [x] Typescript d.ts file added or updated if required

QA

• [ ] Tested in CodeSandbox/storybook
• [ ] Add new Cypress test coverage if required
• [ ] Carbon implementation matches Design System/designs
• [ ] UI Tests GitHub check reviewed if required

Additional context

For UX review

Pod does not exist within Design System. Check visual changes such as colours are consistent with other components.

Testing instructions

Double check AXE colour contrast ratio violations have been resolved.

The following CodeSandbox is an example of the broken behaviour. You can see the new behaviour by looking at the version in the comment by codesandbox[bot].

https://codesandbox.io/s/pod-colour-contrast-y9tecn

[codesandbox-ci[bot]]

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

Latest deployment of this branch, based on commit 46b190f7b10585db1967135a75c04d9bb0dc78c7:

Sandbox	Source
carbon-quickstart	Configuration
carbon-quickstart-typescript	Configuration
pod-colour-contrast	PR

[cypress[bot]]

---

Test summary

2875 • 0 • 2 • 0 • 0

---

Run details

Project	carbon
Status	Passed
Commit	46b190f7b1
Started	Aug 25, 2022 9:42 AM
Ended	Aug 25, 2022 9:48 AM
Duration	06:24 💡
OS	Linux Debian - 10.10
Browser	Chrome 100

View run in Cypress Dashboard ➡️

---

This comment has been generated by cypress-bot as a result of this project's GitHub integration settings. You can manage this integration in this project's settings in the Cypress Dashboard

[harpalsingh]

So tertiary and secondary now share the same color, but this component needs a bigger overhaul anyway, so good to go and its not in DS either. all good and passes for me.

[carbonci]

:tada: This PR is included in version 110.1.2 :tada:

The release is available on:

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

Your semantic-release bot :package::rocket: