1813592 - Implement proper background colors for the current-conditions box in weather suggestions

Status: RESOLVED FIXED

(Firefox :: Address Bar, task, P1)

Description

[Drew Willcoxon :adw]

Implement proper background colors for the current-conditions box in weather suggestions.

Comment 1

[Drew Willcoxon :adw]

Attachment: Bug 1813592 - Implement proper background colors for the current-conditions box in weather suggestions.

This updates the background color of the current-conditions box in weather
suggestions as specified here: https://www.figma.com/file/Hdi0oHB7trRcncyVAKZypO/accuweather-explorations?node-id=1740%3A48779&t=EEULGA0RPZcaRRef-0

In summary:

• In light mode, the box is slightly lighter than the hover background color
• In dark mode, it's slightly darker than the selection background color

We don't have existing CSS variables for these. I tried a bunch of different
things: using random unrelated variables that happen to be the right values
depending on light/dark; color-mix() with various mixes; making a separate
background div and setting filter: brightness() on it. The filter approach
basically works and it has the nice benefit of mostly supporting non-default
themes, but it's too complex for this IMO and makes the DOM and CSS ugly.

Ultimately it's just simpler to set the appropriate colors in the themes, so
that's what I've done, using light-dark-overrides.css. I also added
alpenglow-overrides.css so we support all three built-in lwthemes.

There are two new variables:

• --urlbar-weather-current-conditions-bgcolor
• --urlbar-weather-icon-color

The icon SVG files contain embedded colors for light and dark since many of the
icons are multicolored, but all colors can be overidden with context fill and
stroke. That's what --urlbar-weather-icon-color is for.

Appropriate colors are picked like this:

• :root defines appropriate bgcolors for light and dark and sets the icon color to none so the colors in the SVGs are used. These rules are picked up by the default theme.
• The light and dark lwthemes use light-dark-overrides.css to set appropriate bgcolors and the icon color to none on #urlbar.
• Similarly, alpenglow uses alpenglow-overrides.css.
• :root:-moz-lwtheme uses --autocomplete-popup-hover-background for the bgcolor and currentColor for the icon. These rules are picked up by non-built-in lwthemes. For these themes, we'll use a known bgcolor and icons will be monochromatic since we can't make them look nice universally.

This is my first time setting colors for built-in lwthemes so I might have
gotten it wrong. I also tried adding new colors to the lwtheme manifests -- I'm
not sure which is better.

Finally, I also made the iconId attribute on the weather icon all lowercase.
Otherwise, setting a new ID in the inspector to change icons while debugging
creates a broken image, but I don't know why.

Comment 2

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/6155babbad64
Implement proper background colors for the current-conditions box in weather suggestions. r=dao,mcheang

Comment 3

[Sandor Molnar[:smolnar]]

https://hg.mozilla.org/mozilla-central/rev/6155babbad64