Added backdrop and dialog

6 files changed, 108 insertions, 76 deletions

diff --git a/tpl/index.pug b/tpl/index.pug
index 510e09b..0b74ed8 100644
--- a/tpl/index.pug
+++ b/tpl/index.pug
@@ -17,6 +17,8 @@ include objects/status-indicator.pug
 include objects/avatar.pug
 include objects/action-menu.pug
 include objects/menu.pug
+include objects/backdrop.pug
+include objects/dialog.pug
 
 mixin box 
     +container(padX=true padY=true inPage=true theme="raised")
@@ -44,46 +46,46 @@ html
     body
         +container(padX=true padY=true narrow=true)
 
-            +h1-heading(level='xl')= 'Heading'
-            +rule(level='medium')
+            +h1-heading('xl')= 'Heading'
+            +rule('medium')
 
             +box
-                +div-heading(level='xxl')= 'XXL Heading'
-                +div-heading(level='xl')= 'XL Heading'
-                +div-heading(level='lg')= 'LG Heading'
-                +div-heading(level='md')= 'MD Heading'
-                +div-heading(level='sm')= 'SM Heading'
-                +div-heading(level='xs')= 'XS Heading'
+                +div-heading('xxl')= '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'
 
             //-----------------------------------------
 
-            +h1-heading(level='xl')= 'Rule'
-            +rule(level='medium')
+            +h1-heading('xl')= 'Rule'
+            +rule('medium')
 
             +box
-                +div-heading(level='lg')= 'Heading'
-                +rule(level='strong')
+                +div-heading('lg')= 'Heading'
+                +rule('strong')
                 p= loremIpsum
 
             +box
-                +div-heading(level='sm')= 'Heading'
-                +rule(level='medium')
+                +div-heading('sm')= 'Heading'
+                +rule('medium')
                 p= loremIpsum
 
             +box
-                +div-heading(level='xs')= 'Heading'
-                +rule(level='faint')
+                +div-heading('xs')= 'Heading'
+                +rule('faint')
                 p= loremIpsum
 
             +box
-                +rule(level='strong')= 'Strong'
-                +rule(level='medium')= 'Medium'
-                +rule(level='faint')= 'Faint'
+                +rule('strong')= 'Strong'
+                +rule('medium')= 'Medium'
+                +rule('faint')= 'Faint'
 
             //-----------------------------------------
 
-            +h1-heading(level='xl')= 'Button'
-            +rule(level='medium')
+            +h1-heading('xl')= 'Button'
+            +rule('medium')
 
             +box
                 +a-button(variant='accent')= 'Button'
@@ -114,8 +116,8 @@ html
 
             //-----------------------------------------
 
-            +h1-heading(level='xl')= 'Text field'
-            +rule(level='medium')
+            +h1-heading('xl')= 'Text field'
+            +rule('medium')
 
             +box
                 +text-field(placeholder='Placeholder')
@@ -143,8 +145,8 @@ html
 
             //-----------------------------------------
 
-            +h1-heading(level='xl')= 'Field label'
-            +rule(level='medium')
+            +h1-heading('xl')= 'Field label'
+            +rule('medium')
 
             +box
                 +field-label('First name')
@@ -220,8 +222,8 @@ html
 
             //-----------------------------------------
 
-            +h1-heading(level='xl')= 'Radio'
-            +rule(level='medium')
+            +h1-heading('xl')= 'Radio'
+            +rule('medium')
 
             +box
                 +radio(name="radio-demo-1")= 'Cats'
@@ -242,8 +244,8 @@ html
 
             //-----------------------------------------
 
-            +h1-heading(level='xl')= 'Checkbox'
-            +rule(level='medium')
+            +h1-heading('xl')= 'Checkbox'
+            +rule('medium')
 
             +box
                 +checkbox(indeterminate=true)= 'Cats'
@@ -264,8 +266,8 @@ html
 
             //-----------------------------------------
 
-            +h1-heading(level='xl')= 'Switch'
-            +rule(level='medium')
+            +h1-heading('xl')= 'Switch'
+            +rule('medium')
 
             +box
                 +switch= 'Cats'
@@ -286,8 +288,8 @@ html
 
             //-----------------------------------------
 
-            +h1-heading(level='xl')= 'Form'
-            +rule(level='medium')
+            +h1-heading('xl')= 'Form'
+            +rule('medium')
 
             +box
                 +form(labelsAlign="left")
@@ -319,8 +321,8 @@ html
 
             //-----------------------------------------
 
-            +h1-heading(level='xl')= 'Action button'
-            +rule(level='medium')
+            +h1-heading('xl')= 'Action button'
+            +rule('medium')
 
             +box
                 +action-button= 'Idle'
@@ -378,8 +380,8 @@ html
 
             //-----------------------------------------
 
-            +h1-heading(level='xl')= 'Status indicator'
-            +rule(level='medium')
+            +h1-heading('xl')= 'Status indicator'
+            +rule('medium')
 
             +box
                 +status-indicator
@@ -392,8 +394,8 @@ html
 
             //-----------------------------------------
 
-            +h1-heading(level='xl')= 'Avatar'
-            +rule(level='medium')
+            +h1-heading('xl')= 'Avatar'
+            +rule('medium')
 
             +box
                 div(style={ display: 'flex', gap: '.3em' })
@@ -449,8 +451,8 @@ html
 
             //-----------------------------------------
 
-            +h1-heading(level='xl')= 'Action menu'
-            +rule(level='medium')
+            +h1-heading('xl')= 'Action menu'
+            +rule('medium')
 
             +box
                 div(style={ display: 'flex', 'flex-direction': 'column', 'align-items': 'flex-start' })
@@ -472,8 +474,8 @@ html
 
             //-----------------------------------------
 
-            +h1-heading(level='xl')= 'Menu'
-            +rule(level='medium')
+            +h1-heading('xl')= 'Menu'
+            +rule('medium')
 
             +box
                 div(style={ display: 'flex', gap: '3rem' })
@@ -516,4 +518,22 @@ html
                         +menu-item
                             +user-card('johndoe', 270)
 
+            //-----------------------------------------
+
+            +h1-heading('xl')= 'Backdrop'
+            +rule('medium')
+
+            +box
+                +backdrop
+
+            //-----------------------------------------
+
+            +h1-heading('xl')= 'Dialog'
+            +rule('medium')
+
+            +box
+                +backdrop
+                    +dialog('Lorem ipsum')
+                        = loremIpsum
+
 
diff --git a/tpl/objects/action-menu.pug b/tpl/objects/action-menu.pug
index 8c1a584..e8cecb2 100644
--- a/tpl/objects/action-menu.pug
+++ b/tpl/objects/action-menu.pug
@@ -2,14 +2,7 @@ include icon.pug
 include status-indicator.pug
 
 mixin action-menu
-    -
-        let classes = {
-            'o-action-menu':         true,
-            'o-action-menu--static': true,
-            't-raised':              true
-        }
-
-    div(class=classes)
+    .o-action-menu.u-ps.t-raised
         block
 
 mixin action-menu-item
diff --git a/tpl/objects/backdrop.pug b/tpl/objects/backdrop.pug
new file mode 100644
index 0000000..6ad72d7
--- /dev/null
+++ b/tpl/objects/backdrop.pug
@@ -0,0 +1,3 @@
+mixin backdrop
+    .o-backdrop.u-ps(style={ width: '100%', 'min-height': '5em' })
+        block
diff --git a/tpl/objects/dialog.pug b/tpl/objects/dialog.pug
new file mode 100644
index 0000000..2cbbd4f
--- /dev/null
+++ b/tpl/objects/dialog.pug
@@ -0,0 +1,16 @@
+include rule.pug
+include button.pug
+include heading.pug
+
+mixin dialog(title)
+    .o-dialog.t-raised
+        header.o-dialog__header
+            +div-heading('lg')(class='o-dialog__title')
+                = title
+        +rule('medium')
+        section.o-dialog__body
+            block
+        footer.o-dialog__footer
+            +a-button(outline=true)= 'Cancel'
+            = ' '
+            +a-button(outline=true variant='primary')= 'Continue'
diff --git a/tpl/objects/heading.pug b/tpl/objects/heading.pug
index 546df43..a0de4af 100644
--- a/tpl/objects/heading.pug
+++ b/tpl/objects/heading.pug
@@ -1,34 +1,34 @@
-mixin h1-heading
-    - let classes = ['o-heading', 'o-heading--' + attributes.level]
-    h1(class=classes)
+mixin h1-heading(level)
+    - let classes = ['o-heading', 'o-heading--' + level]
+    h1(class=classes)&attributes(attributes)
         block
 
-mixin h2-heading
-    - let classes = ['o-heading', 'o-heading--' + attributes.level]
-    h2(class=classes)
+mixin h2-heading(level)
+    - let classes = ['o-heading', 'o-heading--' + level]
+    h2(class=classes)&attributes(attributes)
         block
 
-mixin h3-heading
-    - let classes = ['o-heading', 'o-heading--' + attributes.level]
-    h3(class=classes)
+mixin h3-heading(level)
+    - let classes = ['o-heading', 'o-heading--' + level]
+    h3(class=classes)&attributes(attributes)
         block
 
-mixin h4-heading
-    - let classes = ['o-heading', 'o-heading--' + attributes.level]
-    h4(class=classes)
+mixin h4-heading(level)
+    - let classes = ['o-heading', 'o-heading--' + level]
+    h4(class=classes)&attributes(attributes)
         block
 
-mixin h5-heading
-    - let classes = ['o-heading', 'o-heading--' + attributes.level]
-    h5(class=classes)
+mixin h5-heading(level)
+    - let classes = ['o-heading', 'o-heading--' + level]
+    h5(class=classes)&attributes(attributes)
         block
 
-mixin h6-heading
-    - let classes = ['o-heading', 'o-heading--' + attributes.level]
-    h6(class=classes)
+mixin h6-heading(level)
+    - let classes = ['o-heading', 'o-heading--' + level]
+    h6(class=classes)&attributes(attributes)
         block
 
-mixin div-heading
-    - let classes = ['o-heading', 'o-heading--' + attributes.level]
-    div(class=classes)
+mixin div-heading(level)
+    - let classes = ['o-heading', 'o-heading--' + level]
+    div(class=classes)&attributes(attributes)
         block
diff --git a/tpl/objects/rule.pug b/tpl/objects/rule.pug
index 958ff18..63a039f 100644
--- a/tpl/objects/rule.pug
+++ b/tpl/objects/rule.pug
@@ -1,10 +1,10 @@
-mixin rule
+mixin rule(level)
     -
         let classes = {
-            'o-rule':           true,
-            'o-rule--labelled': !!block
+            'o-rule':             true,
+            'o-rule--labelled':   !!block,
+            ['o-rule--' + level]: true
         }
-        classes['o-rule--' + attributes.level] = true
 
     div(class=classes)
         if block