feat(rebrand): updated storybook to new brand and added styling overrides

[harpalsingh]

Proposed behaviour

This PR updates storybook to ensure new brand is applied visually.

The following elements have been updated:

• Updated "Carbon by Sage" logo
• Updated footer Sage logo
• Update storybook theme base values for new brand colours
• Welcome page updated background colors
• Custom overrides on storybook CSS for better brand alignment and style
• Colour of search term

Current behaviour

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
• [ ] Unit tests added or updated if required
• [ ] 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

Testing instructions

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].

[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 0c25d5a4fca5e852f9ad3c38800849e2ce26ce21:

Sandbox	Source
carbon-quickstart	Configuration
carbon-quickstart-typescript	Configuration

[cypress[bot]]

---

Test summary

2890 • 0 • 2 • 0 • 0

---

Run details

Project	carbon
Status	Passed
Commit	0c25d5a4fc
Started	Aug 26, 2022 9:43 AM
Ended	Aug 26, 2022 9:49 AM
Duration	05:28 💡
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]

@jamime Yea I think we will do another pass at the design but I wanted to get another look at all those and changes/updates we might want to do as well as content edit, this pass is mostly a rebrand basic phase 1 type. I will look at the canvas skip button and the blue was hard to find why its doing it via focus/active, will check that out.

[harpalsingh]

As discussed with @DlgSHi there are improvements to be made to focus states and further investigation and knock on effects of these and we will handle this in the next PR of work to further update storybook.

[DlgSHi]

As discussed with @harpalsingh, just leaving this here.

1. The focus outline for the main header and for the actions/controls/accessibility is incorrect.

https://user-images.githubusercontent.com/34001198/186857829-8a841060-3de5-46ed-9041-9ef4c2fd1b12.mov

2. Lack of focus for the go to fullscreen button

3. The skipLink blinks when is focused for Safari only:

https://user-images.githubusercontent.com/34001198/186858332-2be8b11e-2a16-4891-8ac8-a9647f521224.mov

[carbonci]

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

The release is available on:

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

Your semantic-release bot :package::rocket: