Social: Fix the social icon colours on the admin page (#37327)

* Social: Fix the social icon colours on the admin page

The social icon colours were not being picked up on the admin page,
which turned out to be a problem with our Post CSS configuration.

In addition we were using --jp-gray-5 which wasn't defined by the
standard theme, but is the same value as --jp-gray. This has been a
problem before, so instead of swapping the property name, I've added
--jp-gray-5 as an alias.

* Fix the project versions

projects/js-packages/components/changelog/fix-social-icon-colours

@@ -0,0 +1,4 @@
+Significance: patch
+Type: added
+
+Added --jp-gray-5 as an alias of --jp-gray to the theme

projects/js-packages/components/components/theme-provider/index.tsx

@@ -25,6 +25,7 @@ export const colors = {
 	// Gray
 	'--jp-gray': '#dcdcde',
 	'--jp-gray-0': '#F6F7F7',
+	'--jp-gray-5': 'var(--jp-gray)',
 	'--jp-gray-10': '#C3C4C7',
 	'--jp-gray-20': '#A7AAAD',
 	'--jp-gray-40': '#787C82',

projects/js-packages/components/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@automattic/jetpack-components",
-	"version": "0.53.1",
+	"version": "0.53.2-alpha",
 	"description": "Jetpack Components Package",
 	"author": "Automattic",
 	"license": "GPL-2.0-or-later",

projects/plugins/social/changelog/fix-social-icon-colours

@@ -0,0 +1,4 @@
+Significance: patch
+Type: fixed
+
+Adjusted the webpack config so the social icon colours are picked up by PostCSS

projects/plugins/social/webpack.config.js

@@ -43,6 +43,12 @@ const socialWebpackConfig = {
 		} ),
 	},
 };
+const postcssLoader = {
+	loader: 'postcss-loader',
+	options: {
+		postcssOptions: { config: path.join( __dirname, 'postcss.config.js' ) },
+	},
+};
 
 module.exports = [
 	{
@@ -57,15 +63,7 @@ module.exports = [
 				// Handle CSS.
 				jetpackWebpackConfig.CssRule( {
 					extensions: [ 'css', 'sass', 'scss' ],
-					extraLoaders: [
-						{
-							loader: 'postcss-loader',
-							options: {
-								postcssOptions: { config: path.join( __dirname, 'postcss.config.js' ) },
-							},
-						},
-						'sass-loader',
-					],
+					extraLoaders: [ postcssLoader, 'sass-loader' ],
 				} ),
 			],
 		},
@@ -82,22 +80,7 @@ module.exports = [
 				// Handle CSS.
 				jetpackWebpackConfig.CssRule( {
 					extensions: [ 'css', 'sass', 'scss' ],
-					extraLoaders: [
-						{
-							loader: 'postcss-loader',
-							options: {
-								postcssOptions: {
-									plugins: [
-										require( 'postcss-custom-properties' )( {
-											disableDeprecationNotice: true,
-										} ),
-										require( 'autoprefixer' ),
-									],
-								},
-							},
-						},
-						'sass-loader',
-					],
+					extraLoaders: [ postcssLoader, 'sass-loader' ],
 				} ),
 			],
 		},