Fix huge merge conflict with T-20761

sass/features/_gravity-forms.scss

@@ -188,7 +188,7 @@ body *[aria-invalid="true"] {
   background-color: transparent;
   border: 2px solid var(--color-success);
   color: var(--color-success);
-  font-size: var(--typography-size-paragraph);
+  font-size: var(--typography-paragraph-size);
   font-weight: var(--typography-weight-semibold);
   padding: 2rem;
 }

sass/global.scss

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

sass/gutenberg-editor-styles.scss

@@ -16,8 +16,7 @@
 // Variables
 @import 'variables/colors';
 @import 'variables/breakpoints';
-@import 'variables/typography-family';
-@import 'variables/typography-size';
+@import 'variables/typography';
 @import 'variables/forms';
 @import 'variables/spacings';
 

sass/gutenberg/blocks/_core-heading.scss

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

sass/gutenberg/blocks/_core-separator.scss

@@ -7,8 +7,8 @@ hr,
   background-size: 2px 2px;
   border: 0;
   height: 0;
-  margin-bottom: calc(var(--margin-between-paragraphs) * 2);
-  margin-top: calc(var(--margin-between-paragraphs) * 2);
+  margin-bottom: calc(var(--spacing-paragraphs-margin-block) * 2);
+  margin-top: calc(var(--spacing-paragraphs-margin-block) * 2);
   padding-bottom: 1rem;
   padding-top: 1rem;
 }
@@ -19,8 +19,8 @@ hr,
 
 // stylelint-disable-next-line selector-not-notation
 .wp-block-separator:not(.is-style-wide):not(.is-style-dots) {
-  margin-bottom: calc(var(--margin-between-paragraphs) * 2);
-  margin-top: calc(var(--margin-between-paragraphs) * 2);
+  margin-bottom: calc(var(--spacing-paragraphs-margin-block) * 2);
+  margin-top: calc(var(--spacing-paragraphs-margin-block) * 2);
   opacity: .4;
   width: 10rem;
 }

sass/gutenberg/formatting/_align.scss

@@ -10,19 +10,19 @@
   }
 
   .alignleft > img {
-    margin-bottom: var(--margin-between-paragraphs);
+    margin-bottom: var(--spacing-paragraphs-margin-block);
     margin-right: var(--spacing-container-padding-inline);
-    margin-top: var(--margin-between-paragraphs);
+    margin-top: var(--spacing-paragraphs-margin-block);
 
     + figcaption {
       margin-top: 0;
     }
   }
 
   .alignright > img {
-    margin-bottom: var(--margin-between-paragraphs);
+    margin-bottom: var(--spacing-paragraphs-margin-block);
     margin-left: var(--spacing-container-padding-inline);
-    margin-top: var(--margin-between-paragraphs);
+    margin-top: var(--spacing-paragraphs-margin-block);
 
     + figcaption {
       margin-top: 0;

sass/gutenberg/formatting/_caption.scss

@@ -8,7 +8,7 @@
     --color-caption: #5c5c6a;
     border: 0;
     color: var(--color-caption);
-    font-size: var(--typography-size-captions);
+    font-size: var(--typography-captions-size);
     font-style: normal;
     margin-bottom: 6rem;
     margin-left: auto;

sass/layout/_general.scss

@@ -12,12 +12,12 @@
 .acf-block-preview .block,
 body {
   color: var(--color-paragraph);
-  font-family: var(--font-paragraph);
-  font-size: var(--font-size-paragraph);
+  font-family: var(--typography-family-paragraph);
+  font-size: var(--typography-paragraph-size);
   -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;
 }

sass/layout/_site-header.scss

@@ -2,7 +2,7 @@
 // the site navigation and search for example.
 .site-header {
   align-items: flex-start;
-  column-gap: var(--grid-gap);
+  column-gap: var(--spacing-grid-gap);
   display: flex;
   justify-content: space-between;
   margin-left: auto;

sass/layout/_typography.scss

@@ -14,7 +14,7 @@
 body {
   color: var(--color-paragraph);
   font-family: var(--typography-family-paragraph);
-  font-size: var(--typography-size-paragraph);
+  font-size: var(--typography-paragraph-size);
   -moz-osx-font-smoothing: grayscale;
   -webkit-font-smoothing: antialiased;
   font-weight: var(--typography-weight-paragraph);
@@ -33,8 +33,8 @@ h6 {
   color: var(--color-heading);
   font-family: var(--typography-family-heading);
   font-weight: var(--typography-weight-heading);
-  margin-bottom: var(--margin-between-paragraphs);
-  margin-top: var(--margin-between-paragraphs);
+  margin-bottom: var(--spacing-paragraphs-margin-block);
+  margin-top: var(--spacing-paragraphs-margin-block);
 }
 
 h2,

sass/variables/_typography-size.scss → sass/variables/_typography.scss

@@ -1,6 +1,13 @@
 // stylelint-disable rem-over-px/rem-over-px
 // CSS Variables for responsive fonts
 :root {
+  // Defined font families, replace these with your own
+  --typography-family-inter: 'Inter', -apple-system, 'BlinkMacSystemFont', 'Segoe UI', 'Roboto', 'Oxygen-Sans', 'Ubuntu', 'Cantarell', 'Helvetica Neue', sans-serif;
+
+  // Contexts where the fonts are used, replace this with the families defined above
+  --typography-family-paragraph: var(--typography-family-inter);
+  --typography-family-heading: var(--typography-family-inter);
+
   // Heading font sizes
   --typography-size-hero: 52px;
   --typography-size-h1: 40px;
@@ -28,7 +35,7 @@
 
   // Line-heights
   --typography-heading-line-height: 1.5;
-  --typography-core-heading-line-height: 1.23;
+  --typography-heading-core-line-height: 1.23;
   --typography-paragraph-line-height: 1.7;
 
   // Font weights
@@ -48,7 +55,7 @@
     --typography-size-h4: 18px;
     --typography-size-h5: 14px;
     --typography-size-h6: 12px;
-    --typography-size-paragraph: 16px;
+    --typography-paragraph-size: 16px;
   }
 
   // Element font sizes in tiny phones like iPhone 5S

sass/views/_404.scss

@@ -13,7 +13,7 @@
 
   h1 {
     font-size: clamp-calc($container-mobile, 1600px, 60px, 120px);
-    line-height: var(--line-height-core-heading);
+    line-height: var(--typography-heading-core-line-height);
     margin-bottom: 2rem;
   }
 }