From 1a44092232713ef2063815bb03aadbb543e88ff6 Mon Sep 17 00:00:00 2001
From: Volpeon <git@volpeon.ink>
Date: Thu, 12 Jan 2023 17:46:05 +0100
Subject: Improved heading structure

---
 src/scopes/_headings.scss | 73 +++++++++++++++++++----------------------------
 1 file changed, 30 insertions(+), 43 deletions(-)

(limited to 'src/scopes/_headings.scss')

diff --git a/src/scopes/_headings.scss b/src/scopes/_headings.scss
index fc4991a..5b05b45 100644
--- a/src/scopes/_headings.scss
+++ b/src/scopes/_headings.scss
@@ -20,65 +20,52 @@
 
 
         h1 {
-            color:     fn.foreign-color(--heading, --strong);
-            font-size: fn.global-dim(--font-size --400);
+            @include mx.heading-strong(fn.global-dim(--heading --lg));
         }
 
         h2 {
-            color:     fn.foreign-color(--heading, --strong);
-            font-size: fn.global-dim(--font-size --300);
-        }
-
-        h3 {
-            color:     fn.foreign-color(--heading, --strong);
-            font-size: fn.global-dim(--font-size --200);
-        }
-
-        h4 {
-            color:     fn.foreign-color(--heading, --strong);
-            font-size: fn.global-dim(--font-size --150);
-        }
-
-        h5 {
-            @include mx.set-font(--standard, (
-                --line-height: null,
-                --size:        fn.global-dim(--font-size --75),
-                --weight:      bold,
-                --transform:   uppercase,
-                --spacing:     1px
-            ));
-
-            transform: none;
-            color:     fn.foreign-color(--heading, --strong);
+            @include mx.heading-medium(fn.global-dim(--heading --md));
         }
 
+        h3,
+        h4,
+        h5,
         h6 {
-            @include mx.set-font(--standard, (
-                --line-height: null,
-                --size:        fn.global-dim(--font-size --50),
-                --weight:      500,
-                --transform:   uppercase,
-                --spacing:     1px
-            ));
-
-            transform: none;
-            color:     fn.foreign-color(--heading, --light);
+            @include mx.heading-faint(fn.global-dim(--heading --sm));
         }
 
         @include iro.bem-modifier('display') {
+            h1,
+            h2,
+            h3,
+            h4,
+            h5,
+            h6 {
+                @include mx.set-font(--headline);
+            }
+
             h1 {
-                color:     fn.foreign-color(--heading, --strong);
-                font-size: fn.global-dim(--font-size --900);
+                @include mx.heading-strong(fn.global-dim(--heading --display --xxl));
             }
     
             h2 {
-                color:     fn.foreign-color(--heading, --strong);
-                font-size: fn.global-dim(--font-size --600);
+                @include mx.heading-strong(fn.global-dim(--heading --display --xl));
             }
     
             h3 {
-                color:     fn.foreign-color(--heading, --strong);
-                font-size: fn.global-dim(--font-size --300);
+                @include mx.heading-strong(fn.global-dim(--heading --display --lg));
+            }
+    
+            h4 {
+                @include mx.heading-strong(fn.global-dim(--heading --display --md));
+            }
+
+            h5 {
+                @include mx.heading-medium(fn.global-dim(--heading --display --sm));
+            }
+
+            h6 {
+                @include mx.heading-faint(fn.global-dim(--heading --display --xs));
             }
         }
     }
-- 
cgit v1.2.3-70-g09d2