Update all instances of previous -font-* variables, T-20761

Author: nadyahakkinen

CHANGELOG.md

@@ -275,7 +275,7 @@
 
 ### 9.1.3: 2022-09-07
 
-* Consistency for variable `--font-weight-paragraph`
+* Consistency for variable `--typography-weight-paragraph`
 * Remove `has-light-bg` and `has-dark-bg` classes that are no longer used by back to top feature
 * Increase padding on mid-sized screens to prevent container sticking to sides
 
@@ -292,7 +292,7 @@
 * Improve form checkbox and radiob button styles
 * Form checkboxes and radio buttons: Add bouncy check animation
 * Clarify reset for checkboxes and radio buttons for gravity forms
-* Combine `--line-height-paragraphs-blog` and `--line-height-paragraphs` to one unified CSS variable: `--line-height-paragraph`
+* Combine `--typography-paragraph-line-heights-blog` and `--typography-paragraph-line-heights` to one unified CSS variable: `--typography-paragraph-line-height`
 
 ### 9.1.0: 2022-09-01
 

sass/base/_accessibility.scss

@@ -33,7 +33,7 @@
     clip-path: none;
     display: block;
     font-size: 1.7rem;
-    font-weight: var(--font-weight-bold);
+    font-weight: var(--typography-weight-bold);
     height: auto;
     left: .5rem;
     line-height: normal;

sass/components/_button.scss

@@ -9,7 +9,7 @@
   display: inline-block;
   font-family: var(--font-paragraph);
   font-size: var(--typography-size-16);
-  font-weight: var(--font-weight-semibold);
+  font-weight: var(--typography-weight-semibold);
   line-height: 1.39;
   margin-bottom: 0;
   max-width: 23rem;

sass/features/_gravity-forms.scss

@@ -7,7 +7,7 @@ div.validation_error {
   background-color: var(--color-error);
   color: var(--color-white);
   font-size: var(--typography-size-17);
-  font-weight: var(--font-weight-bold);
+  font-weight: var(--typography-weight-bold);
   margin-bottom: var(--form-row-gap);
   padding: 2rem;
 
@@ -23,7 +23,7 @@ body *[aria-invalid="true"] {
 .validation_message {
   color: var(--color-error);
   font-size: var(--typography-size-16);
-  font-weight: var(--font-weight-regular);
+  font-weight: var(--typography-weight-regular);
 }
 
 .validation_list {
@@ -39,7 +39,7 @@ body *[aria-invalid="true"] {
 
   li {
     color: var(--color-error);
-    font-weight: var(--font-weight-bold);
+    font-weight: var(--typography-weight-bold);
   }
 }
 
@@ -189,6 +189,6 @@ body *[aria-invalid="true"] {
   border: 2px solid var(--color-success);
   color: var(--color-success);
   font-size: var(--typography-size-paragraph);
-  font-weight: var(--font-weight-semibold);
+  font-weight: var(--typography-weight-semibold);
   padding: 2rem;
 }

sass/features/_pagination.scss

@@ -32,7 +32,7 @@
   border-top: 2px solid var(--color-blue-chalk);
   color: var(--color-pagination-text);
   display: flex;
-  font-weight: var(--font-weight-medium);
+  font-weight: var(--typography-weight-medium);
   height: 3.5rem;
   justify-content: center;
   margin-left: 0;

sass/global.scss

@@ -17,7 +17,7 @@
 @import 'variables/breakpoints';
 @import 'variables/font-face';
 @import 'variables/font-family';
-@import 'variables/font-size';
+@import 'variables/typography-size';
 @import 'variables/forms';
 @import 'variables/spacings';
 

sass/gutenberg-editor-styles.scss

@@ -17,7 +17,7 @@
 @import 'variables/colors';
 @import 'variables/breakpoints';
 @import 'variables/font-family';
-@import 'variables/font-size';
+@import 'variables/typography-size';
 @import 'variables/forms';
 @import 'variables/spacings';
 

sass/gutenberg/blocks/_boxed.scss

@@ -5,8 +5,8 @@
   color: var(--color-paragraph);
   font-size: var(--typography-size-17);
   font-style: normal;
-  font-weight: var(--font-weight-medium);
-  line-height: var(--line-height-paragraph);
+  font-weight: var(--typography-weight-medium);
+  line-height: var(--typography-paragraph-line-height);
   padding: 2rem;
   width: calc(100% - 4rem);
 }

sass/gutenberg/blocks/_core-blockquote.scss

@@ -14,7 +14,7 @@ blockquote {
   p {
     color: var(--color-paragraph);
     font-style: normal;
-    font-weight: var(--font-weight-semibold);
+    font-weight: var(--typography-weight-semibold);
     margin-bottom: 0;
     overflow: visible;
     position: relative;
@@ -28,7 +28,7 @@ blockquote {
 
 .wp-block-quote {
   border-left: 2px solid var(--color-paragraph);
-  line-height: var(--line-height-paragraph);
+  line-height: var(--typography-paragraph-line-height);
   margin-bottom: 4rem;
   margin-left: auto;
   margin-right: auto;
@@ -38,7 +38,7 @@ blockquote {
 
   > p {
     color: var(--color-paragraph);
-    line-height: var(--line-height-paragraph);
+    line-height: var(--typography-paragraph-line-height);
   }
 
   @media (max-width: $width-max-article + 40px) {

sass/gutenberg/blocks/_core-heading.scss

@@ -6,7 +6,7 @@ h2,
 h3,
 h4,
 h5 {
-  line-height: var(--line-height-core-heading);
+  line-height: var(--typography-core-heading-line-height);
 }
 
 // Don't add extra margin on top of first title