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/objects/_heading.scss | 67 ++++++++++++++++-------------------------------
 1 file changed, 22 insertions(+), 45 deletions(-)

(limited to 'src/objects/_heading.scss')

diff --git a/src/objects/_heading.scss b/src/objects/_heading.scss
index 56d4987..b6ae3a4 100644
--- a/src/objects/_heading.scss
+++ b/src/objects/_heading.scss
@@ -26,65 +26,42 @@
         }
 
         @include iro.bem-modifier('xxl') {
-            color:     fn.color(--strong);
-            font-size: fn.global-dim(--font-size --400);
+            @include mx.heading-strong(fn.global-dim(--heading --lg));
         }
 
         @include iro.bem-modifier('xl') {
-            color:     fn.color(--strong);
-            font-size: fn.global-dim(--font-size --300);
+            @include mx.heading-medium(fn.global-dim(--heading --md));
         }
 
-        @include iro.bem-modifier('lg') {
-            color:     fn.color(--strong);
-            font-size: fn.global-dim(--font-size --200);
-        }
-
-        @include iro.bem-modifier('md') {
-            color:     fn.color(--strong);
-            font-size: fn.global-dim(--font-size --150);
-        }
-
-        @include iro.bem-modifier('sm') {
-            @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.color(--strong);
-        }
-
-        @include iro.bem-modifier('xs') {
-            @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.color(--light);
+        @include iro.bem-modifier('lg', 'md', 'sm', 'xs') {
+            @include mx.heading-faint(fn.global-dim(--heading --sm));
         }
 
         @include iro.bem-modifier('display') {
+            @include mx.set-font(--headline);
+
             @include iro.bem-modifier('xxl') {
-                color:     fn.foreign-color(--heading, --strong);
-                font-size: fn.global-dim(--font-size --900);
+                @include mx.heading-strong(fn.global-dim(--heading --display --xxl));
             }
     
             @include iro.bem-modifier('xl') {
-                color:     fn.foreign-color(--heading, --strong);
-                font-size: fn.global-dim(--font-size --600);
+                @include mx.heading-strong(fn.global-dim(--heading --display --xl));
+            }
+    
+            @include iro.bem-modifier('lg') {
+                @include mx.heading-strong(fn.global-dim(--heading --display --lg));
+            }
+    
+            @include iro.bem-modifier('md') {
+                @include mx.heading-strong(fn.global-dim(--heading --display --md));
+            }
+    
+            @include iro.bem-modifier('sm') {
+                @include mx.heading-medium(fn.global-dim(--heading --display --sm));
             }
     
-            @include iro.bem-modifier('l') {
-                color:     fn.foreign-color(--heading, --strong);
-                font-size: fn.global-dim(--font-size --300);
+            @include iro.bem-modifier('xs') {
+                @include mx.heading-faint(fn.global-dim(--heading --display --xs));
             }
         }
     }
-- 
cgit v1.2.3-70-g09d2