New tab CSS currently has hundreds of variables. Some, in _variables.scss hold hardcoded color values. Others, in _theme.scss map those hardcoded color values to (S)CSS variables for use in stylesheets.

With the new-new-tab redesign, there is no need for those hundreds of variables. We should prune the variables down to a much smaller set (say, about 20) and use those throughout newtab CSS. As an example, there are dozens of different box-shadows used in newtab. We should define about two, one for large elements and another for small elements, and use those instead.

This work comprises defining the set of ~20 colors to be used, and determining how they relate to each other. To allow for theming, we should base those ~20 colors off just a few base variables: ntp_background, ntp_text, and potentially ntp_secondary and ntp_links. For example, secondary text could be ntp_text mixed with 40% white. This bug does not include the work of ripping out the existing variables and replacing them with the nearest new color. That will be in a follow-up bug.

The new new tab Figma document will be useful in determining the set of colors to use.

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