Jetpack colors not used consistently within the editor

[guarani]

Describe the bug

When the block editor is used within the Jetpack app, the colors of some editor UI elements don't match that of the Jetpack app.

To Reproduce Steps to reproduce the behavior:

1. Open the Jetpack app to manage a site
2. Open the block editor
3. Notice some UI elements that are "blue" (WP color) while some are "green" (JP color)

• The "+ Add Block" button is blue
• The round "+" button (shown when the keyboard is open) is blue
• The cursor is green but the block outline is blue
• The system text highlight color (shown when you select text) is green
• Within the block inserter bottom sheet, the "Cancel" button is blue
• The "ADD BLOCK HERE" inserter point is blue

Expected behavior

I expected to see Jetpack green used consistently throughout the editor.

Screenshots

Smartphone (please complete the following information):

• Device: iPhone 11
• OS: 15.3.1
• Version 19.9

Additional context I have only tested on iOS, I haven't yet tested on Android.

[hypest]

👋 @iamthomasbishop , can you take a quick look to see if there's any gotchas in using the Jetpack green for the UI elements? Thanks!

[iamthomasbishop]

@hypest @guarani Thanks for the ping!

From a high-level perspective, I'd rather be more intentional about the use of brand colors — especially the canvas and block UI — not necessarily changing everything that is blue to green just for the sake of branding. It's worth noting that while we are using blues from color studio as the base colors (similar to core GB and their use of blue as a base, even if their hue is slightly different), we aren't necessarily doing it entirely for branding purposes.

My suggestion moving forward would be to do a more comprehensive audit and determine which elements would make sense to accent for the sake of branding. Thinking closer to the UI level, some examples of places that I would keep entirely brand-agnostic are the selected block outline, and the color(s) of the text-selection background/handles. On the flip side, it'd probably make sense to tint some/all of the system components (actionSheet items, dialog actions, etc.) to a brand color.

[shaunandrews]

From a high-level perspective, I'd rather be more intentional about the use of brand colors — especially the canvas and block UI — not necessarily changing everything that is blue to green just for the sake of branding.

I agree with everything @iamthomasbishop said above. The green should be used intentionally. The cursor and text selection colors are already a step too far in that regards; We should be looking to reduce these more distracting uses of the green accent color, not adding more.

[SiobhyB]

👋 @shaunandrews, as per this comment, we've recently merged changes to achieve the following:

• Update the colour of UI elements within the main editor (e.g. cursor, highlight, etc.) from green to blue.
• Update the accent of sub screens within Post Settings from green to blue.

These changes can be seen from version 20.5 of the iOS app and will be merged into Android soon.

A problem is that there's still some inconsistencies in areas connected to the editor:

• The media picker (available from media blocks and the Post Settings screen) still has some green.
• There is still green visible in other screens 'connected' to the editor, such as Preview, History, Help & Support, etc.

Some of these screens are used in other areas of the app that we don't want to change. For example, the media picker can be accessed from the Media section, Help & Support can be accessed from the Me section, and you can preview a site from the app's main home screen. This makes it a bit trickier to change their accent colours from green to blue only in the editor.

Before going further down this path, I wanted to check in with you about where we actually want to use the green within the editor (if at all). Are there any areas that we'd want to retain the green colour when a user's within the editor?

Thanks in advance for your help!

[shaunandrews]

I wanted to check in with you about where we actually want to use the green within the editor (if at all). Are there any areas that we'd want to retain the green colour when a user's within the editor?

I don't have all the answers right now. At some point we'll need to reconsider our use of color throughout the entire app. I think the progress made so far helps reduce some the "uncanny valley" effect we had with the green in the editor.

On iOS, I think the these sheets/menus that use green feel strange:

[fluiddot]

Thank you very much @SiobhyB for addressing some of the color inconsistencies, great work 🏅 !

Some of these screens are used in other areas of the app that we don't want to change. For example, the media picker can be accessed from the Media section, Help & Support can be accessed from the Me section, and you can preview a site from the app's main home screen. This makes it a bit trickier to change their accent colours from green to blue only in the editor.

Before going further down this path, I wanted to check in with you about where we actually want to use the green within the editor (if at all). Are there any areas that we'd want to retain the green colour when a user's within the editor?

Good question, we'd need to review the colors used in the app in general, not just the editor. We might identify some areas that we don't want to have with the green colors, and follow a similar approach as we've done in the editor with the blue color 🤔 .

[SiobhyB]

Thanks both, it sounds like it's okay to pause this task until we're able to figure out more details. 👍

@shaunandrews, the inconsistent colours in the action sheets (from your screenshot) on iOS will be fixed in 20.7. Thanks for testing!