Update

1 files changed, 41 insertions, 89 deletions

diff --git a/src/scopes/_headings.scss b/src/scopes/_headings.scss
index b4a16bd..2bf7b08 100644
--- a/src/scopes/_headings.scss
+++ b/src/scopes/_headings.scss
@@ -1,10 +1,19 @@
-@use 'include-media/dist/include-media' as media;
+@use 'sass:map';
 @use 'iro-sass/src/iro-sass' as iro;
-@use '../mixins' as mx;
 @use '../props';
-@use '../core.vars' as core;
+@use '../objects/heading.vars' as headings;
 
 @mixin styles {
+    /* stylelint-disable-next-line scss/dollar-variable-pattern */
+    $-size-map: (
+        xs: h6,
+        sm: h5,
+        md: h4,
+        lg: h3,
+        xl: h2,
+        xxl: h1,
+    );
+
     @include iro.bem-scope('headings') {
         h1,
         h2,
@@ -12,102 +21,45 @@
         h4,
         h5,
         h6 {
-            @include mx.set-font(--headline);
-
-            display:        block;
-            text-transform: none;
-            letter-spacing: normal;
-            transform:      translateX(-.06em);
-        }
-
-
-        h1 {
-            @include mx.heading-strong(--xxl);
-        }
-
-        h2 {
-            @include mx.heading-strong(--xl);
-        }
-
-        h3 {
-            @include mx.heading-medium(--lg);
-        }
-
-        h4 {
-            @include mx.heading-medium(--md);
-        }
-
-        h5 {
-            @include mx.heading-faint(--sm);
-        }
-
-        h6 {
-            @include mx.heading-faint(--xs);
+            display:               block;
+            margin-block-start:    props.get(headings.$margin-bs);
+            font-family:           props.get(headings.$font-family);
+            font-weight:           props.get(headings.$font-weight);
+            font-feature-settings: props.get(headings.$feature-settings);
+            line-height:           props.get(headings.$line-height);
+            text-transform:        none;
+            letter-spacing:        normal;
+            transform:             translateX(props.get(headings.$offset));
         }
 
         @include iro.bem-elem('highlight') {
             background-image: linear-gradient(to top,
             transparent .15em,
-            fn.foreign-color(--heading, --bg) .15em,
-            fn.foreign-color(--heading, --bg) .6em,
+            props.get(headings.$bg-color) .15em,
+            props.get(headings.$bg-color) .6em,
             transparent .6em);
         }
 
-        @include iro.bem-modifier('display') {
-            h1,
-            h2,
-            h3,
-            h4,
-            h5,
-            h6 {
-                @include mx.set-font(--headline);
-            }
-
-            h1 {
-                @include mx.heading-strong(--display --xxl);
-
-                @include media.media('<=md') {
-                    @include mx.heading-strong(--display-sm --xxl);
-                }
-            }
-
-            h2 {
-                @include mx.heading-strong(--display --xl);
-
-                @include media.media('<=md') {
-                    @include mx.heading-strong(--display-sm --xl);
-                }
-            }
-
-            h3 {
-                @include mx.heading-strong(--display --lg);
-
-                @include media.media('<=md') {
-                    @include mx.heading-strong(--display-sm --lg);
-                }
-            }
-
-            h4 {
-                @include mx.heading-strong(--display --md);
-
-                @include media.media('<=md') {
-                    @include mx.heading-strong(--display-sm --md);
-                }
-            }
-
-            h5 {
-                @include mx.heading-medium(--display --sm);
-
-                @include media.media('<=md') {
-                    @include mx.heading-medium(--display-sm --sm);
-                }
+        @each $mod, $font-family, $line-height, $font-size, $font-weight, $letter-spacing, $feature-settings in headings.$sizes {
+            #{map.get($-size-map, $mod)} {
+                font-family:           props.get($font-family);
+                font-size:             props.get($font-size);
+                font-weight:           props.get($font-weight);
+                font-feature-settings: props.get($feature-settings);
+                line-height:           props.get($line-height);
+                letter-spacing:        props.get($letter-spacing);
             }
+        }
 
-            h6 {
-                @include mx.heading-faint(--display --xs);
-
-                @include media.media('<=md') {
-                    @include mx.heading-faint(--display-sm --xs);
+        @include iro.bem-modifier('display') {
+            @each $mod, $font-family, $line-height, $font-size, $font-weight, $letter-spacing, $feature-settings in headings.$display--sizes {
+                #{map.get($-size-map, $mod)} {
+                    font-family:           props.get($font-family);
+                    font-size:             props.get($font-size);
+                    font-weight:           props.get($font-weight);
+                    font-feature-settings: props.get($feature-settings);
+                    line-height:           props.get($line-height);
+                    letter-spacing:        props.get($letter-spacing);
                 }
             }
         }