From 9e952ebfab7c8fac6fa66656f863f41bdd4f4bd6 Mon Sep 17 00:00:00 2001
From: Marcus Kazmierczak <marcus@mkaz.com>
Date: Wed, 7 Oct 2020 13:01:45 -0700
Subject: [PATCH] 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.
---
 .../block-library/src/social-links/style.scss  | 18 +++++++++++-------
 1 file changed, 11 insertions(+), 7 deletions(-)

diff --git a/packages/block-library/src/social-links/style.scss b/packages/block-library/src/social-links/style.scss
index 8f7f9410b894f3..0e82a868217d8a 100644
--- a/packages/block-library/src/social-links/style.scss
+++ b/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";