Keep the default CSS variables for npm consumers (#24890)

bin/packages/build-worker.js

@@ -96,7 +96,6 @@ const BUILD_TASK_BY_EXTENSION = {
 			makeDir( path.dirname( outputFile ) ),
 			readFile( file, 'utf8' ),
 		] );
-
 		const builtSass = await renderSass( {
 			file,
 			includePaths: [ path.join( PACKAGES_DIR, 'base-styles' ) ],
@@ -109,6 +108,12 @@ const BUILD_TASK_BY_EXTENSION = {
 					'animations',
 					'z-index',
 				]
+					// Editor styles should be excluded from the default CSS vars output.
+					.concat(
+						file.includes( 'editor-styles.scss' )
+							? []
+							: [ 'default-custom-properties' ]
+					)
 					.map( ( imported ) => `@import "${ imported }";` )
 					.join( ' ' ) + contents,
 		} );

packages/base-styles/_default-custom-properties.scss

@@ -0,0 +1,7 @@
+
+// It is important to include these styles in all built stylesheets.
+// This allows to CSS variables post CSS plugin to generate fallbacks.
+// It also provides default CSS variables for npm package consumers.
+:root {
+	@include admin-scheme(#007cba);
+}

packages/postcss-plugins-preset/lib/index.js

@@ -1,14 +1,4 @@
 module.exports = [
-	require( 'postcss-custom-properties' )( {
-		importFrom: [
-			{
-				customProperties: {
-					'--wp-admin-theme-color': '#007cba',
-					'--wp-admin-theme-color-darker-10': '#006ba1',
-					'--wp-admin-theme-color-darker-20': '#005a87',
-				},
-			},
-		],
-	} ),
+	require( 'postcss-custom-properties' )(),
 	require( 'autoprefixer' )( { grid: true } ),
 ];