Enumerate differences from Adwaita

[jackpot51]

It has been requested that the kinds changes we make to the Adwaita GTK theme be enumerated in the interest of a future theming API. In addition, I have asked the Yaru theme developers for the same. https://github.com/ubuntu/yaru/issues/2999

[isantop]

The basic differences between Pop and Adwaita have to do with specific colors used for various widgets. Padding, margins, sizing, borders generally, and basic styles are all consistent between the two. The major differences can be visualized in the following images:

Specific styling differences:

• Accent Color: Pop uses two different accent colors: one to emphasize content-related and variable controls (cyan), and another to emphasize binary/toggle controls (orange).

• Headerbar: Pop uses an inverted headerbar color in the light theme to emphasize the window content (the bar remains dark in the dark theme to maintain a dark screen presence).

• Selection Color: Selection text/foreground is made black instead of white to maintain contrast with the colored background.

• Suggested Action: Suggested buttons receive a green background to emphasize that the action is recommended. As with selection text, both suggested and destructive action classes use black text for high contrast.

• Border radius: Most widgets use a consistent 4px border radius, whereas border radii in Adwaita are more varied and generally more pronounced.

• Switch: Switches in Pop are broadly restyled from Adwaita, and are one of its signature elements. The switches have a layered-flat appearance with the handle sitting above the background color of the switch, which is recessed below the main surface layer. Visually the switch handle appears to be at the same plane as the main window layer, and it "drags" the background left and right below. The handle is slightly smaller than the handle in Adwaita. The overall sizing (as well as external padding and margins) remain identical to the Adwaita theme to maintain a high degree of compatibility.

• Check/Radio buttons : These are mildly restyled compared to Adwaita, but the sizing and general metaphors are carried over between both themes.

• Gradient backgrounds: Gradient backgrounds in Pop are generally removed to provide a more modern, cleaner appearance.

• Dark theme pastels: Where highly-saturated colors are used, the dark theme uses a desaturated version to help reduce eyestrain since strongly saturated colors in dark contexts have been shown to increase eyestrain. The colors are also lightened to improve contrast and aid recognition.

• Color-Neutral backgrounds: The overall window backgrounds in Pop are color-neutral (shades and tints of pure white, grey, and black), including in the dark theme (where headerbars are also color-neutral). Since many applications requiring accurate color-perception (photo/video editors, 3D modelling, vector graphics) are frequently used with a dark theme, this ensures that the Pop theme is suitable for use in these applications without affecting the user's perception of the color outside of the content displayed.

• Dark-theme base colors: The dark theme foreground/text colors are tweaked to reduce eyestrain while still providing a high degree of contrast against the background colors.

[isantop]

To summarize:

• A basic recoloring API which allows changing the accent color use by the theme is not sufficient for Pop. A recoloring API would need at least the ability to set foreground and background colors for most arbitrary widgets, including those for headerbars, scale troughs and backgrounds, focus borders, and suggested/destructive buttons, as well as foreground and backgrounds for selections and other text-related items.

• The ability to set images or constrained CSS styling for switches would also be required.

• The simplest solution would be to drop the force-loading of the Adwaita stylesheet in Adwaita.init() and continue to encourage themes maintain the sizing, spacing and general border styling of the Adwaita stylesheet.

• Another solution is a theming API with full-coverage for the enumerated differences. If that amount of theme coverage in the API is agreed and acceptable to maintainers, we'll provide the contribution.

• Pop was heavily re-developed following the theme BoF at GUADEC Thessaloniki to ensure minial issues with general applications, and the current incidence of theme bugs seems to indicate general success with this initiative. The current Pop theme conveys our Pop_OS brand successfully while maintaining extremely close, broad compatibility with the Adwaita stylesheet.