Typography

4 files changed, 61 insertions, 2 deletions

diff --git a/src/_declare-vars.scss b/src/_declare-vars.scss
index 6da86be..aa06e92 100644
--- a/src/_declare-vars.scss
+++ b/src/_declare-vars.scss
@@ -119,6 +119,15 @@
                 --md:  fn.dim(--font-size --150, null),
                 --sm:  fn.dim(--font-size --75, null),
                 --xs:  fn.dim(--font-size --50, null),
+            ),
+
+            --display-sm: (
+                --xxl: fn.dim(--font-size --900, null),
+                --xl:  fn.dim(--font-size --600, null),
+                --lg:  fn.dim(--font-size --200, null),
+                --md:  fn.dim(--font-size --100, null),
+                --sm:  fn.dim(--font-size --75, null),
+                --xs:  fn.dim(--font-size --50, null),
             )
         ),
 
diff --git a/src/_mixins.scss b/src/_mixins.scss
index b1dda37..4eeb1ad 100644
--- a/src/_mixins.scss
+++ b/src/_mixins.scss
@@ -18,7 +18,7 @@
 @mixin heading-medium($size) {
     @include set-font(--standard, (
         --line-height: null,
-        --size:        $size,
+        --size:        fn.global-dim(join(--heading, $size)),
         --weight:      bold,
         --transform:   uppercase,
         --spacing:     1px
@@ -31,7 +31,7 @@
 @mixin heading-faint($size) {
     @include set-font(--standard, (
         --line-height: null,
-        --size:        $size,
+        --size:        fn.global-dim(join(--heading, $size)),
         --weight:      500,
         --transform:   uppercase,
         --spacing:     1px
diff --git a/src/objects/_heading.scss b/src/objects/_heading.scss
index 6f5e5b0..5d84e61 100644
--- a/src/objects/_heading.scss
+++ b/src/objects/_heading.scss
@@ -2,6 +2,7 @@
 @use '../functions' as fn;
 @use '../mixins' as mx;
 @use '../config';
+@use 'include-media/dist/include-media' as media;
 
 @include iro.props-namespace('heading') {
     @include iro.props-store((
@@ -58,26 +59,50 @@
 
             @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);
+                }
             }
         }
     }
diff --git a/src/scopes/_headings.scss b/src/scopes/_headings.scss
index c241557..c5033e8 100644
--- a/src/scopes/_headings.scss
+++ b/src/scopes/_headings.scss
@@ -1,6 +1,7 @@
 @use 'iro-sass/src/index' as iro;
 @use '../functions' as fn;
 @use '../mixins' as mx;
+@use 'include-media/dist/include-media' as media;
 
 @include iro.props-namespace('headings') {
     @include iro.bem-scope(iro.props-namespace()) {
@@ -56,26 +57,50 @@
 
             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);
+                }
             }
 
             h6 {
                 @include mx.heading-faint(--display --xs);
+
+                @include media.media('<=md') {
+                    @include mx.heading-faint(--display-sm --xs);
+                }
             }
         }
     }