Update

2 files changed, 31 insertions, 8 deletions

diff --git a/tpl/objects/card.pug b/tpl/objects/card.pug
index d7595d1..d622d3b 100644
--- a/tpl/objects/card.pug
+++ b/tpl/objects/card.pug
@@ -17,7 +17,16 @@ mixin card
             block
 
 mixin card-image
-    .o-card__image
+    -
+        let classes = {
+            'o-card__image': true,
+        }
+
+        if (attributes.class) {
+            classes[attributes.class] = true;
+        }
+
+    div(class=classes)
         img.o-card__image-img(src=attributes.src style=attributes.style)
 
 mixin card-body
@@ -34,6 +43,7 @@ mixin card-avatar
 mixin card-content 
     .o-card__content
         block
+
 mixin card-footer
     footer.o-card__footer
         block
diff --git a/tpl/objects/lightbox.pug b/tpl/objects/lightbox.pug
index 58abdae..02a3200 100644
--- a/tpl/objects/lightbox.pug
+++ b/tpl/objects/lightbox.pug
@@ -1,20 +1,33 @@
 include icon.pug
 
 mixin lightbox(images)
-    .o-lightbox 
+    -
+        let classes = {
+            'o-lightbox': true,
+        }
+        let linksClasses = {
+            's-links': true,
+        }
+
+        if (attributes.theme) {
+            classes[`o-lightbox--${attributes.theme}`] = true;
+            linksClasses[`s-links--${attributes.theme}`] = true;
+        }
+
+    div(class=classes)
         header.o-lightbox__header
-            .s-links.s-links--colored
+            div(class=linksClasses)
                 block
-            +action-button(round=true quiet=true icon='x' class='o-lightbox__close-btn')
+            +action-button(theme=attributes.theme pill=true quiet=true icon='x' class='o-lightbox__close-btn')
         each img, i in images
             img.o-lightbox__img(src=images[i] id='image-' + i)
-            +action-button(round=true quiet=true icon='chevron-left' class='o-lightbox__nav-btn o-lightbox__nav-btn--prev')
-            +action-button(round=true quiet=true icon='chevron-right' class='o-lightbox__nav-btn o-lightbox__nav-btn--next')
+            +action-button(theme=attributes.theme pill=true quiet=true icon='chevron-left' class='o-lightbox__nav-btn o-lightbox__nav-btn--prev')
+            +action-button(theme=attributes.theme pill=true quiet=true icon='chevron-right' class='o-lightbox__nav-btn o-lightbox__nav-btn--next')
 
         img.o-lightbox__img.o-lightbox__img--default(src=images[0])
         if images.length > 1
-            +action-button(round=true quiet=true icon='chevron-left' class='o-lightbox__nav-btn o-lightbox__nav-btn--prev')
-            +action-button(round=true quiet=true icon='chevron-right' class='o-lightbox__nav-btn o-lightbox__nav-btn--next')
+            +action-button(theme=attributes.theme pill=true quiet=true icon='chevron-left' class='o-lightbox__nav-btn o-lightbox__nav-btn--prev')
+            +action-button(theme=attributes.theme pill=true quiet=true icon='chevron-right' class='o-lightbox__nav-btn o-lightbox__nav-btn--next')
         .o-lightbox__thumbnails
             each img, i in images
                 - classes = i === 0 ? 'is-selected' : ''