Merge branch 'trunk' into update/plans-page-copy

Author: vykes-mac

.storybook/main.js

@@ -12,12 +12,17 @@ const storybookConfig = storybookDefaultConfig( {
 } );
 
 const configData = { ...sharedConfig, ...devConfig };
-storybookConfig.previewHead = ( head ) => `
-	${ head }
-	<script>
-		window.configData = ${ JSON.stringify( configData ) };
-		window.__i18n_text_domain__ = 'default';
-	</script>
-`;
 
-module.exports = { ...storybookConfig };
+module.exports = {
+	...storybookConfig,
+
+	preview: {
+		head: ( head ) => `
+			${ head }
+			<script>
+				window.configData = ${ JSON.stringify( configData ) };
+				window.__i18n_text_domain__ = 'default';
+			</script>
+		`,
+	},
+};

.stylelintrc

@@ -25,7 +25,6 @@
 		"no-invalid-position-at-import-rule": null,
 		"declaration-property-unit-allowed-list": [
 			{
-				"/^font-size$|^font$/": [ "rem" ],
 				"line-height": [ "px" ],
 				"/radius$/": [ "px", "%" ]
 			},

apps/blaze-dashboard/src/styles/wp-admin.scss

@@ -43,7 +43,7 @@
 	width: auto;
 	background: var(--studio-white);
 	color: var(--color-text);
-	font-size: 13px; /* stylelint-disable-line declaration-property-unit-allowed-list */
+	font-size: 13px;
 	margin-left: 20px;
 	margin-bottom: 2px;
 
@@ -60,13 +60,13 @@
 	h2,
 	h3 {
 		color: var(--studio-gray-90);
-		font-size: 1.3em; /* stylelint-disable-line declaration-property-unit-allowed-list */
+		font-size: 1.3em;
 		margin: 1em 0;
 		font-weight: 600;
 	}
 
 	p {
-		font-size: 13px; /* stylelint-disable-line declaration-property-unit-allowed-list */
+		font-size: 13px;
 		line-height: 1.5;
 		margin: 0.5em 0;
 		padding: 2px;

apps/help-center/webpack.config.js

@@ -8,37 +8,16 @@ const GenerateChunksMapPlugin = require( '../../build-tools/webpack/generate-chu
 
 const isDevelopment = process.env.NODE_ENV !== 'production';
 
-/* Arguments to this function replicate webpack's so this config can be used on the command line,
- * with individual options overridden by command line args.
- * @see {@link https://webpack.js.org/configuration/configuration-types/#exporting-a-function}
- * @see {@link https://webpack.js.org/api/cli/}
- * @param   {Object}  env                           environment options
- * @param   {string}  env.source                    plugin slugs, comma separated list
- * @param   {Object}  argv                          options map
- * @param   {string}  argv.entry                    entry path
- * @returns {Object}                                webpack config
- */
-function getWebpackConfig( env = { source: '' }, argv = {} ) {
-	env.WP = true;
-	const outputPath = path.join( __dirname, 'dist' );
+function getIndividualConfig( options = {} ) {
+	const { name, env, argv, injectPolyfill = true } = options;
 
+	const outputPath = path.join( __dirname, 'dist' );
 	const webpackConfig = getBaseWebpackConfig( env, argv );
 
 	return {
 		...webpackConfig,
 		mode: isDevelopment ? 'development' : 'production',
-		entry: {
-			'help-center-gutenberg': path.join( __dirname, 'help-center-gutenberg.js' ),
-			'help-center-wp-admin': path.join( __dirname, 'help-center-wp-admin.js' ),
-			'help-center-gutenberg-disconnected': path.join(
-				__dirname,
-				'help-center-gutenberg-disconnected.js'
-			),
-			'help-center-wp-admin-disconnected': path.join(
-				__dirname,
-				'help-center-wp-admin-disconnected.js'
-			),
-		},
+		entry: { [ name ]: path.join( __dirname, `${ name }.js` ) },
 		output: {
 			...webpackConfig.output,
 			path: outputPath,
@@ -62,7 +41,7 @@ function getWebpackConfig( env = { source: '' }, argv = {} ) {
 				output: path.resolve( './dist/chunks-map.json' ),
 			} ),
 			new DependencyExtractionWebpackPlugin( {
-				injectPolyfill: true,
+				injectPolyfill,
 				outputFilename: '[name].asset.json',
 				outputFormat: 'json',
 				requestToExternal( request ) {
@@ -87,4 +66,30 @@ function getWebpackConfig( env = { source: '' }, argv = {} ) {
 	};
 }
 
+/* Arguments to this function replicate webpack's so this config can be used on the command line,
+ * with individual options overridden by command line args.
+ * @see {@link https://webpack.js.org/configuration/configuration-types/#exporting-a-function}
+ * @see {@link https://webpack.js.org/api/cli/}
+ * @param   {Object}  env                           environment options
+ * @param   {string}  env.source                    plugin slugs, comma separated list
+ * @param   {Object}  argv                          options map
+ * @param   {string}  argv.entry                    entry path
+ * @returns {Object}                                webpack config
+ */
+function getWebpackConfig( env = { source: '' }, argv = {} ) {
+	env.WP = true;
+
+	return [
+		getIndividualConfig( { env, argv, name: 'help-center-gutenberg' } ),
+		getIndividualConfig( { env, argv, name: 'help-center-wp-admin' } ),
+		getIndividualConfig( { env, argv, name: 'help-center-gutenberg-disconnected' } ),
+		getIndividualConfig( {
+			env,
+			argv,
+			injectPolyfill: false,
+			name: 'help-center-wp-admin-disconnected',
+		} ),
+	];
+}
+
 module.exports = getWebpackConfig;

apps/notifications/src/panel/boot/stylesheets/actions.scss

@@ -21,7 +21,6 @@
 			padding-right: 52px;
 			min-height: 37px;
 			width: 100%;
-			/* stylelint-disable-next-line declaration-property-unit-allowed-list */
 			font-size: 14px;
 			font-family: inherit;
 			transition: border 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
@@ -41,7 +40,6 @@
 			right: 25px;
 			text-transform: uppercase;
 			font-weight: 600;
-			/* stylelint-disable-next-line declaration-property-unit-allowed-list */
 			font-size: 12px;
 		}
 		button.active {
@@ -68,7 +66,6 @@
 	box-sizing: border-box;
 	cursor: pointer;
 	display: inline-block;
-	/* stylelint-disable-next-line declaration-property-unit-allowed-list */
 	font-size: 12px;
 	max-width: 25%;
 	padding: 0 18px;
@@ -128,7 +125,6 @@
 	}
 
 	.wpnc__gridicon {
-		/* stylelint-disable-next-line declaration-property-unit-allowed-list */
 		font-size: 24px;
 	}
 

apps/notifications/src/panel/boot/stylesheets/block-user.scss

@@ -12,7 +12,6 @@ div.wpnc__user {
 	}
 
 	p {
-		/* stylelint-disable-next-line declaration-property-unit-allowed-list */
 		font-size: 0.85em;
 		margin: 0;
 	}

apps/notifications/src/panel/boot/stylesheets/main.scss

@@ -261,7 +261,7 @@ $with-sidebar-min-page-width: 1114px;
 		background: var(--color-surface);
 		border: 1px solid var(--color-neutral-light);
 		border-right: none;
-		font-size: 13px; /* stylelint-disable-line declaration-property-unit-allowed-list */
+		font-size: 13px;
 		height: 26px;
 		cursor: pointer;
 		user-select: none; // Makes text unselectable
@@ -378,12 +378,12 @@ $with-sidebar-min-page-width: 1114px;
 		transform: translateY(-50%);
 
 		h2 {
-			font: 400 21px/24px $sans; /* stylelint-disable-line declaration-property-unit-allowed-list */
+			font: 400 21px/24px $sans;
 			margin-bottom: 4px;
 		}
 
 		p {
-			font: 400 16px/24px $sans; /* stylelint-disable-line declaration-property-unit-allowed-list */
+			font: 400 16px/24px $sans;
 		}
 	}
 
@@ -403,7 +403,7 @@ $with-sidebar-min-page-width: 1114px;
 		bottom: 0;
 		overflow: hidden;
 		&:not(.is-note-open) {
-			box-shadow: -3px 1px 10px -2px rgba(var(--color-neutral-70-rgb), 0.075);
+			box-shadow: -3px 1px 10px -2px color-mix(in srgb, var(--color-neutral-70) 7.5%, transparent);
 		}
 	}
 
@@ -454,7 +454,7 @@ $with-sidebar-min-page-width: 1114px;
 		}
 
 		.unread {
-			background: rgba(var(--color-primary-rgb), 0.1); // rgba is used to meet AA contrast standard
+			background: color-mix(in srgb, var(--color-primary) 10%, transparent); // rgba is used to meet AA contrast standard
 		}
 
 		.wpnc__traffic_surge .wpnc__note-icon img {
@@ -616,7 +616,7 @@ $with-sidebar-min-page-width: 1114px;
 		height: 100%;
 		left: 0;
 		right: 0;
-		box-shadow: -3px 1px 10px -2px rgba(var(--color-neutral-70-rgb), 0.075);
+		box-shadow: -3px 1px 10px -2px color-mix(in srgb, var(--color-neutral-70) 7.5%, transparent);
 
 		@media only screen and (min-width: 480px) {
 			border-left: 1px solid var(--color-neutral-0);
@@ -681,7 +681,7 @@ $with-sidebar-min-page-width: 1114px;
 		.wpnc__comment .wpnc__user p.wpnc__excerpt {
 			color: var(--color-secondary);
 			max-height: 1.5em;
-			font-size: 14px; /* stylelint-disable-line declaration-property-unit-allowed-list */
+			font-size: 14px;
 		}
 
 		.wpnc__reply {
@@ -714,7 +714,7 @@ $with-sidebar-min-page-width: 1114px;
 		}
 
 		.wpnc__note-icon .wpnc__gridicon {
-			font-size: 2em; /* stylelint-disable-line declaration-property-unit-allowed-list */
+			font-size: 2em;
 			background-color: var(--color-neutral-10);
 			border-color: var(--color-neutral-10);
 		}
@@ -812,7 +812,7 @@ $with-sidebar-min-page-width: 1114px;
 
 			code {
 				font-family: $code;
-				font-size: 90%; /* stylelint-disable-line declaration-property-unit-allowed-list */
+				font-size: 90%;
 				color: var(--color-neutral-50);
 				background: var(--color-neutral-0);
 				border: 1px solid var(--color-neutral-10);

apps/notifications/src/panel/boot/stylesheets/note-common.scss

@@ -35,7 +35,6 @@ div.wpnc__note-actions {
 		clip: auto !important;
 		color: #21759b;
 		display: block;
-		/* stylelint-disable-next-line declaration-property-unit-allowed-list */
 		font-size: 14px;
 		font-weight: bold;
 		height: auto;

apps/notifications/src/panel/boot/stylesheets/shared/buttons.scss

@@ -21,7 +21,6 @@
 		text-decoration: none;
 		vertical-align: top;
 		box-sizing: border-box;
-		/* stylelint-disable-next-line declaration-property-unit-allowed-list */
 		font-size: 14px;
 		line-height: 21px;
 		border-radius: 4px;
@@ -57,7 +56,6 @@
 		&.is-compact {
 			padding: 7px;
 			color: var(--color-neutral-40);
-			/* stylelint-disable-next-line declaration-property-unit-allowed-list */
 			font-size: 11px;
 			line-height: 1;
 			text-transform: uppercase;

apps/notifications/src/panel/boot/stylesheets/shared/forms.scss

@@ -3,7 +3,6 @@
 	padding: 7px 14px;
 	width: 100%;
 	color: var(--color-neutral-70);
-	/* stylelint-disable-next-line declaration-property-unit-allowed-list */
 	font-size: 16px;
 	line-height: 1.5;
 	border: 1px solid var(--color-neutral-10);

apps/notifications/src/panel/boot/stylesheets/shared/reset.scss

@@ -57,7 +57,6 @@
 		border: 0;
 		margin: 0;
 		font-family: inherit;
-		/* stylelint-disable-next-line declaration-property-unit-allowed-list */
 		font-size: 100%;
 		font-style: inherit;
 		font-weight: inherit;

apps/notifications/src/panel/suggestions/styles.scss

@@ -8,7 +8,7 @@ $selected-color: var(--color-primary);
 $img-size: 24px;
 $img-border-radius: 50%;
 $border-radius: 3px;
-$box-shadow: 0 5px 6px rgba(var(--color-neutral-10-rgb), 0.5);
+$box-shadow: 0 5px 6px color-mix(in srgb, var(--color-neutral-10) 50%, transparent);
 
 .wpnc__suggestions {
 	position: relative;
@@ -38,7 +38,6 @@ $box-shadow: 0 5px 6px rgba(var(--color-neutral-10-rgb), 0.5);
 			border-bottom: 1px solid $light-border-color;
 			cursor: pointer;
 			line-height: $img-size;
-			/* stylelint-disable-next-line declaration-property-unit-allowed-list */
 			font-size: 14px;
 			height: $img-size;
 			overflow: hidden;
@@ -55,7 +54,7 @@ $box-shadow: 0 5px 6px rgba(var(--color-neutral-10-rgb), 0.5);
 
 	strong {
 		font-weight: 400;
-		background: rgba(var(--color-primary-light-rgb), 0.25);
+		background: color-mix(in srgb, var(--color-primary-light) 25%, transparent);
 	}
 
 	.wpnc__username {
@@ -67,7 +66,6 @@ $box-shadow: 0 5px 6px rgba(var(--color-neutral-10-rgb), 0.5);
 	}
 
 	small {
-		/* stylelint-disable-next-line declaration-property-unit-allowed-list */
 		font-size: 11px;
 		font-weight: 400;
 		float: right;
@@ -83,7 +81,7 @@ $box-shadow: 0 5px 6px rgba(var(--color-neutral-10-rgb), 0.5);
 		strong,
 		.username strong {
 			color: var(--color-text-inverted);
-			background: rgba(var(--color-primary-light-rgb), 0.45);
+			background: color-mix(in srgb, var(--color-primary-light) 45%, transparent);
 		}
 
 		small {

apps/o2-blocks/src/github-issue-template/style.scss

@@ -21,7 +21,6 @@
 		.wp-block-a8c-github-template__icon {
 			background: none;
 			color: var(--color-text-inverted);
-			/* stylelint-disable-next-line declaration-property-unit-allowed-list */
 			font-size: 26px;
 			top: calc(50% - 23px);
 

apps/o2-blocks/src/p2-autocomplete/editor.scss

@@ -25,7 +25,6 @@
 	text-overflow: ellipsis;
 	text-align: right;
 	padding-right: 8px;
-	/* stylelint-disable-next-line declaration-property-unit-allowed-list */
 	font-size: 0.8em;
 	flex-grow: 1;
 }

apps/o2-blocks/src/project-status/editor.scss

@@ -22,7 +22,6 @@
 	margin-bottom: 10px;
 
 	.wp-block-project-status__title {
-		/* stylelint-disable-next-line declaration-property-unit-allowed-list */
 		font-size: 13px;
 		font-weight: bold;
 		font-family:
@@ -39,7 +38,6 @@
 }
 
 .wp-block-project-status__counts {
-	/* stylelint-disable-next-line declaration-property-unit-allowed-list */
 	font-size: 13px;
 	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
 }
@@ -54,7 +52,6 @@
 	border-radius: 4px;
 	padding: 0 20px;
 	text-align: right;
-	/* stylelint-disable-next-line declaration-property-unit-allowed-list */
 	font-size: 13px;
 	margin: 16px 0;
 	margin-left: auto;
@@ -66,7 +63,6 @@
 	border: 1px solid #222;
 	border-radius: 4px;
 	padding: 0 20px;
-	/* stylelint-disable-next-line declaration-property-unit-allowed-list */
 	font-size: 13px;
 	margin: 16px 0;
 	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;