5 files changed, 71 insertions, 49 deletions

diff --git a/package.json b/package.json
index 33d0a79..a278393 100644
--- a/package.json
+++ b/package.json
@@ -15,7 +15,7 @@
         "build:style": "sass --load-path=node_modules src_demo/index.scss public/style.css",
         "lint:style": "stylelint \"src/**/*.scss\"",
         "fix:style": "stylelint \"src/**/*.scss\" --fix",
-        "serve": "python -m http.server --bind 127.0.0.1 --directory public 8000"
+        "serve": "python -m http.server --bind 127.0.0.1 --directory public 8001"
     },
     "dependencies": {
         "@oddbird/blend": "^0.2.3",
diff --git a/src/objects/_heading.scss b/src/objects/_heading.scss
index 6264072..56d4987 100644
--- a/src/objects/_heading.scss
+++ b/src/objects/_heading.scss
@@ -27,17 +27,17 @@
 
         @include iro.bem-modifier('xxl') {
             color:     fn.color(--strong);
-            font-size: fn.global-dim(--font-size --900);
+            font-size: fn.global-dim(--font-size --400);
         }
 
         @include iro.bem-modifier('xl') {
             color:     fn.color(--strong);
-            font-size: fn.global-dim(--font-size --600);
+            font-size: fn.global-dim(--font-size --300);
         }
 
         @include iro.bem-modifier('lg') {
             color:     fn.color(--strong);
-            font-size: fn.global-dim(--font-size --300);
+            font-size: fn.global-dim(--font-size --200);
         }
 
         @include iro.bem-modifier('md') {
@@ -71,14 +71,21 @@
             color:     fn.color(--light);
         }
 
-        @include iro.bem-elem('primary') {
-            background-image: linear-gradient(
-                to top,
-                transparent .15em,
-                fn.color(--bg) .15em,
-                fn.color(--bg) .6em,
-                transparent .6em
-            );
+        @include iro.bem-modifier('display') {
+            @include iro.bem-modifier('xxl') {
+                color:     fn.foreign-color(--heading, --strong);
+                font-size: fn.global-dim(--font-size --900);
+            }
+    
+            @include iro.bem-modifier('xl') {
+                color:     fn.foreign-color(--heading, --strong);
+                font-size: fn.global-dim(--font-size --600);
+            }
+    
+            @include iro.bem-modifier('l') {
+                color:     fn.foreign-color(--heading, --strong);
+                font-size: fn.global-dim(--font-size --300);
+            }
         }
     }
 }
diff --git a/src/scopes/_headings.scss b/src/scopes/_headings.scss
index 58bac7f..fc4991a 100644
--- a/src/scopes/_headings.scss
+++ b/src/scopes/_headings.scss
@@ -21,17 +21,17 @@
 
         h1 {
             color:     fn.foreign-color(--heading, --strong);
-            font-size: fn.global-dim(--font-size --900);
+            font-size: fn.global-dim(--font-size --400);
         }
 
         h2 {
             color:     fn.foreign-color(--heading, --strong);
-            font-size: fn.global-dim(--font-size --600);
+            font-size: fn.global-dim(--font-size --300);
         }
 
         h3 {
             color:     fn.foreign-color(--heading, --strong);
-            font-size: fn.global-dim(--font-size --300);
+            font-size: fn.global-dim(--font-size --200);
         }
 
         h4 {
@@ -65,14 +65,21 @@
             color:     fn.foreign-color(--heading, --light);
         }
 
-        @include iro.bem-elem('primary') {
-            background-image: linear-gradient(
-                to top,
-                transparent .15em,
-                fn.foreign-color(--heading, --bg) .15em,
-                fn.foreign-color(--heading, --bg) .6em,
-                transparent .6em
-            );
+        @include iro.bem-modifier('display') {
+            h1 {
+                color:     fn.foreign-color(--heading, --strong);
+                font-size: fn.global-dim(--font-size --900);
+            }
+    
+            h2 {
+                color:     fn.foreign-color(--heading, --strong);
+                font-size: fn.global-dim(--font-size --600);
+            }
+    
+            h3 {
+                color:     fn.foreign-color(--heading, --strong);
+                font-size: fn.global-dim(--font-size --300);
+            }
         }
     }
 }
diff --git a/tpl/objects/heading.pug b/tpl/objects/heading.pug
index 47ffefa..6cc05ad 100644
--- a/tpl/objects/heading.pug
+++ b/tpl/objects/heading.pug
@@ -1,42 +1,34 @@
-mixin h1-heading(level, inner = false)
-    - let classes = ['o-heading', 'o-heading--' + level]
+mixin h1-heading(level, display = false)
+    - let classes = ['o-heading', 'o-heading--' + level, { 'o-heading--display': display }]
     h1(class=classes)&attributes(attributes)
-        if inner
-            span.o-heading__inner
-                block
-        else
-            block
+        block
 
-mixin h2-heading(level)
-    - let classes = ['o-heading', 'o-heading--' + level]
+mixin h2-heading(level, display = false)
+    - let classes = ['o-heading', 'o-heading--' + level, { 'o-heading--display': display }]
     h2(class=classes)&attributes(attributes)
         block
 
-mixin h3-heading(level)
-    - let classes = ['o-heading', 'o-heading--' + level]
+mixin h3-heading(level, display = false)
+    - let classes = ['o-heading', 'o-heading--' + level, { 'o-heading--display': display }]
     h3(class=classes)&attributes(attributes)
         block
 
-mixin h4-heading(level)
-    - let classes = ['o-heading', 'o-heading--' + level]
+mixin h4-heading(level, display = false)
+    - let classes = ['o-heading', 'o-heading--' + level, { 'o-heading--display': display }]
     h4(class=classes)&attributes(attributes)
         block
 
-mixin h5-heading(level)
-    - let classes = ['o-heading', 'o-heading--' + level]
+mixin h5-heading(level, display = false)
+    - let classes = ['o-heading', 'o-heading--' + level, { 'o-heading--display': display }]
     h5(class=classes)&attributes(attributes)
         block
 
-mixin h6-heading(level)
-    - let classes = ['o-heading', 'o-heading--' + level]
+mixin h6-heading(level, display = false)
+    - let classes = ['o-heading', 'o-heading--' + level, { 'o-heading--display': display }]
     h6(class=classes)&attributes(attributes)
         block
 
-mixin div-heading(level, primary = false)
-    - let classes = ['o-heading', 'o-heading--' + level]
+mixin div-heading(level, display = false)
+    - let classes = ['o-heading', 'o-heading--' + level, { 'o-heading--display': display }]
     div(class=classes)&attributes(attributes)
-        if primary
-            span.o-heading__primary
-                block
-        else
-            block
+        block
diff --git a/tpl/views/heading.pug b/tpl/views/heading.pug
index 07080d5..bc16cee 100644
--- a/tpl/views/heading.pug
+++ b/tpl/views/heading.pug
@@ -9,17 +9,33 @@ mixin view-heading
             h6= 'H6 default'
 
         .c-box.s-headings
-            h1.u-mt-0: span.s-headings__primary= 'H1 styled'
+            h1.u-mt-0= 'H1 styled'
             h2= 'H2 styled'
             h3= 'H3 styled'
             h4= 'H4 styled'
             h5= 'H5 styled'
             h6= 'H6 styled'
 
+        .c-box.s-headings.s-headings--display
+            h1.u-mt-0= 'H1 display styled'
+            h2= 'H2 display styled'
+            h3= 'H3 display styled'
+            h4= 'H4 display styled'
+            h5= 'H5 display styled'
+            h6= 'H6 display styled'
+
         .c-box
-            +div-heading('xxl', true)(class='u-mt-0')= 'XXL Heading'
+            +div-heading('xxl')(class='u-mt-0')= 'XXL Heading'
             +div-heading('xl')= 'XL Heading'
             +div-heading('lg')= 'LG Heading'
             +div-heading('md')= 'MD Heading'
             +div-heading('sm')= 'SM Heading'
             +div-heading('xs')= 'XS Heading'
+
+        .c-box
+            +div-heading('xxl', true)(class='u-mt-0')= 'XXL display Heading'
+            +div-heading('xl', true)= 'XL display Heading'
+            +div-heading('lg', true)= 'LG display Heading'
+            +div-heading('md', true)= 'MD display Heading'
+            +div-heading('sm', true)= 'SM display Heading'
+            +div-heading('xs', true)= 'XS display Heading'