fix: correct line-height for h2 and h3

Automattic · May 17, 2024 · 66e3548 · 66e3548
1 parent 4ddeff6
commit 66e3548
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 9 deletions.
diff --git a/assets/newspack-ui/scss/_modals.scss b/assets/newspack-ui/scss/_modals.scss
@@ -62,6 +62,7 @@
 			align-items: center;
 			background: var( --newspack-ui-color-body-bg );
 			border-bottom: 1px solid var( --newspack-ui-color-border );
+			color: var( --newspack-ui-color-neutral-90 );
 			display: flex;
 			justify-content: space-between;
 			position: sticky;
@@ -82,6 +83,7 @@
 
 		&__content {
 			backface-visibility: visible;
+			color: var( --newspack-ui-color-neutral-90 );
 			padding: var( --newspack-ui-spacer-5 );
 
 			// Make sure there's enough space above the first button in modals
@@ -124,17 +126,27 @@
 
 	&__modal-variation {
 		.newspack-ui {
+			color: red;
+
 			&__selection {
-					> *:first-child {
-						margin-top: 0;
+				> *:first-child {
+					margin-top: 0;
+				}
+
+				h3 {
+					margin: 0;
+
+					+ p {
+						margin-top: calc( var( --newspack-ui-spacer-base ) / 2);
 					}
+				}
 			}
 
 			&__options {
 				list-style: none;
 				display: flex;
 				flex-wrap: wrap;
-				gap: var( --newspack-ui-spacer-3 );
+				gap: var( --newspack-ui-spacer-2 );
 				margin: var( --newspack-ui-spacer-5 ) 0 0;
 				padding: 0;
 
@@ -173,21 +185,22 @@
 							}
 
 							del {
+								color: var( --newspack-ui-color-neutral-60 );
+								left: 0;
 								position: absolute;
+								top: calc( var( --newspack-ui-spacer-base ) * 0.75 );
 								width: 100%;
-								left: 0;
-								top: var( --newspack-ui-spacer-base );
 							}
 						}
 					}
 
 					.variation {
-						margin-top: auto;
-						padding: var( --newspack-ui-spacer-2 );
-						font-size: var( --newspack-ui-font-size-xs );
-						line-height: var( --newspack-ui-line-height-xs );
 						border-top: 1px solid var(--newspack-ui-color-border );
+						font-size: var( --newspack-ui-font-size-xs );
 						font-weight: 600;
+						line-height: var( --newspack-ui-line-height-xs );
+						margin-top: auto;
+						padding: var( --newspack-ui-spacer-2 );
 					}
 
 					form {

diff --git a/assets/newspack-ui/style.scss b/assets/newspack-ui/style.scss
@@ -13,6 +13,7 @@
 	h2,
 	h3 {
 		font-size: var( --newspack-ui-font-size-s );
+		line-height: var( --newspack-ui-line-height-s );	
 	}
 
 	a,