1871490 - Adapt contentTheme.js to fit with our design tokens

Status: NEW

(Firefox :: Theme, task)

Description

[Mark Striemer [:mstriemer]]

The contentTheme.js file defines some CSS variables based on a user's installed webextension theme. These variables have different names than the design tokens, but may actually be for the same thing, eg --newtab-background-color is intended to set the page's background colour, but this is normally --in-content-page-background (and will likely move to --color-canvas from the design tokens work)

Since these variables are using a different name, a component that is designed with out design tokens won't adapt to the theme without the hosting page manually overwriting our design tokens to match the contentTheme.js variables

Ideally contentTheme.js can set these variables in such a way that components can adapt to them and hosting pages don't need to special case their page to use them