Add light theme CSS file

[mathjazz]

Fix #2935. In addition to adding the light theme, this patch also includes consistency changes on the dark theme.

Note: after deployment, a small change is required to the homepage contents stored in the database, because a Mozilla logo in the footer has been moved from HTML to CSS. I've already done it on stage to where this patch is currently deployed.

How to test themes in Pontoon?

1. Go to https://mozilla-pontoon-staging.herokuapp.com/settings/ and select Light theme.
2. Explore Pontoon and comment here if you notice anything unusual. See a list of pages to check below.
3. Go to Settings again, select Dark theme and repeat the test. We've also made minor changes to the Dark theme.

What pages to test?

1. Dashboards:

• https://mozilla-pontoon-staging.herokuapp.com/projects/
• https://mozilla-pontoon-staging.herokuapp.com/projects/firefox/
• https://mozilla-pontoon-staging.herokuapp.com/teams/
• https://mozilla-pontoon-staging.herokuapp.com/fr/
• https://mozilla-pontoon-staging.herokuapp.com/fr/firefox/

2. User pages:

• https://mozilla-pontoon-staging.herokuapp.com/contributors/
• https://mozilla-pontoon-staging.herokuapp.com/profile/
• https://mozilla-pontoon-staging.herokuapp.com/settings/
• https://mozilla-pontoon-staging.herokuapp.com/notifications/

3. Admin:

• https://mozilla-pontoon-staging.herokuapp.com/admin/
• https://mozilla-pontoon-staging.herokuapp.com/admin/projects/firefox/
• https://mozilla-pontoon-staging.herokuapp.com/admin/projects/tutorial/strings/

4. Other assets:

• https://mozilla-pontoon-staging.herokuapp.com/machinery/
• https://mozilla-pontoon-staging.herokuapp.com/terms/
• https://mozilla-pontoon-staging.herokuapp.com/insights/
• https://mozilla-pontoon-staging.herokuapp.com/sync/
• https://mozilla-pontoon-staging.herokuapp.com/ (in Settings select "Default Homepage" as your Homepage)
• Add-On Promotion banner

5. Translate View:

• https://mozilla-pontoon-staging.herokuapp.com/fr/firefox/all-resources/

Known blocking issues:

• Theme toggle in the Profile Menu of the Translate View is not yet available
• FOUC when Match system is used and the system theme is Light
• In Light theme, Translated status color doesn't have sufficient contrast when used with font-weight: 300 (more)
• In Light theme, Pretranslated status color has inappropriate contrast in dashboard progress bar hover
• In Light theme, Missing status color is too dark
• In Light theme, Translation Time Filter colors are too light, because they are hardcoded
• In Light theme, Machinery diff and String list/Concordance search highlights are too dark
• In Dark theme, Priority star in heading needs more contrast
• In Light theme, (manually sent) Notification message color needs more contrast
• Delete button style in the Database project String admin is broken

Known non-blocking issues:

• Interactive Tour colors are hardcoded (light)
• https://ui-avatars.com/ (shown if no Gravatar image found) colors are hardcoded (dark)
• Separate main border in two (too dark when between dark and light background on dark theme)
• Light-theme: Insights chart backgrounds don't work too well with the light theme

Issues not related to this patch (i.e. issues to be filed):

• Buttons in translate view have borders and inputs don't (it's the opposite elsewhere)
• Welcome to Locale X panel is invisible
• De-duplicate Notification, Profile menu and Sign in buttons in the header (use React on Dashboards)

[mathjazz]

This needs to be changed in the DB as well.

[mathjazz]

Forgot to include changes to the /translate module.

[mathjazz]

See #2997 (comment).

[flodolo]

Did you give a try to the accessibility checks for contrast in Firefox devtools?

The MOVE ALL buttons in locale selectors (e.g. at the end of the settings page) seem too light, and hard to read. Same for the CANCEL button. In general, when the text is --light-green-1 and font-weight: 300. The same color is hard to read in the LOCALES or MACHINERY tab (number of matches).

Project header, completion chart, but also completion bar in the list of projects: the "incomplete" part uses a very dark gray like in the dark theme, and it feels strange.

The PRE label in the completion bar hover is too light (--neon-green).

[flodolo]

The fxa landing page used by the add-on is completely borked.

[mathjazz]

The fxa landing page used by the add-on is completely borked.

Thanks for pointing it out - looks like 0bb0752 wasn't deployed to stage for some reason. I re-deployed this branch, which also includes a few CSS fixes and a theme toggle in the profile menu in all views but the translate view.

[flodolo]

Thanks for pointing it out - looks like 0bb0752 wasn't deployed to stage for some reason. I re-deployed this branch, which also includes a few CSS fixes and a theme toggle in the profile menu in all views but the translate view.

The page always uses dark theme for me?

[mathjazz]

Correct. Dark theme is default and if you are not logged in we use the default.

[flodolo]

Correct. Dark theme is default and if you are not logged in we use the default.

But I'm already logged in, and my profile is set to use the light theme. If I click projects I get light theme.
I get it's an edge case, but the behavior is incorrect.

[mathjazz]

Then this is out of scope of this issue - we should not be showing a Sign In page to logged in users.