Change typography variables to headings, T-20761

Author: ronilaukkarinen

CHANGELOG.md

@@ -9,9 +9,10 @@
 * Prepare for air-blocks-buildtool
 * Remove stylelint-file-max-lines, T-20765
 * Add more breakpoints like $container-desktop, T-20758
-* Fix burger navigation sometimes not being centered vertically
-* Change to new dev.docs.dude.fi way of naming conventions, combine font partials under variables to one _typography.scss file
-* Move font-face include under _typography.scss
+* Fix burger navigation sometimes not being centered vertically, T-20918
+* Change to new dev.docs.dude.fi way of naming conventions, combine font partials under variables to one _typography.scss file, T-20761
+* Move font-face include under _typography.scss, T-20761
+* Change typography variables to headings, T-20761
 
 ### 9.4.4: 2024-09-13
 

css/dev/global.css

@@ -19,6 +19,6 @@
   }
 
   h2 {
-    font-size: var(--typography-size-h4);
+    font-size: var(--typography-h4-size);
   }
 }

css/dev/gutenberg-editor-styles.css

@@ -48,27 +48,27 @@ h6 {
 // Define heading scales
 // Current: Perfect fourth: https://type-scale.com/
 h1 {
-  font-size: var(--typography-size-h1);
+  font-size: var(--typography-h1-size);
 }
 
 h2 {
-  font-size: var(--typography-size-h2);
+  font-size: var(--typography-h2-size);
 }
 
 h3 {
-  font-size: var(--typography-size-h3);
+  font-size: var(--typography-h3-size);
 }
 
 h4 {
-  font-size: var(--typography-size-h4);
+  font-size: var(--typography-h4-size);
 }
 
 h5 {
-  font-size: var(--typography-size-h5);
+  font-size: var(--typography-h5-size);
 }
 
 h6 {
-  font-size: var(--typography-size-h6);
+  font-size: var(--typography-h6-size);
 }
 
 h1:first-child,

css/prod/global.css

@@ -23,12 +23,12 @@
 
   // Heading font sizes
   --typography-size-hero: 52px;
-  --typography-size-h1: 40px;
-  --typography-size-h2: 30px;
-  --typography-size-h3: 24px;
-  --typography-size-h4: 20px;
-  --typography-size-h5: 16px;
-  --typography-size-h6: 14px;
+  --typography-h1-size: 40px;
+  --typography-h2-size: 30px;
+  --typography-h3-size: 24px;
+  --typography-h4-size: 20px;
+  --typography-h5-size: 16px;
+  --typography-h6-size: 14px;
 
   // Paragraph font sizes
   --typography-size-12: 12px;
@@ -62,12 +62,12 @@
   // Heading font sizes in mobile
   @media (max-width: $container-mobile) {
     --typography-size-hero: 38px;
-    --typography-size-h1: 32px;
-    --typography-size-h2: 24px;
-    --typography-size-h3: 21px;
-    --typography-size-h4: 18px;
-    --typography-size-h5: 14px;
-    --typography-size-h6: 12px;
+    --typography-h1-size: 32px;
+    --typography-h2-size: 24px;
+    --typography-h3-size: 21px;
+    --typography-h4-size: 18px;
+    --typography-h5-size: 14px;
+    --typography-h6-size: 12px;
     --typography-paragraph-size: 16px;
   }
 

css/prod/gutenberg-editor-styles.css

@@ -39,7 +39,7 @@
 
   .comment-author {
     color: var(--color-comment-author-text);
-    font-size: var(--typography-size-h4);
+    font-size: var(--typography-h4-size);
     margin-bottom: 1rem;
     margin-top: 0;
     padding: 0;

sass/gutenberg/blocks/_error.scss

@@ -36,7 +36,7 @@
   }
 
   h3 {
-    font-size: var(--typography-size-h4);
+    font-size: var(--typography-h4-size);
     margin-bottom: 1rem;
   }