Add static themes to action button

4 files changed, 40 insertions, 1 deletions

diff --git a/tpl/objects/action-button.pug b/tpl/objects/action-button.pug
index 976a646..c3a9b53 100644
--- a/tpl/objects/action-button.pug
+++ b/tpl/objects/action-button.pug
@@ -10,6 +10,9 @@ mixin action-button
             'o-action-button--icon':  !!attributes.icon && !block,
             'is-selected':            attributes.selected
         }
+        if (attributes.theme) {
+            classes['o-action-button--' + attributes.theme] = true
+        }
         if (attributes.size) {
             classes['o-action-button--' + attributes.size] = true
         }
diff --git a/tpl/objects/button.pug b/tpl/objects/button.pug
index 61ba0b6..b5fb8da 100644
--- a/tpl/objects/button.pug
+++ b/tpl/objects/button.pug
@@ -3,6 +3,7 @@ mixin a-button
         let classes = {
             'o-button':          true,
             'o-button--block':   attributes.block,
+            'o-button--primary': attributes.primary,
             'o-button--outline': attributes.outline,
             'o-button--round':   !!attributes.icon
         }
diff --git a/tpl/views/action-button.pug b/tpl/views/action-button.pug
index 2c94c68..8fbf9ea 100644
--- a/tpl/views/action-button.pug
+++ b/tpl/views/action-button.pug
@@ -85,3 +85,25 @@ mixin view-action-button
             +action-button(pill=true quiet=true disabled=true)= 'Disabled'
             = ' '
             +action-button(pill=true quiet=true selected=true disabled=true)= 'Selected + disabled'
+
+        each theme in ['static-black', 'static-white']
+            -
+                const bg = theme.startsWith('static-black') ? 500 : 1000;
+
+            .c-box(style=`background-color: var(--colors--blue-static--${bg});`)
+                +action-button(theme=theme)= 'Idle'
+                = ' '
+                +action-button(theme=theme selected=true)= 'Selected'
+                = ' '
+                +action-button(theme=theme disabled=true)= 'Disabled'
+                = ' '
+                +action-button(theme=theme selected=true disabled=true)= 'Selected + disabled'
+
+            .c-box(style=`background-color: var(--colors--blue-static--${bg});`)
+                +action-button(theme=theme quiet=true)= 'Idle'
+                = ' '
+                +action-button(theme=theme quiet=true selected=true)= 'Selected'
+                = ' '
+                +action-button(theme=theme quiet=true disabled=true)= 'Disabled'
+                = ' '
+                +action-button(theme=theme quiet=true selected=true disabled=true)= 'Selected + disabled'
diff --git a/tpl/views/button.pug b/tpl/views/button.pug
index c476d9b..eacf302 100644
--- a/tpl/views/button.pug
+++ b/tpl/views/button.pug
@@ -45,7 +45,7 @@ mixin view-button
                     +a-button(variant=theme outline=true icon='trash')
                     +a-button(variant=theme outline=true disabled=true icon='trash')
 
-        each theme in ['static-black', 'static-black-primary', 'static-white', 'static-white-primary']
+        each theme in ['static-black', 'static-white']
             -
                 const bg = theme.startsWith('static-black') ? 500 : 1000;
 
@@ -61,3 +61,16 @@ mixin view-button
                     +a-button(variant=theme disabled=true icon='trash')
                     +a-button(variant=theme outline=true icon='trash')
                     +a-button(variant=theme outline=true disabled=true icon='trash')
+
+            .c-box(style=`background-color: var(--colors--blue-static--${bg});`)
+                .l-button-group
+                    +a-button(variant=theme primary=true)= 'Button'
+                    +a-button(variant=theme primary=true disabled=true)= 'Button'
+                    +a-button(variant=theme primary=true outline=true)= 'Button'
+                    +a-button(variant=theme primary=true outline=true disabled=true)= 'Button'
+                br
+                .l-button-group
+                    +a-button(variant=theme primary=true icon='trash')
+                    +a-button(variant=theme primary=true disabled=true icon='trash')
+                    +a-button(variant=theme primary=true outline=true icon='trash')
+                    +a-button(variant=theme primary=true outline=true disabled=true icon='trash')