Social Links: Add variables to change icon sizes

This adds CSS custom properties to alter the circle/logo sizes. I'm not
quite sure how to integrate this in to make it adjustable, maybe as a
theme.json optoin?

First, we may want to create as fixed sizes (sm, med, large) to make
sure things look right. There are two values to adjust, the outer circle
and the inner logo. So it is possible to make the icons all out of sorts
if the sizes don't match properly.

packages/block-library/src/social-links/style.scss

@@ -1,3 +1,8 @@
+.wp-social-link {
+	--social-link-size: 36px;
+	--social-link-logo-size: 24px;
+}
+
 .wp-block-social-links {
 	display: flex;
 	flex-wrap: wrap;
@@ -20,9 +25,10 @@
 
 .wp-social-link {
 	display: block;
-	width: 36px;
-	height: 36px;
-	border-radius: 36px; // This makes it pill-shaped instead of oval, in cases where the image fed is not perfectly sized.
+	width: var(--social-link-size);
+	height: var(--social-link-size);
+	// This makes it pill-shaped instead of oval, in cases where the image fed is not perfectly sized.
+	border-radius: var(--social-link-size);
 	margin: 0 8px 8px 0;
 	transition: transform 0.1s ease;
 	@include reduce-motion("transition");
@@ -41,6 +47,8 @@
 	svg {
 		color: currentColor;
 		fill: currentColor;
+		width: var(--social-link-logo-size);
+		height: var(--social-link-logo-size);
 	}
 
 	&:hover {
@@ -69,10 +77,6 @@
 
 		// Make these bigger.
 		padding: 4px;
-		svg {
-			width: 28px;
-			height: 28px;
-		}
 	}
 
 	@import "../social-link/socials-without-bg.scss";