Use shared variables for font sizes and line heights in get started page

woocommerce · Apr 28, 2022 · 13e1ac1 · 13e1ac1
1 parent 6404822
commit 13e1ac1
Show file tree

Hide file tree

Showing 5 changed files with 42 additions and 23 deletions.
diff --git a/js/src/get-started-page/_shared.scss b/js/src/get-started-page/_shared.scss
@@ -0,0 +1,11 @@
+$font-smallest: 12px;
+$font-small: 14px;
+$font-medium-mobile: 20px;
+$font-medium: 24px;
+
+$line-height-smallest: 13px;
+$line-height-smaller: 16px;
+$line-height-small: 18px;
+$line-height-medium: 20px;
+$line-height-large-mobile: 28px;
+$line-height-large: 32px;
diff --git a/js/src/get-started-page/benefits-card/index.scss b/js/src/get-started-page/benefits-card/index.scss
@@ -1,3 +1,5 @@
+@import "../_shared";
+
 .gla-get-started-benefits-card {
 	// Adjust <CardBody> imported from @wordpress/components.
 	// Repeat selector to make it higher priority.
@@ -25,21 +27,21 @@
 
 	// Use more specific rules to make it higher priority to override <Text> component.
 	& &__description {
-		font-size: 14px;
-		line-height: 18px;
+		font-size: $font-small;
+		line-height: $line-height-small;
 	}
 
 	// Use more specific rules to make it higher priority to override <Text> component.
 	& &__hint {
 		font-size: $helptext-font-size;
 		color: $gray-600;
-		line-height: 16px;
+		line-height: $line-height-smaller;
 	}
 
 	@media (max-width: $break-small) {
 		// Use more specific rules to make it higher priority to override <Text> component.
 		& &__title {
-			font-size: 20px;
+			font-size: $font-medium-mobile;
 		}
 	}
 }
diff --git a/js/src/get-started-page/customer-quotes-card/index.scss b/js/src/get-started-page/customer-quotes-card/index.scss
@@ -1,3 +1,5 @@
+@import "../_shared";
+
 .gla-get-started-customer-quotes-card {
 	.components-flex {
 		gap: $grid-unit * 3.5;
@@ -31,22 +33,22 @@
 
 	// Use more specific rules to make it higher priority to override <Text> component.
 	& &__content {
-		font-size: 14px;
-		line-height: 20px;
+		font-size: $font-small;
+		line-height: $line-height-medium;
 	}
 
 	// Use more specific rules to make it higher priority to override <Text> component.
 	& &__name {
 		font-size: $helptext-font-size;
 		color: $gray-600;
-		line-height: 16px;
+		line-height: $line-height-smaller;
 	}
 
 	@media (max-width: $break-small) {
 		// Use more specific rules to make it higher priority to override <Text> component.
 		& &__title {
-			font-size: 20px;
-			line-height: 28px;
+			font-size: $font-medium-mobile;
+			line-height: $line-height-large-mobile;
 		}
 	}
 }
diff --git a/js/src/get-started-page/features-card/index.scss b/js/src/get-started-page/features-card/index.scss
@@ -1,3 +1,5 @@
+@import "../_shared";
+
 .gla-get-started-features-card {
 	// Adjust <CardHeader> imported from @wordpress/components.
 	// Repeat selector to make it higher priority.
@@ -33,30 +35,30 @@
 
 	// Use more specific rules to make it higher priority to override <Text> component.
 	& &__description {
-		font-size: 14px;
-		line-height: 18px;
+		font-size: $font-small;
+		line-height: $line-height-small;
 	}
 
 	// Use more specific rules to make it higher priority to override <Text> component.
 	& &__label {
 		margin: $grid-unit-30 0 $grid-unit-20;
 		font-weight: bold;
-		font-size: 14px;
-		line-height: 18px;
+		font-size: $font-small;
+		line-height: $line-height-small;
 	}
 
 	// Use more specific rules to make it higher priority to override <Text> component.
 	& &__content {
-		font-size: 14px;
-		line-height: 18px;
+		font-size: $font-small;
+		line-height: $line-height-small;
 	}
 
 	// Use more specific rules to make it higher priority to override <Text> component.
 	& &__learn-more {
 		margin-top: $grid-unit;
 		font-weight: 500;
-		font-size: 14px;
-		line-height: 16.71px;
+		font-size: $font-small;
+		line-height: $line-height-smaller;
 
 		a {
 			text-decoration: none;
@@ -66,8 +68,8 @@
 	@media (max-width: $break-small) {
 		// Use more specific rules to make it higher priority to override <Text> component.
 		& &__title {
-			font-size: 20px;
-			line-height: 28px;
+			font-size: $font-medium-mobile;
+			line-height: $line-height-large-mobile;
 		}
 
 		// Use more specific rules to make it higher priority to override <Text> component.

diff --git a/js/src/get-started-page/get-started-with-video-card/index.scss b/js/src/get-started-page/get-started-with-video-card/index.scss
@@ -1,3 +1,5 @@
+@import "../_shared";
+
 .gla-get-started-with-video-card {
 	flex-direction: column;
 
@@ -9,7 +11,7 @@
 
 		& > p {
 			margin: 0 1em;
-			line-height: 16px;
+			line-height: $line-height-smaller;
 			font-size: $helptext-font-size;
 			color: $gray-600;
 		}
@@ -67,7 +69,7 @@
 		justify-content: center;
 		width: 188px;
 		height: 36px;
-		font-size: 14px;
+		font-size: $font-small;
 		margin-bottom: $grid-unit-10;
 	}
 
@@ -104,8 +106,8 @@
 
 	@media (max-width: $break-small) {
 		& &__title {
-			font-size: 20px;
-			line-height: $default-line-height;
+			font-size: $font-medium-mobile;
+			line-height: $line-height-large-mobile;
 		}
 
 		& &__description {