Merge pull request #198 from Automattic/add/hovercards-css-reset

Hovercards: Implement a component-scoped CSS reset

Author: wellyshen

web/packages/hovercards/src/style.scss

@@ -17,24 +17,67 @@ $font-sf-pro: "SF Pro Text", -apple-system, BlinkMacSystemFont, "Segoe UI", Robo
 }
 
 .gravatar-hovercard {
-	display: inline-block;
-	z-index: 10000000;
 
-	h4,
-	p {
+	/* CSS reset for the hovercard. Add additional reset styles here if needed */
+
+	/* General: zero out unwanted defaults */
+	&,
+	&::before,
+	&::after {
+		box-sizing: border-box;
+	}
+
+	* {
 		margin: 0;
+		padding: 0;
+		border: 0;
+		box-sizing: inherit;
+		font: inherit;
+		line-height: inherit;
+		color: inherit;
+		background: transparent;
+		vertical-align: baseline;
+		list-style: none; /* covers all lists (ul, ol, li) */
+		appearance: none; /* strips native styling from every element */
+		-webkit-appearance: none;
+		-moz-appearance: none;
+	}
+
+	/* Components */
+	a {
+		text-decoration: none;
+		cursor: pointer;
 	}
 
-	p,
-	i,
-	a,
-	span {
-		font-family: $font-sf-pro;
-		font-size: 14px;
-		line-height: 1.5;
-		color: $color-black;
+	button {
+		background: none;
+		border: none;
+		padding: 0;
+		cursor: pointer;
 	}
 
+	img,
+	svg {
+		display: block; /* avoids inline whitespace */
+		max-width: 100%;
+		height: auto;
+	}
+
+	/* States */
+	a:focus-visible,
+	button:focus-visible {
+		outline: 2px solid revert;
+	}
+
+	/* End of CSS reset */
+
+	display: inline-block;
+	font-family: $font-sf-pro;
+	font-size: 14px;
+	line-height: 1.5;
+	color: $color-black;
+	z-index: 10000000;
+
 	.gravatar-hovercard__inner {
 		display: flex;
 		flex-direction: column;
@@ -47,7 +90,6 @@ $font-sf-pro: "SF Pro Text", -apple-system, BlinkMacSystemFont, "Segoe UI", Robo
 		border: 1px solid $color-light-gray;
 		border-radius: 4px;
 		box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
-		box-sizing: border-box;
 		overflow: hidden;
 	}
 
@@ -67,20 +109,15 @@ $font-sf-pro: "SF Pro Text", -apple-system, BlinkMacSystemFont, "Segoe UI", Robo
 		gap: 8px;
 	}
 
-	.gravatar-hovercard__avatar-link,
-	.gravatar-hovercard__social-link {
-		display: inline-flex;
+	.gravatar-hovercard__avatar-link {
+		width: fit-content;
 	}
 
 	.gravatar-hovercard__avatar {
 		border-radius: 50%;
 		background-color: $color-super-light-gray;
 	}
 
-	.gravatar-hovercard__personal-info-link {
-		text-decoration: none;
-	}
-
 	.gravatar-hovercard__name {
 
 		@include ellipsis(2);
@@ -89,7 +126,6 @@ $font-sf-pro: "SF Pro Text", -apple-system, BlinkMacSystemFont, "Segoe UI", Robo
 		font-size: 32px;
 		font-weight: 700;
 		line-height: 38px;
-		color: $color-black;
 	}
 
 	.gravatar-hovercard__job,
@@ -101,7 +137,6 @@ $font-sf-pro: "SF Pro Text", -apple-system, BlinkMacSystemFont, "Segoe UI", Robo
 	}
 
 	.gravatar-hovercard__body {
-		min-height: 42px;
 		margin-top: 8px;
 	}
 
@@ -127,15 +162,13 @@ $font-sf-pro: "SF Pro Text", -apple-system, BlinkMacSystemFont, "Segoe UI", Robo
 		width: 100%;
 		min-height: 42px;
 		padding: 8px;
-		background: unset;
 		border-radius: 4px;
 		border: 1px solid rgba($color-blue, 0.3);
 		font-family: $font-sf-pro;
 		font-size: 15px;
 		font-weight: 600;
 		line-height: 21px;
 		color: $color-blue;
-		cursor: pointer;
 
 		&:hover {
 			border: 1px solid rgba($color-blue, 0.6);
@@ -157,12 +190,9 @@ $font-sf-pro: "SF Pro Text", -apple-system, BlinkMacSystemFont, "Segoe UI", Robo
 		/* Ensure consistent word-breaking across browsers. */
 		word-break: break-all;
 		color: $color-gray;
-
-		text-decoration: none;
 	}
 
 	.gravatar-hovercard__profile-link {
-		text-decoration: none;
 		flex-shrink: 0;
 		color: $color-gray;
 	}
@@ -232,7 +262,7 @@ $font-sf-pro: "SF Pro Text", -apple-system, BlinkMacSystemFont, "Segoe UI", Robo
 		color: $color-gray;
 
 		&.gravatar-hovercard__error-message--claim-gravatar a {
-			color: inherit;
+			text-decoration: underline;
 		}
 	}
 }
@@ -270,7 +300,6 @@ $font-sf-pro: "SF Pro Text", -apple-system, BlinkMacSystemFont, "Segoe UI", Robo
 		border-top-left-radius: 4px;
 		border-top-right-radius: 4px;
 		padding: 20px 0;
-		box-sizing: border-box;
 		transform: translate3d(0, 100%, 0);
 		transition: transform 0.3s ease-in-out;
 	}
@@ -288,31 +317,25 @@ $font-sf-pro: "SF Pro Text", -apple-system, BlinkMacSystemFont, "Segoe UI", Robo
 		font-size: 18px;
 		font-weight: 700;
 		line-height: 27px;
-		margin: 0;
 	}
 
 	.gravatar-hovercard__drawer-close {
 		display: flex;
 		align-items: center;
 		justify-content: center;
-		border: none;
-		background: none;
-		padding: 0;
-		cursor: pointer;
 	}
 
 	.gravatar-hovercard__drawer-items {
 		display: flex;
 		flex-direction: column;
-		list-style: none;
-		margin: 0;
 		padding: 0 20px;
 		gap: 12px;
-		overflow: auto;
+		overflow-y: auto;
 	}
 
 	.gravatar-hovercard__drawer-item {
 		display: flex;
+		align-items: start;
 		gap: 8px;
 	}
 
@@ -329,14 +352,13 @@ $font-sf-pro: "SF Pro Text", -apple-system, BlinkMacSystemFont, "Segoe UI", Robo
 
 	.gravatar-hovercard__drawer-item-link {
 		color: $color-blue;
-		text-decoration: none;
 
 		&:hover {
 			text-decoration: underline;
 		}
 	}
 
-	&--open {
+	&.gravatar-hovercard__drawer--open {
 		visibility: visible;
 
 		.gravatar-hovercard__drawer-backdrop {
@@ -348,7 +370,7 @@ $font-sf-pro: "SF Pro Text", -apple-system, BlinkMacSystemFont, "Segoe UI", Robo
 		}
 	}
 
-	&--closing {
+	&.gravatar-hovercard__drawer--closing {
 		visibility: visible;
 
 		.gravatar-hovercard__drawer-backdrop {