Pastel & Hot Pink Themes

[kommunarr]

Pastel & Hot Pink Themes

Pull Request Type

• Feature Implementation

Related issue

closes #3925

Description

This PR adds one pastel pink theme and one hot pink theme.

Notes:

• The commentOwner styling has been updated to use the more fitting --secondary-card-bg-color color (a la on the tags on the Channel: About tab) instead of --scrollbar-color. This unnecessary coupling led to a minor issue with one of the new themes, and its presence would be unnecessarily complicated for future themes going forward. This has minimal effect on existing styles.
• The --scrollbar-text-color-hover, --side-nav-hover-text-color, and --side-nav-active-text-color colors have been implemented throughout FT to allow for modifying the text color styling as well when --scrollbar-color-hover, --side-nav-hover-color, and --side-nav-active-color are used. This allows for a greater degree of control over hover and active styling on controls possessing two colors. That is especially useful for creating acceptable color contrasts on :hover and :active (recommended 4.5:1) compared to the base control. I used it for this purpose in the Hot Pink theme, and I imagine this will be quite useful for new themes going forward. (As an aside, "scrollbar text color" sounds somewhat silly, but as long as we keep using --scrollbar-color on things that aren't scrollbars, it's just the cost of doing business.)
• The Hot Pink theme is doing some new things; it essentially overrides the primary and secondary color themes with values of its own (mostly black and white). This is done because this particular Hot Pink palette cannot be combined with many other colors without violating WCAG 2 Level AA.
  • Additionally, the Hot Pink theme only underlines link text on hover. This makes for a much cleaner look for this particular theme. This can only be done because it meets the WCAG 2 Level AA requirements for link styling. See evidence in the Testing section.

Screenshots

Pastel Pink

Hot Pink

Testing

Every color in both of these palettes has been carefully and painstakingly selected to ensure both satisfaction of WCAG 2 Level AA and a pleasant user experience. Close attention was paid to :hover and :active states for all controls.
Pastel Pink link styling color contrast seen here.
Hot Pink link styling color contrast seen here.

Desktop

• OS: OpenSUSE Tumbleweed
• OS Version: 2023xxxx
• FreeTube version: 0.19.0

Additional context

I'm using dashes (i.e., pastel-pink, hot-pink) to represent the color names in index.js in accordance with a previous merged inclusion, but I'm not fully certain how that works out given that they're originally written in camelCase.

[efb4f5ff-1298-471a-8973-3d47447115dc]

Everything LGTM except for one minor thing

If u switch to the hot pink theme and open another settings tab u will see that the color of the toggles changes from blue to black. This is also the case if u switch back to a theme that uses the secondary color for the toggles, u will see the switch from black to blue

VirtualBoxVM_yzFkBmB3VU.mp4

[kommunarr]

Everything LGTM except for one minor thing

If u switch to the hot pink theme and open another settings tab u will see that the color of the toggles changes from blue to black. This is also the case if u switch back to a theme that uses the secondary color for the toggles, u will see the switch from black to blue
VirtualBoxVM_yzFkBmB3VU.mp4

Hi @efb4f5ff-1298-471a-8973-3d47447115dc, does this section answer your question?

The Hot Pink theme is doing some new things; it essentially overrides the primary and secondary color themes with values of its own (mostly black and white). This is done because this particular Hot Pink palette cannot be combined with many other colors without violating WCAG 2 Level AA.

Additionally, the Hot Pink theme only underlines link text on hover. This makes for a much cleaner look for this particular theme. This can only be done because it meets the WCAG 2 Level AA requirements for link styling. See evidence in the Testing section.

Edit: I think I will visibly disable the primary and secondary theme colors when hot pink is selected to make this clearer.

[efb4f5ff-1298-471a-8973-3d47447115dc]

LGTM