[jeherve]

Changes proposed in this Pull Request:

The new color is already in use in some places, such as RNA styles. Let's make the switch everywhere.

Jetpack product discussion

Internal references:

• p6TEKc-3tD-p2
• PbJqbW-C-p2

Does this pull request change what data or activity we track or use?

• No

Testing instructions:

• Check the Jetpack and VaultPress dashboard pages.
• Ensure that the Green matches your expectations.

[matticbot]

Caution: This PR has changes that must be merged to WordPress.com
Hello jeherve! These changes need to be synced to WordPress.com - If you 're an a11n, please commandeer and confirm D70076-code works as expected before merging this PR. Once this PR is merged, please commit the changes to WP.com. Thank you!
This revision will be updated with each commit to this PR

[github-actions]

Thank you for your PR!

When contributing to Jetpack, we have a few suggestions that can help us test and review your patch:

• ✅ Include a description of your PR changes.
  
• ✅ All commits were linted before commit.
  
• ✅ Add a "[Status]" label (In Progress, Needs Team Review, ...).
  
• ✅ Add testing instructions.
  
• ✅ Specify whether this PR includes any changes to data or privacy.
  
• ✅ Add changelog entries to affected projects
  

This comment will be updated as you work on your PR and make changes. If you think that some of those checks are not needed for your PR, please explain why you think so. Thanks for cooperation 🤖

---

The e2e test report can be found here. Please note that it can take a few minutes after the e2e tests checks are complete for the report to be available.

---

Once your PR is ready for review, check one last time that all required checks (other than "Required review") appearing at the bottom of this PR are passing or skipped.
Then, add the "[Status] Needs Team review" label and ask someone from your team review the code.
Once you’ve done so, switch to the "[Status] Needs Review" label; someone from Jetpack Crew will then review this PR and merge it to be included in the next Jetpack release.

---

Jetpack plugin:

• Next scheduled release: December 7, 2021.
• Scheduled code freeze: November 30, 2021.

---

Backup plugin:

• Next scheduled release: December 7, 2021.
• Scheduled code freeze: November 29, 2021.

---

Vaultpress plugin:

• Next scheduled release: December 7, 2021.
• Scheduled code freeze: November 29, 2021.

[anomiex]

Looks like projects/packages/jitm/src/css/jetpack-admin-jitm.min.css and projects/packages/jitm/src/css/jetpack-admin-jitm-rtl.min.css also need updating. For some reason those are checked in instead of built.

[jeherve]

Looks like projects/packages/jitm/src/css/jetpack-admin-jitm.min.css and projects/packages/jitm/src/css/jetpack-admin-jitm-rtl.min.css also need updating.

Done.

For some reason those are checked in instead of built.

I think we may have to move away from the old gulp commands to build CSS in packages:

jetpack/projects/plugins/jetpack/tools/builder/sass.js

Lines 183 to 244 in d6abf87

	gulp.task( 'sass:packages', function () {
	return (
	gulp
	.src( 'packages/**/assets/*.scss', { base: '.' } )
	.pipe( sass( { outputStyle: 'expanded' } ) )
	.pipe(
	prepend.prependText(
	'/*!\n' + '* Do not modify this file directly. It is compiled SASS code.\n' + '*/\n'
	)
	)
	.pipe( autoprefixer() )
	// Build *.css
	.pipe( sourcemaps.init() )
	.pipe( sourcemaps.write() )
	.pipe( gulp.dest( '.' ) )
	// Build *.min.css
	.pipe( cleanCSS() )
	.pipe( rename( { suffix: '.min' } ) )
	.pipe( gulp.dest( '.' ) )
	// Finished
	.on( 'end', function () {
	log( 'Packages SCSS now compiled' );
	} )
	);
	} );
	gulp.task(
	'sass:packages:rtl',
	gulp.series( 'sass:packages', function () {
	return (
	gulp
	.src(
	[
	'packages/**/assets/*.css',
	'!packages/**/assets/*min.css',
	'!packages/**/assets/*rtl.css',
	],
	{ base: '.' }
	)
	.pipe(
	prepend.prependText(
	'/*!\n' +
	'* Do not modify this file directly. It is automatically generated.\n' +
	'*/\n'
	)
	)
	.pipe( autoprefixer() )
	// Build *-rtl.css
	.pipe( rtlcss() )
	.pipe( rename( { suffix: '-rtl' } ) )
	.pipe( gulp.dest( '.' ) )
	// Build *-rtl.min.css
	.pipe( cleanCSS() )
	.pipe( rename( { suffix: '.min' } ) )
	.pipe( gulp.dest( '.' ) )
	// Finished
	.on( 'end', function () {
	log( 'Packages CSS are now available in RTL.' );
	} )
	);
	} )
	);

I'm not quite sure whether we can just get rid of it though.

[anomiex]

I suspect that gulp command has been dead code since the monorepo reorg.

Anyway, seems ok to me. Even the "You’re almost done. Set up Jetpack to enable powerful security and performance tools for WordPress" that uses the Jetpack green as a background for white text seems better this way, although someone from Design might want to consider whether we want to adjust that even further for better contrast.

[eeeeevon13]

@jeherve
Just to be clear on usage:
#069e08 is the "brand" green as decided in the brand book, but when used as a background color (with white foreground) it's only for the brand mark (the logo circle) because it does not pass contrast accessibility requirements.

For primary button backgrounds, for example, the color should be the next brand color darker (from the color studio) hex: #8710.

[samiff]

#069e08 is the "brand" green as decided in the brand book, but when used as a background color (with white foreground) it's only for the brand mark (the logo circle) because it does not pass contrast accessibility requirements.

Thanks for the info @eeeeevon13 👋

Do you know if such usage specifics are documented somewhere? It makes sense, but it was not obvious to me when looking at say these internal references: PbJqbW-J-p2 or PbJqbW-C-p2

---

I'm not sure how strict we currently are at differentiating between using #069e08 or #008710 given the info above. However, for the sake of this PR at least, I'm thinking that the color swap of #00be28 > #069e08 shouldn't introduce new accessibility concerns given that #069e08 has a higher contrast ratio with white text than #00be28.

A future PR perhaps could take a look at any unnuanced use of #069e08 as the "primary color" across styles.

[github-actions]

Great news! One last step: head over to your WordPress.com diff, D70076-code, and commit it.
Once you've done so, come back to this PR and add a comment with your changeset ID.

Thank you!

[samiff]

r235610-wpcom