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

digitoimistodude · Oct 25, 2024 · e07fde0 · e07fde0
1 parent 6796409
commit e07fde0
Show file tree

Hide file tree

Showing 23 changed files with 43 additions and 43 deletions.
diff --git a/CHANGELOG.md b/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
 

diff --git a/sass/base/_accessibility.scss b/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;

diff --git a/sass/components/_button.scss b/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;

diff --git a/sass/features/_gravity-forms.scss b/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;
 }
diff --git a/sass/features/_pagination.scss b/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;

diff --git a/sass/global.scss b/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';
 

diff --git a/sass/gutenberg-editor-styles.scss b/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';
 

diff --git a/sass/gutenberg/blocks/_boxed.scss b/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);
 }

diff --git a/sass/gutenberg/blocks/_core-blockquote.scss b/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) {

diff --git a/sass/gutenberg/blocks/_core-heading.scss b/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

diff --git a/sass/gutenberg/blocks/_core-paragraph.scss b/sass/gutenberg/blocks/_core-paragraph.scss
@@ -1,7 +1,7 @@
 // Core/paragraph block
 .has-larger-font-size,
 .has-large-font-size {
-  line-height: var(--line-height-heading);
+  line-height: var(--typography-heading-line-height);
 }
 
 .has-large-font-size {

diff --git a/sass/gutenberg/blocks/_core-table.scss b/sass/gutenberg/blocks/_core-table.scss
@@ -4,7 +4,7 @@ th {
   backface-visibility: hidden;
   background-color: var(--color-scorpion);
   color: var(--color-white);
-  font-weight: var(--font-weight-bold);
+  font-weight: var(--typography-weight-bold);
   overflow: hidden;
   text-align: left;
 }

diff --git a/sass/gutenberg/formatting/_paragraph.scss b/sass/gutenberg/formatting/_paragraph.scss
@@ -1,5 +1,5 @@
 // General paragraphs
 p {
   color: var(--color-paragraph);
-  line-height: var(--line-height-paragraph);
+  line-height: var(--typography-paragraph-line-height);
 }
diff --git a/sass/gutenberg/layout/_content.scss b/sass/gutenberg/layout/_content.scss
@@ -12,7 +12,7 @@
 .article-content > [class^='wp-block-'],
 .is-root-container > *,
 .article-content > * {
-  line-height: var(--line-height-paragraph);
+  line-height: var(--typography-paragraph-line-height);
   margin-left: auto;
   margin-right: auto;
   max-width: $width-max-article;

diff --git a/sass/layout/_forms.scss b/sass/layout/_forms.scss
@@ -34,7 +34,7 @@ legend,
 label {
   color: var(--color-form-label-text);
   font-size: var(--typography-size-input-fields);
-  font-weight: var(--font-weight-semibold);
+  font-weight: var(--typography-weight-semibold);
 }
 
 // Unset checkbox and radio button labels

diff --git a/sass/layout/_site-footer.scss b/sass/layout/_site-footer.scss
@@ -33,7 +33,7 @@
 
   .powered-by-wordpress {
     display: inline-block;
-    font-weight: var(--font-weight-semibold);
+    font-weight: var(--typography-weight-semibold);
     margin-bottom: 1rem;
     text-align: center;
   }

diff --git a/sass/layout/_site-header.scss b/sass/layout/_site-header.scss
@@ -49,7 +49,7 @@
   display: flex;
   // stylelint-disable-next-line
   font-size: clamp(.5rem, 3.4vw, 3rem);
-  font-weight: var(--font-weight-semibold);
+  font-weight: var(--typography-weight-semibold);
   justify-content: center;
   margin-bottom: var(--padding-container-vertical);
   margin-left: auto;

diff --git a/sass/layout/_typography.scss b/sass/layout/_typography.scss
@@ -17,8 +17,8 @@ body {
   font-size: var(--typography-size-paragraph);
   -moz-osx-font-smoothing: grayscale;
   -webkit-font-smoothing: antialiased;
-  font-weight: var(--font-weight-paragraph);
-  line-height: var(--line-height-paragraph);
+  font-weight: var(--typography-weight-paragraph);
+  line-height: var(--typography-paragraph-line-height);
   // stylelint-disable-next-line value-keyword-case
   text-rendering: geometricPrecision;
 }
@@ -32,7 +32,7 @@ h5,
 h6 {
   color: var(--color-heading);
   font-family: var(--font-heading);
-  font-weight: var(--font-weight-heading);
+  font-weight: var(--typography-weight-heading);
   margin-bottom: var(--margin-between-paragraphs);
   margin-top: var(--margin-between-paragraphs);
 }
@@ -42,7 +42,7 @@ h3,
 h4,
 h5,
 h6 {
-  line-height: var(--line-height-heading);
+  line-height: var(--typography-heading-line-height);
 }
 
 // Define heading scales
@@ -83,7 +83,7 @@ h6:first-child {
 // Bold
 b,
 strong {
-  font-weight: var(--font-weight-bold);
+  font-weight: var(--typography-weight-bold);
 }
 
 // Italic

diff --git a/sass/navigation/_nav-click-desktop.scss b/sass/navigation/_nav-click-desktop.scss
@@ -38,7 +38,7 @@
     color: var(--color-main-level);
     display: inline-flex;
     font-size: var(--typography-size-main-level);
-    font-weight: var(--font-weight-main-level);
+    font-weight: var(--typography-weight-main-level);
     margin-left: 0;
     margin-right: 0;
     padding-bottom: var(--padding-main-level-vertical);
@@ -54,7 +54,7 @@
     color: var(--color-sub-menu);
     display: inline-flex;
     font-size: var(--typography-size-sub-menu);
-    font-weight: var(--font-weight-sub-menu);
+    font-weight: var(--typography-weight-sub-menu);
     line-height: 1.5;
     padding-bottom: var(--padding-sub-menu-link-vertical);
     padding-left: var(--padding-sub-menu-link-horizontal);

diff --git a/sass/navigation/_nav-desktop.scss b/sass/navigation/_nav-desktop.scss
@@ -10,7 +10,7 @@
 
   // Main level items on desktop
   --typography-size-main-level: var(--typography-size-16);
-  --font-weight-main-level: var(--font-weight-bold);
+  --typography-weight-main-level: var(--typography-weight-bold);
   --padding-main-level-horizontal: 0;
   --padding-main-level-vertical: .6rem;
   --color-main-level: var(--color-black);
@@ -20,7 +20,7 @@
 
   // Sub menu items on desktop
   --typography-size-sub-menu: var(--typography-size-16);
-  --font-weight-sub-menu: var(--font-weight-regular);
+  --typography-weight-sub-menu: var(--typography-weight-regular);
   --padding-sub-menu-vertical: .6rem;
   --padding-sub-menu-link-vertical: .6rem;
   --padding-sub-menu-link-horizontal: 1.5rem;
@@ -72,7 +72,7 @@
     color: var(--color-main-level);
     display: inline-flex;
     font-size: var(--typography-size-main-level);
-    font-weight: var(--font-weight-main-level);
+    font-weight: var(--typography-weight-main-level);
     margin-left: 0;
     margin-right: 0;
     padding-bottom: var(--padding-main-level-vertical);
@@ -87,7 +87,7 @@
     color: var(--color-sub-menu);
     display: inline-flex;
     font-size: var(--typography-size-sub-menu);
-    font-weight: var(--font-weight-sub-menu);
+    font-weight: var(--typography-weight-sub-menu);
     line-height: 1.5;
     padding-bottom: var(--padding-sub-menu-link-vertical);
     padding-left: var(--padding-sub-menu-link-horizontal);

diff --git a/sass/navigation/_nav-mobile.scss b/sass/navigation/_nav-mobile.scss
@@ -18,14 +18,14 @@
 
   // Main level items on mobile
   --typography-size-main-level-mobile: 1.5rem;
-  --font-weight-main-level-mobile: 600;
+  --typography-weight-main-level-mobile: 600;
   --padding-main-level-vertical-mobile: 1.2rem;
   --color-main-level-menu-item-hover-focus-mobile: var(--color-white);
   --color-main-level-menu-item-mobile: var(--color-white);
 
   // Sub-menu items on mobile
   --typography-size-sub-menu-mobile: 1.5rem;
-  --font-weight-sub-menu-mobile: 600;
+  --typography-weight-sub-menu-mobile: 600;
   --margin-left-sub-menu: 1rem;
   --padding-sub-menu-vertical-mobile: .8rem;
   --padding-sub-menu-horizontal-mobile: 2.5rem;
@@ -96,7 +96,7 @@
     color: var(--color-main-level-menu-item-mobile);
     display: block;
     font-size: var(--typography-size-main-level-mobile);
-    font-weight: var(--font-weight-main-level-mobile);
+    font-weight: var(--typography-weight-main-level-mobile);
     margin-left: 0;
     margin-right: 0;
     padding-bottom: var(--padding-main-level-vertical-mobile);
@@ -112,7 +112,7 @@
   .sub-menu a {
     color: var(--color-sub-menu-mobile);
     font-size: var(--typography-size-sub-menu-mobile);
-    font-weight: var(--font-weight-sub-menu-mobile);
+    font-weight: var(--typography-weight-sub-menu-mobile);
     padding-bottom: var(--padding-sub-menu-vertical-mobile);
     padding-left: calc(var(--padding-sub-menu-horizontal-mobile) + var(--margin-left-sub-menu));
     padding-top: var(--padding-sub-menu-vertical-mobile);

diff --git a/sass/navigation/_nav-toggle.scss b/sass/navigation/_nav-toggle.scss
@@ -68,7 +68,7 @@ body:not(.js-nav-active) .nav-toggle:hover .hamburger::after {
   color: var(--color-white);
   content: attr(aria-label);
   font-size: var(--typography-size-14);
-  font-weight: var(--font-weight-semibold);
+  font-weight: var(--typography-weight-semibold);
   margin-left: 1.6rem;
   white-space: nowrap;
 }
@@ -82,7 +82,7 @@ body:not(.js-nav-active) .nav-toggle:hover .hamburger::after {
   border-radius: 3px;
   cursor: pointer;
   display: flex;
-  font-weight: var(--font-weight-semibold);
+  font-weight: var(--typography-weight-semibold);
   height: 2rem;
   justify-content: center;
   margin: 0;

diff --git a/sass/variables/_typography-size.scss b/sass/variables/_typography-size.scss
@@ -36,8 +36,8 @@
   --typography-weight-medium: 500;
   --typography-weight-semibold: 600;
   --typography-weight-bold: 700;
-  --typography-weight-paragraph: var(--font-weight-regular);
-  --typography-weight-heading: var(--font-weight-bold);
+  --typography-weight-paragraph: var(--typography-weight-regular);
+  --typography-weight-heading: var(--typography-weight-bold);
 
   // Heading font sizes in mobile
   @media (max-width: $container-mobile) {
-Original file line number
+Diff line change
@@ Expand Up / @@ -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
@@ Expand Down @@