Update

1 files changed, 40 insertions, 98 deletions

diff --git a/src/objects/_heading.scss b/src/objects/_heading.scss
index 8ed3b17..b1abdf5 100644
--- a/src/objects/_heading.scss
+++ b/src/objects/_heading.scss
@@ -1,114 +1,56 @@
+@use 'sass:meta';
 @use 'iro-sass/src/iro-sass' as iro;
-@use '../functions' as fn;
-@use '../mixins' as mx;
-@use '../config';
-@use 'include-media/dist/include-media' as media;
+@use '../props';
 
-$sizes: 'xxl' 'xl' 'lg' 'md' 'sm' 'xs';
+@forward 'heading.vars';
+@use 'heading.vars' as vars;
 
-@include iro.props-namespace('heading') {
-    @include iro.props-store((
-        --dims: (
-            --offset: -.02em,
-        ),
-        --colors: (
-            --bg: fn.global-color(--base --50),
-        ),
-    ));
+@mixin styles {
+    @include props.materialize(meta.module-variables('vars'));
 
-    @include iro.bem-object(iro.props-namespace()) {
-        @include mx.set-font(--headline);
-
-        display:            block;
-        margin-block-start: fn.global-dim(--heading --margin-bs);
-        text-transform:     none;
-        letter-spacing:     normal;
-        transform:          translateX(fn.dim(--offset));
+    @include iro.bem-object('heading') {
+        display:               block;
+        margin-block-start:    props.get(vars.$margin-bs);
+        font-family:           props.get(vars.$font-family);
+        font-weight:           props.get(vars.$font-weight);
+        font-feature-settings: props.get(vars.$feature-settings);
+        line-height:           props.get(vars.$line-height);
+        text-transform:        none;
+        letter-spacing:        normal;
+        transform:             translateX(props.get(vars.$offset));
 
         & + & {
-            margin-block-start: fn.global-dim(--heading --margin-bs-sibling);
+            margin-block-start: props.get(vars.$margin-bs-sibling);
         }
 
         @include iro.bem-elem('highlight') {
             background-image: linear-gradient(to top,
-            transparent    .05em,
-            fn.color(--bg) .05em,
-            fn.color(--bg) .5em,
-            transparent    .5em);
-        }
-
-        @include iro.bem-modifier('xxl') {
-            @include mx.heading-strong(--xxl);
-        }
-
-        @include iro.bem-modifier('xl') {
-            @include mx.heading-strong(--xl);
-        }
-
-        @include iro.bem-modifier('lg') {
-            @include mx.heading-medium(--lg);
-        }
-
-        @include iro.bem-modifier('md') {
-            @include mx.heading-medium(--md);
-        }
-
-        @include iro.bem-modifier('sm') {
-            @include mx.heading-faint(--sm);
-        }
-
-        @include iro.bem-modifier('xs') {
-            @include mx.heading-faint(--xs);
+            transparent               .05em,
+            props.get(vars.$bg-color) .05em,
+            props.get(vars.$bg-color) .5em,
+            transparent               .5em);
+        }
+
+        @each $mod, $font-family, $line-height, $font-size, $font-weight, $letter-spacing, $feature-settings in vars.$sizes {
+            @include iro.bem-modifier($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);
+            }
         }
 
         @include iro.bem-modifier('display') {
-            @include mx.set-font(--headline);
-
-            @include iro.bem-modifier('xxl') {
-                @include mx.heading-strong(--display --xxl);
-
-                @include media.media('<=md') {
-                    @include mx.heading-strong(--display-sm --xxl);
-                }
-            }
-    
-            @include iro.bem-modifier('xl') {
-                @include mx.heading-strong(--display --xl);
-
-                @include media.media('<=md') {
-                    @include mx.heading-strong(--display-sm --xl);
-                }
-            }
-    
-            @include iro.bem-modifier('lg') {
-                @include mx.heading-strong(--display --lg);
-
-                @include media.media('<=md') {
-                    @include mx.heading-strong(--display-sm --lg);
-                }
-            }
-    
-            @include iro.bem-modifier('md') {
-                @include mx.heading-strong(--display --md);
-
-                @include media.media('<=md') {
-                    @include mx.heading-strong(--display-sm --md);
-                }
-            }
-    
-            @include iro.bem-modifier('sm') {
-                @include mx.heading-medium(--display --sm);
-
-                @include media.media('<=md') {
-                    @include mx.heading-medium(--display-sm --sm);
-                }
-            }
-    
-            @include iro.bem-modifier('xs') {
-                @include mx.heading-faint(--display --xs);
-
-                @include media.media('<=md') {
-                    @include mx.heading-faint(--display-sm --xs);
+            @each $mod, $font-family, $line-height, $font-size, $font-weight, $letter-spacing, $feature-settings in vars.$display--sizes {
+                @include iro.bem-modifier($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);
                 }
             }
         }