From 13e1ac1370977efb9af23a459bae56a173400385 Mon Sep 17 00:00:00 2001 From: Ian Yu-Hsun Lin Date: Thu, 28 Apr 2022 15:03:36 +0800 Subject: [PATCH] Use shared variables for font sizes and line heights in get started page --- js/src/get-started-page/_shared.scss | 11 ++++++++++ .../get-started-page/benefits-card/index.scss | 10 +++++---- .../customer-quotes-card/index.scss | 12 +++++----- .../get-started-page/features-card/index.scss | 22 ++++++++++--------- .../get-started-with-video-card/index.scss | 10 +++++---- 5 files changed, 42 insertions(+), 23 deletions(-) create mode 100644 js/src/get-started-page/_shared.scss diff --git a/js/src/get-started-page/_shared.scss b/js/src/get-started-page/_shared.scss new file mode 100644 index 0000000000..eb58e68f91 --- /dev/null +++ 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 index e0213dc567..7025a72da3 100644 --- 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 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 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 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 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 index c6441380b9..8d92cdb7bf 100644 --- 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 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 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 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 index 30644f6800..e6d91c7ea6 100644 --- 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 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 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 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 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 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 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 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 index cfb70e1c4b..267a1ab828 100644 --- 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 {