Added button

5 files changed, 235 insertions, 10 deletions

diff --git a/src/index.scss b/src/index.scss
index 292785d..1d21d45 100644
--- a/src/index.scss
+++ b/src/index.scss
@@ -8,6 +8,7 @@
 
 @import 'objects/heading';
 @import 'objects/rule';
+@import 'objects/button';
 
 :root {
     @include iro.props-assign;
@@ -24,6 +25,7 @@
 }
 
 @include iro.bem-theme('raised') {
+    @include iro.props-assign($root: --colors, $prefix: --colors);
     @include iro.props-assign('light-raised');
 
     @include iro.bem-multi('at-theme' 'grayscale', 'theme' 'grayscale') {
@@ -39,6 +41,7 @@
     }
 
     @include iro.bem-theme('raised') {
+        @include iro.props-assign('dark', $root: --colors, $prefix: --colors);
         @include iro.props-assign('dark-raised');
     
         @include iro.bem-multi('at-theme' 'grayscale', 'theme' 'grayscale') {
diff --git a/src/objects/_button.scss b/src/objects/_button.scss
new file mode 100644
index 0000000..5da1fbd
--- /dev/null
+++ b/src/objects/_button.scss
@@ -0,0 +1,173 @@
+@use 'iro-sass/src/index' as iro;
+@use '../vars';
+@use '../mixins/typography';
+
+@mixin button-variant($variant) {
+    border-color:     iro.props-get((--colors, --#{$variant}, --bg));
+    background-color: iro.props-get((--colors, --#{$variant}, --bg));
+    box-shadow:       iro.props-get((--colors, --#{$variant}, --shadow));
+    color:            iro.props-get((--colors, --#{$variant}, --label));
+
+    @include iro.bem-multi('&:link, &:visited', 'modifier' 'native') {
+        &:hover {
+            border-color:     iro.props-get((--colors, --#{$variant}, --hover, --bg));
+            background-color: iro.props-get((--colors, --#{$variant}, --hover, --bg));
+            box-shadow:       iro.props-get((--colors, --#{$variant}, --hover, --shadow));
+            color:            iro.props-get((--colors, --#{$variant}, --hover, --label));
+        }
+
+        &:active {
+            border-color:     iro.props-get((--colors, --#{$variant}, --active, --bg));
+            background-color: iro.props-get((--colors, --#{$variant}, --active, --bg));
+            box-shadow:       iro.props-get((--colors, --#{$variant}, --active, --shadow));
+            color:            iro.props-get((--colors, --#{$variant}, --active, --label));
+        }
+    }
+
+    @include iro.bem-modifier('outline') {
+        background-color: transparent;
+        box-shadow:       none;
+        color:            iro.props-get((--colors, --#{$variant}, --outline-label));
+    }
+}
+
+@include iro.props-namespace('button') {
+    @include iro.props-store((
+        --dims: (
+            --padding-x: 1.2rem,
+            --padding-y: .5rem,
+            --rounding:  10em,
+        ),
+        --colors: (
+            --any: (
+                --disabled: (
+                    --bg:     iro.props-get(--colors --obj-hi, $global: true),
+                    --label:  iro.props-get(--colors --fg-hi3, $global: true),
+                    --shadow: 0 0 0 0 transparent,
+                ),
+                --key-focus: (
+                    --bg:     transparent,
+                    --label:  iro.props-get(--colors --accent --primary-lo2, $global: true),
+                    --border: iro.props-get(--colors --focus --fill, $global: true),
+                    --shadow: iro.props-get(--colors --focus --shadow, $global: true),
+                ),
+            ),
+            --accent: (
+                --bg:            iro.props-get(--colors --accent --primary, $global: true),
+                --label:         iro.props-get(--colors --accent --primary-fg, $global: true),
+                --outline-label: iro.props-get(--colors --accent --primary-lo2, $global: true),
+                --shadow:        0 0 0 0 transparent,
+
+                --hover: (
+                    --bg:     iro.props-get(--colors --accent --primary-lo, $global: true),
+                    --label:  iro.props-get(--colors --accent --primary-fg, $global: true),
+                    --shadow: 0 0 0 0 transparent,
+                ),
+                --active: (
+                    --bg:     iro.props-get(--colors --accent --primary-lo2, $global: true),
+                    --label:  iro.props-get(--colors --accent --primary-fg, $global: true),
+                    --shadow: 0 0 0 0 transparent,
+                ),
+            ),
+            --primary: (
+                --bg:            iro.props-get(--colors --fg, $global: true),
+                --label:         iro.props-get(--colors --bg-hi2, $global: true),
+                --outline-label: iro.props-get(--colors --fg, $global: true),
+                --shadow:        0 0 0 0 transparent,
+
+                --hover: (
+                    --bg:     iro.props-get(--colors --fg-lo, $global: true),
+                    --label:  iro.props-get(--colors --bg-hi2, $global: true),
+                    --shadow: 0 0 0 0 transparent,
+                ),
+                --active: (
+                    --bg:     iro.props-get(--colors --fg-lo, $global: true),
+                    --label:  iro.props-get(--colors --bg-hi2, $global: true),
+                    --shadow: 0 0 0 0 transparent,
+                ),
+            ),
+            --secondary: (
+                --bg:            iro.props-get(--colors --obj-hi, $global: true),
+                --label:         iro.props-get(--colors --fg, $global: true),
+                --outline-label: iro.props-get(--colors --fg, $global: true),
+                --shadow:        0 0 0 0 transparent,
+
+                --hover: (
+                    --bg:     iro.props-get(--colors --obj, $global: true),
+                    --label:  iro.props-get(--colors --fg-lo, $global: true),
+                    --shadow: 0 0 0 0 transparent,
+                ),
+                --active: (
+                    --bg:     iro.props-get(--colors --obj-lo, $global: true),
+                    --label:  iro.props-get(--colors --fg-lo, $global: true),
+                    --shadow: 0 0 0 0 transparent,
+                ),
+            ),
+        ),
+    ));
+
+    @include iro.bem-object(iro.props-namespace()) {
+        @include typography.set-font(vars.$font--main, (weight: 500));
+
+        display:         inline-block;
+        padding:         iro.props-get(--dims --padding-y) iro.props-get(--dims --padding-x);
+        border:          2px solid transparent;
+        border-radius:   iro.props-get(--dims --rounding);
+        line-height:     1;
+        text-align:      center;
+        text-decoration: none;
+    
+        @include iro.bem-modifier('block') {
+            display: block;
+        }
+    
+        @include iro.bem-modifier('native') {
+            @include iro.bem-modifier('block') {
+                box-sizing: border-box;
+                width:      100%;
+            }
+        }
+    
+        @include button-variant('secondary');
+    
+        @each $mod in ('accent' 'primary' 'secondary') {
+            @if $mod != 'secondary' {
+                @include iro.bem-modifier($mod) {
+                    // sass-lint:disable-block function-name-format
+                    @include button-variant($mod);
+                }
+            }
+        }
+
+        @include iro.bem-at-theme('keyboard') {
+            &:focus {
+                border-color:     iro.props-get(--colors --any --key-focus --border);
+                background-color: iro.props-get(--colors --any --key-focus --bg);
+                box-shadow:       iro.props-get(--colors --any --key-focus --shadow);
+                color:            iro.props-get(--colors --any --key-focus --label);
+            }
+        }
+    
+        @include iro.bem-is('disabled') {
+            border-color:     iro.props-get(--colors --any --disabled --bg);
+            background-color: iro.props-get(--colors --any --disabled --bg);
+            box-shadow:       iro.props-get(--colors --any --disabled --shadow);
+            color:            iro.props-get(--colors --any --disabled --label);
+    
+            @include iro.bem-multi('&:link, &:visited', 'modifier' 'native') {
+                &:hover,
+                &:active {
+                    border-color:     iro.props-get(--colors --any --disabled --bg);
+                    background-color: iro.props-get(--colors --any --disabled --bg);
+                    box-shadow:       iro.props-get(--colors --any --disabled --shadow);
+                    color:            iro.props-get(--colors --any --disabled --label);
+                }
+            }
+    
+            @include iro.bem-modifier('outline') {
+                background-color: transparent;
+                box-shadow:       none;
+            }
+        }
+    }
+}
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