1817231 - Add Firefox branding/theming to Storybook

Status: RESOLVED FIXED

(Toolkit :: UI Widgets, enhancement, P3)

Description

[Hanna Jones [:hjones]]

Out of the box Storybook uses a built in light theme and Storybook brand assets. This can all be customized in various ways laid out in this doc: https://storybook.js.org/docs/react/configure/theming

At the very least it would be nice to change the title and icon in the sidebar to something Firefox specific. Going a bit further, it would be ideal to update the page styles to use Firefox in-content variables so that the page style matches the user's color scheme preference.

Comment 1

[Catherine Meade]

Do you all have a brand kit of assets we can pull from?

Comment 2

[Hanna Jones [:hjones]]

Good question! We don't have a brand kit exactly, but there should be assets in this browser/branding/official folder that we can pull from. Looking at this file that packages up the assets we could try using chrome://branding/content/icon128.png in Storybook. chrome://branding/content/firefox-wordmark.svg might also be interesting if we need a wordmark. Does that give you enough to get started with?

Comment 3

[Catherine Meade]

(In reply to Hanna Jones [:hjones] from comment #2)

Good question! We don't have a brand kit exactly, but there should be assets in this browser/branding/official folder that we can pull from. Looking at this file that packages up the assets we could try using chrome://branding/content/icon128.png in Storybook. chrome://branding/content/firefox-wordmark.svg might also be interesting if we need a wordmark. Does that give you enough to get started with?

YES I think Osmond [:oarnesto] will be working on this one.

Comment 4

[oarnesto]

Attachment: Bug 1817231 - Add Firefox branding in Storybook r=#reusable-components-reviewers

Comment 5

[Pulsebot]

Pushed by [e-mail]:
https://github.com/mozilla-firefox/firefox/commit/1c7fe7d2dc84
https://hg.mozilla.org/integration/autoland/rev/ac935f070642
Add Firefox branding in Storybook r=tgiles

Comment 6

[agoloman]

https://hg.mozilla.org/mozilla-central/rev/ac935f070642