3 files changed, 59 insertions, 10 deletions

diff --git a/tpl/index.pug b/tpl/index.pug
index c63e9f1..47dbc55 100644
--- a/tpl/index.pug
+++ b/tpl/index.pug
@@ -2,13 +2,14 @@
     let loremIpsum = 'Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat'
 
 include layouts/container.pug
+
 include objects/heading.pug
 include objects/rule.pug
+include objects/button.pug
 
-mixin box
-    .t-raised
-        +container(padH=true padV=true inPage=true themed=true)
-            block
+mixin box 
+    +container(padX=true padY=true inPage=true theme="raised")
+        block
 
 
 doctype html
@@ -17,11 +18,11 @@ html
         meta(charset='utf-8')
         meta(name='viewport' content='width=device-width, initial-scale=1')
         title iro-design
-        link(rel="stylesheet", href="style.css")
-        script(src="script.js") 
+        link(rel="stylesheet" href="style.css")
+        script(src="script.js")
 
     body(class='t-lighter')
-        +container(padH=true padV=true narrow=true)
+        +container(padX=true padY=true narrow=true)
 
             +h1-heading(level='xl')= 'Heading'
             +rule(level='medium')
@@ -58,3 +59,35 @@ html
                 +rule(level='strong')= 'Strong'
                 +rule(level='medium')= 'Medium'
                 +rule(level='faint')= 'Faint'
+
+            //-----------------------------------------
+
+            +h1-heading(level='xl')= 'Button'
+            +rule(level='medium')
+
+            +box
+                +a-button(variant='accent')= 'Button'
+                = ' '
+                +a-button(variant='accent' disabled=true)= 'Button'
+                = ' '
+                +a-button(variant='accent' outline=true)= 'Button'
+                = ' '
+                +a-button(variant='accent' outline=true disabled=true)= 'Button'
+                br
+                br
+                +a-button(variant='primary')= 'Button'
+                = ' '
+                +a-button(variant='primary' disabled=true)= 'Button'
+                = ' '
+                +a-button(variant='primary' outline=true)= 'Button'
+                = ' '
+                +a-button(variant='primary' outline=true disabled=true)= 'Button'
+                br
+                br
+                +a-button(variant='secondary')= 'Button'
+                = ' '
+                +a-button(variant='secondary' disabled=true)= 'Button'
+                = ' '
+                +a-button(variant='secondary' outline=true)= 'Button'
+                = ' '
+                +a-button(variant='secondary' outline=true disabled=true)= 'Button'
diff --git a/tpl/layouts/container.pug b/tpl/layouts/container.pug
index 9dde2d6..c64de11 100644
--- a/tpl/layouts/container.pug
+++ b/tpl/layouts/container.pug
@@ -2,12 +2,12 @@ mixin container
     -
         let classes = {
             'l-container':            true,
-            'l-container--pad-h':     attributes.padH,
-            'l-container--pad-v':     attributes.padV,
+            'l-container--pad-x':     attributes.padX,
+            'l-container--pad-y':     attributes.padY,
             'l-container--narrow':    attributes.narrow,
             'l-container--sm-narrow': attributes.smNarrow,
             'l-container--in-page':   attributes.inPage,
-            'l-container--themed':    attributes.themed
+            'l-container--themed':    !!attributes.theme
         }
         if (!!attributes.theme) {
             classes['t-' + attributes.theme] = true
diff --git a/tpl/objects/button.pug b/tpl/objects/button.pug
new file mode 100644
index 0000000..243ff58
--- /dev/null
+++ b/tpl/objects/button.pug
@@ -0,0 +1,16 @@
+mixin a-button
+    -
+        let classes = {
+            'o-button':          true,
+            'o-button--block':   attributes.block,
+            'o-button--outline': attributes.outline,
+            'is-disabled':       attributes.disabled
+        }
+        if (attributes.variant) {
+            classes['o-button--' + attributes.variant] = true
+        }
+
+        let href = attributes.disabled ? null : '#';
+
+    a(class=classes href=href)
+        block