Improved bubbles

8 files changed, 127 insertions, 44 deletions

diff --git a/src/_apply-vars.scss b/src/_apply-vars.scss
index 0bdc3a8..052eeb0 100644
--- a/src/_apply-vars.scss
+++ b/src/_apply-vars.scss
@@ -25,6 +25,16 @@
     @include iro.props-assign('palette-dark');
 }
 
+@include iro.bem-theme('def') {
+    @include iro.props-assign('colors');
+    @include iro.props-assign('palette-light');
+
+    @media (prefers-color-scheme: dark) {
+        @include iro.props-assign('colors-dark');
+        @include iro.props-assign('palette-dark');
+    }
+}
+
 @include iro.bem-theme('hi') {
     @include iro.props-assign('colors');
     @include iro.props-assign('palette-light-hi');
diff --git a/src/_declare-vars.scss b/src/_declare-vars.scss
index 883b753..c28cbb2 100644
--- a/src/_declare-vars.scss
+++ b/src/_declare-vars.scss
@@ -187,7 +187,7 @@
 
 @include iro.props-store((
     --colors: (
-        --gray: fn.gray-palette(6%),
+        --gray: fn.gray-palette(5%),
     ),
 ), 'palette-dark-hi');
 
diff --git a/src/layouts/_bubble-group.scss b/src/layouts/_bubble-group.scss
index 4db70d0..7593881 100644
--- a/src/layouts/_bubble-group.scss
+++ b/src/layouts/_bubble-group.scss
@@ -14,7 +14,6 @@
         grid-template-columns: auto 1fr;
         grid-auto-rows:        auto;
         grid-template-areas:   'avatar bubble';
-        justify-items:         start;
         align-items:           flex-start;
         gap:                   fn.dim(--spacing-y) fn.dim(--spacing-x);
         
@@ -23,16 +22,24 @@
             position:     sticky;
             top:          0;
             justify-self: end;
-        
-            @include iro.bem-next-elem('bubble') {
-                &::before {
-                    display: block;
-                }
-            }
         }
         
         @include iro.bem-elem('bubble') {
             grid-column: bubble;
         }
+        
+        @include iro.bem-modifier('compact') {
+            justify-items: start;
+        }
+        
+        @include iro.bem-modifier('arrow') {
+            @include iro.bem-elem('avatar') {
+                @include iro.bem-next-elem('bubble') {
+                    &::before {
+                        display: block;
+                    }
+                }
+            }
+        }
     }
 }
diff --git a/src/objects/_bubble.scss b/src/objects/_bubble.scss
index 26746fe..41b26ff 100644
--- a/src/objects/_bubble.scss
+++ b/src/objects/_bubble.scss
@@ -10,15 +10,24 @@
 
     @include iro.props-store((
         --dims: (
-            --pad-x:      fn.global-dim(--size --150),
-            --pad-y:      fn.global-dim(--size --85),
+            --pad-x:      fn.global-dim(--size --200),
+            --pad-y:      fn.global-dim(--size --150),
             --rounding:   3px,
             --arrow-size: fn.global-dim(--size --100),
+            --spacing:    fn.global-dim(--size --100),
+
+            --compact: (
+                --pad-x: fn.global-dim(--size --150),
+                --pad-y: fn.global-dim(--size --85),
+            ),
         )
     ), 'dims');
 
     @include iro.bem-object(iro.props-namespace()) {
+        display:          flex;
         position:         relative;
+        flex-direction:   column;
+        gap:              fn.dim(--spacing);
         padding:          fn.dim(--pad-y) fn.dim(--pad-x);
         border-radius:    fn.dim(--rounding);
         background-color: fn.global-color(--bg);
@@ -34,15 +43,16 @@
             border-bottom-color: transparent;
             border-left-color:   transparent;
         }
-
-        @include iro.bem-elem('user') {
-            display: block;
-        }
         
         @include iro.bem-elem('time') {
             margin-left: 1em;
             float:       right;
             transform:   translate(.2em, .2em);
         }
+        
+        @include iro.bem-modifier('compact') {
+            gap:     0;
+            padding: fn.dim(--compact --pad-y) fn.dim(--compact --pad-x);
+        }
     }
 }
diff --git a/tpl/objects/bubble-group.pug b/tpl/objects/bubble-group.pug
index c2e502a..2b960f0 100644
--- a/tpl/objects/bubble-group.pug
+++ b/tpl/objects/bubble-group.pug
@@ -1,16 +1,9 @@
 mixin bubble-group(user)
     -
-        let first = true 
-
-    mixin bubble-group-bubble(time)
-        +bubble(time, first ? user : undefined)(class='l-bubble-group__bubble')
-            block
-        -
-            first = false
-
-    -
         let classes = {
-            'l-bubble-group': true
+            'l-bubble-group':          true,
+            'l-bubble-group--compact': attributes.compact,
+            'l-bubble-group--arrow':   attributes.arrow
         }
         if (attributes.class) {
             classes[attributes.class] = true
diff --git a/tpl/objects/bubble.pug b/tpl/objects/bubble.pug
index a79f119..681661c 100644
--- a/tpl/objects/bubble.pug
+++ b/tpl/objects/bubble.pug
@@ -1,21 +1,36 @@
-mixin bubble(time, user)
+mixin bubble(user)
+    - const slots = {}
+
+    mixin slot(key)
+        - slots[key] = block
+
     -
+        block ? block() : undefined
+
         let classes = {
-            'o-bubble': true,
-            't-raised':         true
+            'o-bubble':          true,
+            'o-bubble--compact': attributes.compact,
+            't-raised':          !attributes.theme
         }
         if (attributes.class) {
             classes[attributes.class] = true
         }
+        if (attributes.theme) {
+            classes[attributes.theme] = true
+        }
 
     article(class=classes)
-        if user
-            header.o-bubble__user
+        if slots.header
+            header.o-bubble__header
+                - slots.header()
+        else if user
+            header.o-bubble__header
                 strong= user
-        span.s-colored-links
-            block
-        small.o-bubble__time
-            = time
-            if attributes.scope
-                = ' '
-                +icon(attributes.scope)
+        div.o-bubble__body.s-colored-links
+            - slots.body()
+            if slots.time
+                small.o-bubble__time
+                    - slots.time()
+        if slots.footer
+            footer.o-bubble__footer
+                - slots.footer()
diff --git a/tpl/views/bubble-group.pug b/tpl/views/bubble-group.pug
index 6f057c0..ec7d025 100644
--- a/tpl/views/bubble-group.pug
+++ b/tpl/views/bubble-group.pug
@@ -1,9 +1,40 @@
 mixin view-bubble-group
     +view('bubble-group', 'Bubble group')
-        .c-box.l-overflow(style='max-height: 13em')
+        .c-box.l-overflow(style='max-height: 15em')
+            +bubble-group('Volpeon')(compact=true arrow=true)
+                +bubble('Volpeon')(compact=true class='l-bubble-group__bubble')
+                    +slot('body')= 'Compact bubbles test'
+                    +slot('time')= '12:34'
+                +bubble()(compact=true class='l-bubble-group__bubble')
+                    +slot('body')= loremIpsum
+                    +slot('time')= '12:35'
+                +bubble()(compact=true class='l-bubble-group__bubble')
+                    +slot('body')= 'qwertzuiop'
+                    +slot('time')= '12:36'
+                +bubble()(compact=true class='l-bubble-group__bubble')
+                    +slot('body')= '🐈️🦊️'
+                    +slot('time')= '12:38'
+                +bubble()(compact=true class='l-bubble-group__bubble')
+                    +slot('body')= loremIpsum
+                    +slot('time')= '12:39'
+
+        .c-box.l-overflow(style='max-height: 15em')
             +bubble-group('Volpeon')
-                +bubble-group-bubble('12:34')= loremIpsum
-                +bubble-group-bubble('12:35')= loremIpsum
-                +bubble-group-bubble('12:36')= loremIpsum
-                +bubble-group-bubble('12:38')= loremIpsum
-                +bubble-group-bubble('12:39')= loremIpsum
+                +bubble()(class='l-bubble-group__bubble')
+                    +slot('header')
+                        .l-card.l-card--flush
+                            .l-card__block.l-card__block--main
+                                strong= 'Volpeon'
+                                small.u-ml-100= '@volpeon@mk.vulpes.one'
+                            small.l-card__block
+                                = '5 minutes ago'
+                                +icon('lock')(class='u-ml-100')
+                    +slot('body')= 'Full width bubbles test'
+                +bubble()(class='l-bubble-group__bubble')
+                    +slot('body')= loremIpsum
+                +bubble()(class='l-bubble-group__bubble')
+                    +slot('body')= 'qwertzuiop'
+                +bubble()(class='l-bubble-group__bubble')
+                    +slot('body')= '🐈️🦊️'
+                +bubble()(class='l-bubble-group__bubble')
+                    +slot('body')= loremIpsum
diff --git a/tpl/views/bubble.pug b/tpl/views/bubble.pug
index 037398f..5e53f5b 100644
--- a/tpl/views/bubble.pug
+++ b/tpl/views/bubble.pug
@@ -1,7 +1,24 @@
 mixin view-bubble
     +view('bubble', 'Bubble')
         .c-box
-            +bubble('12:34', 'Volpeon')= loremIpsum
+            +bubble('Volpeon')(compact=true)
+                +slot('body')= loremIpsum
+                +slot('time')
+                    = '12:34'
+                    +icon('lock')(class='u-ml-100')
+
+        .c-box.u-themed.t-hi
+            +bubble()(compact=true theme='t-def')
+                +slot('body')= loremIpsum
 
         .c-box
-            +bubble('12:34', 'Volpeon')(scope='lock')= loremIpsum
+            +bubble()
+                +slot('header')
+                    .l-card.l-card--flush
+                        .l-card__block.l-card__block--main
+                            strong= 'Volpeon'
+                            small.u-ml-100= '@volpeon@mk.vulpes.one'
+                        small.l-card__block
+                            = '5 minutes ago'
+                            +icon('lock')(class='u-ml-100')
+                +slot('body')= loremIpsum