5 files changed, 77 insertions, 27 deletions

diff --git a/tpl/index.pug b/tpl/index.pug
index a6e99dd..c4baa64 100644
--- a/tpl/index.pug
+++ b/tpl/index.pug
@@ -40,7 +40,7 @@ mixin view(id, title)
     -
         views.push({ id, title });
 
-    +container(narrow=true class='u-p-700 c-view' id=id)
+    +container(narrow=!attributes.wide class='u-p-700 c-view' id=id)
         +h1-heading('xl')(class='u-mt-0')= title
         +divider('medium')
         block
@@ -117,22 +117,22 @@ html
             +view-switch
             +view-form
             +view-action-button
-            +view-overflow-button
+            //+view-overflow-button
             +view-status-indicator
             +view-avatar
             +view-card
             +view-side-nav
             +view-popover
             +view-menu
-            +view-icon-nav
+            //+view-icon-nav
             +view-backdrop
-            +view-dialog
+            //+view-dialog
             +view-lightbox
-            +view-list-group
+            //+view-list-group
             +view-table
             +view-alert
-            +view-message
-            +view-message-group
+            //+view-message
+            //+view-message-group
 
         .c-sidebar.l-overflow.u-bie-1.u-p-100
             +side-nav
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' : ''
diff --git a/tpl/views/card.pug b/tpl/views/card.pug
index e466cdc..4871d30 100644
--- a/tpl/views/card.pug
+++ b/tpl/views/card.pug
@@ -1,5 +1,5 @@
 mixin view-card 
-    +view('card', 'Card')
+    +view('card', 'Card')(wide=true)
         .c-box(style={ display: 'flex', 'flex-direction': 'column', gap: '2em' })
             +card(href='#')
                 +card-image(src='Drawing_Half.png' style={ 'aspect-ratio': '21 / 9' })
@@ -44,11 +44,26 @@ mixin view-card
                         p= loremIpsum
                         p= loremIpsum
 
-        +divider('faint')
+        each layout in ['grid', 'masonry', 'masonry-h']
+            -
+                let quiet = true
 
-        .l-card-list.l-card-list--masonry
-            each img in ['Drawing_Half.png', '0000 Cover@0.5x.webp', 'avatar.png', '01 Design Cody.png', 'avatar.png', 'Drawing_Half.png']
-                +card(href='#' class='l-card-list__card')
-                    +card-image(src=img)
-                    +card-body
-                        +card-title= 'XS Heading'
+                let classes = {
+                    'l-card-list': true,
+                    'l-card-list--aspect-5/4': layout === 'grid',
+                    'l-card-list--quiet': quiet,
+                }
+                classes[`l-card-list--${layout}`] = true;
+
+
+            +divider('faint')(class='u-mb-700')
+
+            div(class=classes)
+                each img, i in ['Drawing_Half.png', '0000 Cover@0.5x.webp', 'avatar.png', '01 Design Cody.png', 'avatar.png', 'Drawing_Half.png']
+                    +card(quiet=quiet href='#' class='l-card-list__card')
+                        +card-image(src=img class='l-card-list__card-image')
+                        +card-body
+                            .l-media
+                                .l-media__block.l-media__block--main
+                                    h1.u-mbs-0= 'XS Heading'
+                                    small.u-c-mute-more= `Episode ${i + 1}`
diff --git a/tpl/views/lightbox.pug b/tpl/views/lightbox.pug
index 8169a35..4eb234a 100644
--- a/tpl/views/lightbox.pug
+++ b/tpl/views/lightbox.pug
@@ -1,8 +1,20 @@
 mixin view-lightbox 
     +view('lightbox', 'Lightbox')
         .c-box
-            +backdrop(class='t-media')
-                +lightbox(['avatar.png', 'ava_feralbot.png', 'volpeon_spooky.png'])
+            +lightbox(['avatar.png', 'ava_feralbot.png', 'volpeon_spooky.png'])
+                = "Let's try multiple links! "
+                a(href="https://mk.vulpes.one/files/3023f361-124a-4c80-bb69-9535e47c2925")
+                    = "https://mk.vulpes.one/files/3023f361-124a-4c80-bb69-9535e47c2925"
+                = ' '
+                a(href="https://mk.vulpes.one/files/741dcfd3-6a26-48ae-8985-d0c3ccca016c")
+                    = "https://mk.vulpes.one/files/741dcfd3-6a26-48ae-8985-d0c3ccca016c"
+                = ' '
+                a(href="https://mk.vulpes.one/files/081e0684-08dc-4a42-b810-b0ac63ec7d06")
+                    = "https://mk.vulpes.one/files/081e0684-08dc-4a42-b810-b0ac63ec7d06"
+
+        .c-box
+            +backdrop
+                +lightbox(['avatar.png', 'ava_feralbot.png', 'volpeon_spooky.png'])(theme='static-white')
                     = "Let's try multiple links! "
                     a(href="https://mk.vulpes.one/files/3023f361-124a-4c80-bb69-9535e47c2925")
                         = "https://mk.vulpes.one/files/3023f361-124a-4c80-bb69-9535e47c2925"
@@ -14,8 +26,8 @@ mixin view-lightbox
                         = "https://mk.vulpes.one/files/081e0684-08dc-4a42-b810-b0ac63ec7d06"
 
         .c-box
-            +backdrop(class='t-media')
-                +lightbox(['avatar.png'])
+            +backdrop
+                +lightbox(['avatar.png'])(theme='static-white')
                     = "Let's try multiple links! "
                     a(href="https://mk.vulpes.one/files/3023f361-124a-4c80-bb69-9535e47c2925")
                         = "https://mk.vulpes.one/files/3023f361-124a-4c80-bb69-9535e47c2925"