Varya: Improve line-height support heirachy so that it accepts line-h…

…eight customization without impacting other line-heights in the system.
Automattic · Apr 8, 2020 · a605f20 · a605f20
1 parent 78f0534
commit a605f20
Show file tree

Hide file tree

Showing 6 changed files with 29 additions and 12 deletions.
diff --git a/varya/assets/css/style-editor.css b/varya/assets/css/style-editor.css
@@ -754,6 +754,10 @@ dt {
 	color: currentColor;
 }
 
+p {
+	line-height: var(--wp--typography--line-height, --global--line-height-body);
+}
+
 p.has-background {
 	padding: var(--global--spacing-unit);
 }

diff --git a/varya/assets/sass/blocks/heading/_style.scss b/varya/assets/sass/blocks/heading/_style.scss
@@ -16,35 +16,35 @@ h6, .h6 {
 h1, .h1 {
 	font-size: var(--heading--font-size-h1);
 	letter-spacing: var(--heading--letter-spacing-h1);
-	line-height: var(--heading--line-height);
+	line-height: var(--wp--typography--line-height, --heading--line-height);
 }
 
 h2, .h2 {
 	font-size: var(--heading--font-size-h2);
 	letter-spacing: var(--heading--letter-spacing-h2);
-	line-height: var(--heading--line-height);
+	line-height: var(--wp--typography--line-height, --heading--line-height);
 }
 
 h3, .h3 {
 	font-size: var(--heading--font-size-h3);
 	letter-spacing: var(--heading--letter-spacing-h3);
-	line-height: var(--heading--line-height);
+	line-height: var(--wp--typography--line-height, --heading--line-height);
 }
 
 h4, .h4 {
 	font-size: var(--heading--font-size-h4);
 	letter-spacing: var(--heading--letter-spacing-h4);
-	line-height: var(--heading--line-height);
+	line-height: var(--wp--typography--line-height, --heading--line-height);
 }
 
 h5, .h5 {
 	font-size: var(--heading--font-size-h5);
 	letter-spacing: var(--heading--letter-spacing-h5);
-	line-height: var(--global--line-height-body);
+	line-height: var(--wp--typography--line-height, --global--line-height-body);
 }
 
 h6, .h6 {
 	font-size: var(--heading--font-size-h6);
 	letter-spacing: var(--heading--letter-spacing-h6);
-	line-height: var(--global--line-height-body);
+	line-height: var(--wp--typography--line-height, --global--line-height-body);
 }
diff --git a/varya/assets/sass/blocks/paragraph/_editor.scss b/varya/assets/sass/blocks/paragraph/_editor.scss
@@ -1,4 +1,6 @@
 p {
+	line-height: var(--wp--typography--line-height, --global--line-height-body);
+
 	&.has-background {
 		padding: var(--global--spacing-unit);
 

diff --git a/varya/assets/sass/blocks/paragraph/_style.scss b/varya/assets/sass/blocks/paragraph/_style.scss
@@ -1,4 +1,7 @@
 p {
+
+	line-height: var(--wp--typography--line-height, --global--line-height-body);
+
 	// inherits general font style set at <body>
 	&.has-background {
 		padding: var(--global--spacing-unit);

diff --git a/varya/style-rtl.css b/varya/style-rtl.css
@@ -2115,6 +2115,10 @@ dd {
 	}
 }
 
+p {
+	line-height: var(--wp--typography--line-height, --global--line-height-body);
+}
+
 p.has-background {
 	padding: var(--global--spacing-unit);
 }

diff --git a/varya/style.css b/varya/style.css
@@ -1798,37 +1798,37 @@ h6 strong, .h6 strong {
 h1, .h1 {
 	font-size: var(--heading--font-size-h1);
 	letter-spacing: var(--heading--letter-spacing-h1);
-	line-height: var(--heading--line-height);
+	line-height: var(--wp--typography--line-height, --heading--line-height);
 }
 
 h2, .h2 {
 	font-size: var(--heading--font-size-h2);
 	letter-spacing: var(--heading--letter-spacing-h2);
-	line-height: var(--heading--line-height);
+	line-height: var(--wp--typography--line-height, --heading--line-height);
 }
 
 h3, .h3 {
 	font-size: var(--heading--font-size-h3);
 	letter-spacing: var(--heading--letter-spacing-h3);
-	line-height: var(--heading--line-height);
+	line-height: var(--wp--typography--line-height, --heading--line-height);
 }
 
 h4, .h4 {
 	font-size: var(--heading--font-size-h4);
 	letter-spacing: var(--heading--letter-spacing-h4);
-	line-height: var(--heading--line-height);
+	line-height: var(--wp--typography--line-height, --heading--line-height);
 }
 
 h5, .h5 {
 	font-size: var(--heading--font-size-h5);
 	letter-spacing: var(--heading--letter-spacing-h5);
-	line-height: var(--global--line-height-body);
+	line-height: var(--wp--typography--line-height, --global--line-height-body);
 }
 
 h6, .h6 {
 	font-size: var(--heading--font-size-h6);
 	letter-spacing: var(--heading--letter-spacing-h6);
-	line-height: var(--global--line-height-body);
+	line-height: var(--wp--typography--line-height, --global--line-height-body);
 }
 
 .wp-block-image {
@@ -2123,6 +2123,10 @@ dd {
 	}
 }
 
+p {
+	line-height: var(--wp--typography--line-height, --global--line-height-body);
+}
+
 p.has-background {
 	padding: var(--global--spacing-unit);
 }