Change typography variables to headings, T-20761

digitoimistodude · Oct 25, 2024 · 32ff0d7 · 32ff0d7
1 parent 5fc384a
commit 32ff0d7
Show file tree

Hide file tree

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

diff --git a/css/dev/global.css b/css/dev/global.css
diff --git a/css/dev/gutenberg-editor-styles.css b/css/dev/gutenberg-editor-styles.css
diff --git a/css/prod/global.css b/css/prod/global.css
diff --git a/css/prod/gutenberg-editor-styles.css b/css/prod/gutenberg-editor-styles.css
diff --git a/sass/gutenberg/blocks/_error.scss b/sass/gutenberg/blocks/_error.scss
@@ -19,6 +19,6 @@
   }
 
   h2 {
-    font-size: var(--typography-size-h4);
+    font-size: var(--typography-h4-size);
   }
 }
diff --git a/sass/layout/_typography.scss b/sass/layout/_typography.scss
@@ -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,

diff --git a/sass/variables/_typography.scss b/sass/variables/_typography.scss
@@ -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;
   }
 

diff --git a/sass/views/_comments.scss b/sass/views/_comments.scss
@@ -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;

diff --git a/sass/views/_search.scss b/sass/views/_search.scss
@@ -36,7 +36,7 @@
   }
 
   h3 {
-    font-size: var(--typography-size-h4);
+    font-size: var(--typography-h4-size);
     margin-bottom: 1rem;
   }
-Original file line number
+Diff line change
@@ Expand Up / @@ -19,6 +19,6 @@ @@
       }
       h2 {
-        font-size: var(--typography-size-h4);
+        font-size: var(--typography-h4-size);
       }
     }