Jetpack Logo: support light/dark variants, clean up markup #103279

ciampo · 2025-05-09T10:47:25Z

Part of #

Proposed Changes

Apply some of the changes attempted in #103029, but trying to aligin better to the plan proposed in Linear DOTCOM-12752

Why are these changes being made?

Testing Instructions

Kapture.2025-05-09.at.12.58.18.mp4

Pre-merge Checklist

Has the general commit checklist been followed? (PCYsg-hS-p2)
Have you written new tests for your changes?
Have you tested the feature in Simple (P9HQHe-k8-p2), Atomic (P9HQHe-jW-p2), and self-hosted Jetpack sites (PCYsg-g6b-p2)?
Have you checked for TypeScript, React or other console errors?
Have you used memoizing on expensive computations? More info in Memoizing with create-selector and Using memoizing selectors and Our Approach to Data
Have we added the "[Status] String Freeze" label as soon as any new strings were ready for translation (p4TIVU-5Jq-p2)?
- For UI changes, have we tested the change in various languages (for example, ES, PT, FR, or DE)? The length of text and words vary significantly between languages.
For changes affecting Jetpack: Have we added the "[Status] Needs Privacy Updates" label if this pull request changes what data or activity we track or use (p4TIVU-aUh-p2)?

matticbot · 2025-05-09T10:47:37Z

Calypso Live (direct link)

	https://calypso.live?image=registry.a8c.com/calypso/app:build-143651

Jetpack Cloud live (direct link)

	https://calypso.live?image=registry.a8c.com/calypso/app:build-143651&env=jetpack

Automattic for Agencies live (direct link)

	https://calypso.live?image=registry.a8c.com/calypso/app:build-143651&env=a8c-for-agencies

matticbot · 2025-05-09T10:57:09Z

Here is how your PR affects size of JS and CSS bundles shipped to the user's browser:

App Entrypoints (~337 bytes added 📈 [gzipped])

name                 parsed_size           gzip_size
entry-subscriptions       +170 B  (+0.0%)     +337 B  (+0.1%)

Common code that is always downloaded and parsed every time the app is loaded, no matter which route is used.

Sections (~4866 bytes added 📈 [gzipped])

name                                parsed_size           gzip_size
jetpack-cloud-plugin-management         -2906 B  (-0.2%)    -1307 B  (-0.3%)
a8c-for-agencies-plugins                -2906 B  (-0.2%)    -1307 B  (-0.3%)
stepper-user-step                        +268 B  (+0.0%)     +263 B  (+0.1%)
plans                                    +268 B  (+0.0%)     +189 B  (+0.0%)
entrepreneur-flow                        +268 B  (+0.2%)     +269 B  (+0.5%)
async-step-use-my-domain                 +268 B  (+0.1%)     +263 B  (+0.2%)
async-step-unified-plans                 +268 B  (+0.0%)     +273 B  (+0.1%)
async-step-unified-domains               +268 B  (+0.0%)     +290 B  (+0.1%)
home                                     +239 B  (+0.0%)     +260 B  (+0.1%)
switch-site                              +170 B  (+0.1%)     +247 B  (+0.4%)
staging-site                             +170 B  (+0.0%)     +181 B  (+0.1%)
sites-dashboard                          +170 B  (+0.0%)     +181 B  (+0.1%)
site-settings                            +170 B  (+0.0%)     +181 B  (+0.0%)
site-performance                         +170 B  (+0.0%)     +181 B  (+0.0%)
site-monitoring                          +170 B  (+0.0%)     +181 B  (+0.1%)
site-logs                                +170 B  (+0.0%)     +181 B  (+0.1%)
reader                                   +170 B  (+0.0%)     +258 B  (+0.0%)
overview                                 +170 B  (+0.0%)     +181 B  (+0.0%)
jetpack-cloud-partner-portal             +170 B  (+0.0%)     +211 B  (+0.1%)
jetpack-app                              +170 B  (+0.0%)     +258 B  (+0.2%)
hosting                                  +170 B  (+0.0%)     +181 B  (+0.0%)
github-deployments                       +170 B  (+0.0%)     +181 B  (+0.1%)
domains                                  +170 B  (+0.0%)     +181 B  (+0.0%)
a8c-for-agencies-sites                   +170 B  (+0.0%)     +268 B  (+0.0%)
a8c-for-agencies-partner-directory       +170 B  (+0.0%)     +284 B  (+0.2%)
a8c-for-agencies-overview                +170 B  (+0.0%)     +268 B  (+0.1%)
a8c-for-agencies-marketplace             +170 B  (+0.0%)     +216 B  (+0.1%)
a8c-for-agencies-agency-tier             +170 B  (+0.1%)     +252 B  (+0.3%)
plugins                                   +90 B  (+0.0%)     +318 B  (+0.0%)

Sections contain code specific for a given set of routes. Is downloaded and parsed only when a particular route is navigated to.

Async-loaded Components (~1227 bytes added 📈 [gzipped])

name                                             parsed_size           gzip_size
async-load-signup-steps-plans-theme-preselected       +268 B  (+0.1%)     +273 B  (+0.2%)
async-load-signup-steps-plans                         +268 B  (+0.1%)     +273 B  (+0.2%)
async-load-signup-steps-domains                       +268 B  (+0.0%)     +290 B  (+0.1%)
async-load-design                                     +183 B  (+0.0%)     +146 B  (+0.0%)
async-load-design-blocks                              +170 B  (+0.0%)     +271 B  (+0.0%)
async-load-calypso-layout-command-palette             +170 B  (+0.1%)     +247 B  (+0.4%)

React components that are loaded lazily, when a certain part of UI is displayed for the first time.

Legend

What is parsed and gzip size?

Parsed Size: Uncompressed size of the JS and CSS files. This much code needs to be parsed and stored in memory.
Gzip Size: Compressed size of the JS and CSS files. This much data needs to be downloaded over network.

Generated by performance advisor bot at iscalypsofastyet.com.

matticbot · 2025-05-09T11:04:48Z

This PR modifies the release build for the following Calypso Apps:

For info about this notification, see here: PCYsg-OT6-p2

command-palette-wp-admin
notifications
wpcom-block-editor

To test WordPress.com changes, run install-plugin.sh $pluginSlug feat/jetpack-logo-cleanuo on your sandbox.

mirka · 2025-05-09T11:13:31Z

packages/components/src/logos/jetpack-logo/index.tsx

+	/**
+	 * Theme of the logo.
+	 * - `default`: use the default theme (ie. inherit).
+	 * - `light`: render.
+	 * - `dark`: use the dark theme.
+	 * @default 'default'
+	 */


I'm not sure I fully understand why we need a theme prop instead of just using currentColor for the "foreground" parts (with the "cutout" being transparent in the monochrome case). Is that part of what we're figuring out with the brand designers right now?

The monochrome version having a cutout vs the brand color version being filled white is part of the logo specs (see TTzDk3dzct551hYWRXPFa3-fi-2395_14811 ):

branded color, light theme: white triangles, green circle, black text

branded color, dark theme: white triangles, green circle, white text

monochrome, light or dark: cutout mask, currentColor circle, currentColor text

This is a requirement regardless of the "using hardcoded white/black" question.

In other words, I added the "theme" prop to generate all possible combinations from the specs. Especially today, we need a way to render the logo accordingly on a light/dark background following those specs. And I believe it would apply to most (if not all) logos.

When we add a Theme component, we may soft-deprecate the prop and recommend wrapping the logos in a Theme component instead.

We can't use currentColor text in the branded color version?

We're not sure if we can ditch the hardcoded white/black for the "Jetpack" text part in favour of always using currentColor, that's something to discuss with brand designers (@jameskoster is on it, although maybe a direct ping to @keoshi could be quicker?).

If it were possible to always use currentColor for the "Jetpack" text part, we could do without a theme prop, but we'd need to hardcode the triangles to #fff — which potentially could go out of sync with the color of the Jetpack text

mirka · 2025-05-09T11:16:06Z

packages/components/src/logos/jetpack-logo/index.tsx


 export const JetpackLogo = ( {
 	full = false,
 	monochrome = false,
+	theme = 'default',
 	size = 32,
 	className,
 	...props
 }: JetpackLogoProps & React.SVGProps< SVGSVGElement > ) => {


As we normalize the other logo components, it might be good to define a shared TS interface (e.g. A8CLogoProps).

Sounds good, alghough I'd say a separate follow-up task

…-logo

ciampo · 2025-05-09T16:05:27Z

client/a8c-for-agencies/sections/plugins/plugins-jetpack-banner.tsx

@@ -23,7 +22,6 @@ export default function A4APluginsJetpackBanner() {
 				description={ translate(
 					'To manage plugins, Jetpack must be activated on each site. Your Pressable plan includes Jetpack Complete for free. Activate it to access plugin management in this dashboard.'
 				) }
-				icon={ <JetpackLogo size={ 16 } /> }


The jetpack logo here was ignored in the underlying Banner component

ciampo · 2025-05-09T16:07:22Z

client/blocks/import/style/base.scss

+		color: var(--studio-gray-20);
+		fill: currentColor;


Switching to color + fill for a more comprehensive way to change the logo's color that is backwards compatible, but also works with the new version of the jetpack logo

ciampo · 2025-05-09T16:07:55Z

client/components/domains/domain-suggestion/style.scss

@@ -346,7 +346,7 @@
 body.is-section-stepper,
 body.is-section-signup {
 	&:not(:has(.step-container-v2)) {
-		svg:not(.jetpack-logo, .social-buttons__button svg) {
+		svg:not(.step-container__jetpack-powered-logo, .social-buttons__button svg) {


Using .step-container__jetpack-powered-logo instead of the internal .jetpack-logo class

ciampo · 2025-05-09T16:11:09Z

client/my-sites/customer-home/cards/actions/quick-links/index.jsx

+								iconComponent={
+									<JetpackLogo monochrome className="quick-links__action-box-icon" />
+								}


Using the same Jetpack logo as other jetpack-related quick links, instead of a slightly different jetpack logo

ciampo · 2025-05-09T16:11:47Z

client/my-sites/customer-home/cards/actions/quick-links/style.scss

+		fill: currentColor;
+		color: var(--color-neutral-60);


Same as before — ie. apply the same fill color to both existing SVGs and also the new Jetpack color

ciampo · 2025-05-09T16:13:37Z

Let's wait for a response re. having to use hardcoded white/black vs using currentColor (see conversation) before moving forward, as it may allow us to do without an additional theme prop.

ciampo added 2 commits May 9, 2025 12:51

Jetpack logo: rewrite internal logic, add theme prop

85bc39d

Add decorator to Storybook to better visualize all logo variations

0c67b2b

ciampo force-pushed the feat/jetpack-logo-cleanuo branch from e5526f1 to 0c67b2b Compare May 9, 2025 10:51

Add back title

68d56e6

mirka reviewed May 9, 2025

View reviewed changes

ciampo added 6 commits May 9, 2025 14:33

Use id for logo title

a9dd9a6

Remove unused logo

ffc216d

Fix logo styles in plan upgrade screen in Stepper import flow

254b706

Use Jetpack logo insted of gridicon in quick links

903b562

Fix SVG fill colors in quick links

c714db6

Use step-container__jetpack-powered-logo instead of internal .jetpack…

296286e

…-logo

ciampo commented May 9, 2025

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Jetpack Logo: support light/dark variants, clean up markup #103279

Jetpack Logo: support light/dark variants, clean up markup #103279

ciampo commented May 9, 2025 •

edited

Loading

matticbot commented May 9, 2025 •

edited

Loading

matticbot commented May 9, 2025 •

edited

Loading

matticbot commented May 9, 2025 •

edited

Loading

mirka May 9, 2025

ciampo May 9, 2025 •

edited

Loading

mirka May 9, 2025

ciampo May 9, 2025 •

edited

Loading

mirka May 9, 2025

ciampo May 9, 2025

ciampo May 9, 2025

ciampo May 9, 2025

ciampo May 9, 2025

ciampo May 9, 2025

ciampo May 9, 2025

ciampo commented May 9, 2025

Jetpack Logo: support light/dark variants, clean up markup #103279

Are you sure you want to change the base?

Jetpack Logo: support light/dark variants, clean up markup #103279

Conversation

ciampo commented May 9, 2025 • edited Loading

Proposed Changes

Why are these changes being made?

Testing Instructions

Pre-merge Checklist

matticbot commented May 9, 2025 • edited Loading

matticbot commented May 9, 2025 • edited Loading

matticbot commented May 9, 2025 • edited Loading

Choose a reason for hiding this comment

ciampo May 9, 2025 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

ciampo May 9, 2025 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

ciampo commented May 9, 2025

ciampo commented May 9, 2025 •

edited

Loading

matticbot commented May 9, 2025 •

edited

Loading

matticbot commented May 9, 2025 •

edited

Loading

matticbot commented May 9, 2025 •

edited

Loading

ciampo May 9, 2025 •

edited

Loading

ciampo May 9, 2025 •

edited

Loading