Improved bubbles

4 files changed, 41 insertions, 14 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);
+        }
     }
 }