Automattic / wp-calypso

The JavaScript and API powered WordPress.com
https://developer.wordpress.com
GNU General Public License v2.0
12.42k stars 1.99k forks source link

Checkbox toggle color being overridden #86946

Closed lsl closed 3 weeks ago

lsl commented 9 months ago

Quick summary

The Checkbox toggle color is being overridden somewhere and leaked into the wider application. This has been reported a few times but I was finally able to narrow down a reproduction:

Steps to reproduce

  1. Starting at URL: https://wordpress.com/settings/discussion/jetstatstest.wpcomstaging.com with the default / modern color scheme.
  2. Note the color of the checkbox toggles
  3. Click Install ActivityPub button (it just takes you to the marketplace)
  4. Return to any settings page
  5. You'll now see green check toggles instead of blue

Browser

Mozilla Firefox

Other notes

Expected: Screenshot 2024-01-23 at 16-46-38 Discussion Settings ‹ Creator Atomic Test Site — WordPress com

Got: Screenshot 2024-01-23 at 16-46-43 Discussion Settings ‹ Creator Atomic Test Site 2 — WordPress com

mmtr commented 3 weeks ago

I can still reproduce this, but this step is now different:

  1. Click Install ActivityPub button (it just takes you to the marketplace)

I had to click on "Fediverse settings now live in Marketing Connections" and then on "Install ActivityPub".

https://github.com/user-attachments/assets/c494e4a3-d92a-4906-b615-a811ea27a11d

@Automattic/lego since you have recently worked on color schemes, maybe you can take a look?

Alternatively, since the issue is reproducible only when going through the marketing connections (a social tool) to install the ActivityPub plugin, maybe @Automattic/loop can lend a hand here too?

lsl commented 3 weeks ago

It's the marketplace plugin listing css leaking, e.g. visit https://wordpress.com/plugins/elementor/test1231374.wpcomstaging.com, then navigate to a settings page.

The plugin doesn't need to be installed to create the issue but installing the plugin shows where the green is coming from:

Image

The green css override for the enable autoupdates toggle is leaking into the global scope somewhere. I'd just remove the green override and let the screen use the users color scheme like it should be.

Edit: fixing here https://github.com/Automattic/wp-calypso/pull/95599