9 files changed, 134 insertions, 21 deletions

diff --git a/src/_apply-vars.scss b/src/_apply-vars.scss
index 9639a97..0bdc3a8 100644
--- a/src/_apply-vars.scss
+++ b/src/_apply-vars.scss
@@ -25,22 +25,42 @@
     @include iro.props-assign('palette-dark');
 }
 
+@include iro.bem-theme('hi') {
+    @include iro.props-assign('colors');
+    @include iro.props-assign('palette-light-hi');
+
+    @media (prefers-color-scheme: dark) {
+        @include iro.props-assign('colors-dark');
+        @include iro.props-assign('palette-dark-hi');
+    }
+}
+
+@include iro.bem-theme('lo') {
+    @include iro.props-assign('colors');
+    @include iro.props-assign('palette-light-lo');
+
+    @media (prefers-color-scheme: dark) {
+        @include iro.props-assign('colors-dark');
+        @include iro.props-assign('palette-dark-lo');
+    }
+}
+
 @include iro.bem-theme('raised') {
     @include iro.props-assign('colors');
-    @include iro.props-assign('palette-light-raised');
+    @include iro.props-assign('palette-light-hi');
 
     @media (prefers-color-scheme: dark) {
         @include iro.props-assign('colors-dark');
-        @include iro.props-assign('palette-dark-raised');
+        @include iro.props-assign('palette-dark-lo');
     }
 }
 
 @include iro.bem-theme('lowered') {
     @include iro.props-assign('colors');
-    @include iro.props-assign('palette-light-lowered');
+    @include iro.props-assign('palette-light-lo');
 
     @media (prefers-color-scheme: dark) {
         @include iro.props-assign('colors-dark');
-        @include iro.props-assign('palette-dark-lowered');
+        @include iro.props-assign('palette-dark-hi');
     }
 }
diff --git a/src/_declare-vars.scss b/src/_declare-vars.scss
index 0bcf101..883b753 100644
--- a/src/_declare-vars.scss
+++ b/src/_declare-vars.scss
@@ -148,21 +148,21 @@
 
 @include iro.props-store((
     --colors: (
-        --gray: fn.gray-palette(96%),
+        --gray: fn.gray-palette(100%),
     ),
-), 'palette-light');
+), 'palette-light-hi');
 
 @include iro.props-store((
     --colors: (
-        --gray: fn.gray-palette(100%),
+        --gray: fn.gray-palette(96%),
     ),
-), 'palette-light-raised');
+), 'palette-light');
 
 @include iro.props-store((
     --colors: (
         --gray: fn.gray-palette(91%),
     ),
-), 'palette-light-lowered');
+), 'palette-light-lo');
 
 //
 
@@ -187,21 +187,21 @@
 
 @include iro.props-store((
     --colors: (
-        --gray: fn.gray-palette(9%),
+        --gray: fn.gray-palette(6%),
     ),
-), 'palette-dark');
+), 'palette-dark-hi');
 
 @include iro.props-store((
     --colors: (
-        --gray: fn.gray-palette(13%),
+        --gray: fn.gray-palette(9%),
     ),
-), 'palette-dark-raised');
+), 'palette-dark');
 
 @include iro.props-store((
     --colors: (
-        --gray: fn.gray-palette(5%),
+        --gray: fn.gray-palette(13%),
     ),
-), 'palette-dark-lowered');
+), 'palette-dark-lo');
 
 //
 
diff --git a/src/_layouts.scss b/src/_layouts.scss
index 3a4c32b..331eb7e 100644
--- a/src/_layouts.scss
+++ b/src/_layouts.scss
@@ -4,3 +4,4 @@
 @use 'layouts/form';
 @use 'layouts/flex';
 @use 'layouts/overflow';
+@use 'layouts/bubble-group';
diff --git a/src/_objects.scss b/src/_objects.scss
index d01ed54..9a516ee 100644
--- a/src/_objects.scss
+++ b/src/_objects.scss
@@ -11,6 +11,7 @@
 @use 'objects/action-button';
 @use 'objects/status-indicator';
 @use 'objects/avatar';
+@use 'objects/bubble';
 @use 'objects/header';
 @use 'objects/sidebar';
 @use 'objects/action-menu';
diff --git a/src/_utils.scss b/src/_utils.scss
index aeb0812..860fe3e 100644
--- a/src/_utils.scss
+++ b/src/_utils.scss
@@ -104,9 +104,7 @@ $dirs: (
             margin#{$suffix}: fn.global-dim(--size --#{$size});
         }
     }
-}
-
-@each $dir, $suffix in $dirs {
+    
     @include iro.bem-utility('p#{$dir}-auto') {
         padding#{$suffix}: auto;
     }
@@ -116,4 +114,8 @@ $dirs: (
             padding#{$suffix}: fn.global-dim(--size --#{$size});
         }
     }
+    
+    @include iro.bem-utility('b#{$dir}-0') {
+        border#{$suffix}: 0;
+    }
 }
diff --git a/src/layouts/_bubble-group.scss b/src/layouts/_bubble-group.scss
new file mode 100644
index 0000000..4db70d0
--- /dev/null
+++ b/src/layouts/_bubble-group.scss
@@ -0,0 +1,38 @@
+@use 'iro-sass/src/index' as iro;
+@use '../functions' as fn;
+
+@include iro.props-namespace('bubble-group') {
+    @include iro.props-store((
+        --dims: (
+            --spacing-x: fn.global-dim(--size --225),
+            --spacing-y: fn.global-dim(--size --50),
+        )
+    ), 'dims');
+
+    @include iro.bem-layout(iro.props-namespace()) {
+        display:               grid;
+        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);
+        
+        @include iro.bem-elem('avatar') {
+            grid-area:    avatar;
+            position:     sticky;
+            top:          0;
+            justify-self: end;
+        
+            @include iro.bem-next-elem('bubble') {
+                &::before {
+                    display: block;
+                }
+            }
+        }
+        
+        @include iro.bem-elem('bubble') {
+            grid-column: bubble;
+        }
+    }
+}
diff --git a/src/objects/_action-menu.scss b/src/objects/_action-menu.scss
index 88e84d6..a3e1ca1 100644
--- a/src/objects/_action-menu.scss
+++ b/src/objects/_action-menu.scss
@@ -56,6 +56,7 @@
         transform:        translate(var(--x), var(--y));
         border:           fn.dim(--border) solid fn.color(--border);
         border-radius:    fn.dim(--rounding);
+        background-clip:  padding-box;
         background-color: fn.global-color(--bg);
         box-shadow:       fn.color(--shadow);
         color:            fn.global-color(--fg);
diff --git a/src/objects/_bubble.scss b/src/objects/_bubble.scss
new file mode 100644
index 0000000..26746fe
--- /dev/null
+++ b/src/objects/_bubble.scss
@@ -0,0 +1,48 @@
+@use 'iro-sass/src/index' as iro;
+@use '../functions' as fn;
+
+@include iro.props-namespace('bubble') {
+    @include iro.props-store((
+        --colors: (
+            --image-bg: fn.global-color(--obj),
+        ),
+    ), 'colors');
+
+    @include iro.props-store((
+        --dims: (
+            --pad-x:      fn.global-dim(--size --150),
+            --pad-y:      fn.global-dim(--size --85),
+            --rounding:   3px,
+            --arrow-size: fn.global-dim(--size --100),
+        )
+    ), 'dims');
+
+    @include iro.bem-object(iro.props-namespace()) {
+        position:         relative;
+        padding:          fn.dim(--pad-y) fn.dim(--pad-x);
+        border-radius:    fn.dim(--rounding);
+        background-color: fn.global-color(--bg);
+        color:            fn.global-color(--fg);
+
+        &::before {
+            content:             '';
+            display:             none;
+            position:            absolute;
+            top:                 0;
+            left:                calc(-1 * fn.dim(--arrow-size));
+            border:              fn.dim(--arrow-size) solid fn.global-color(--bg);
+            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);
+        }
+    }
+}
diff --git a/src/objects/_dialog.scss b/src/objects/_dialog.scss
index f6e8e63..094e09b 100644
--- a/src/objects/_dialog.scss
+++ b/src/objects/_dialog.scss
@@ -9,7 +9,7 @@
             --width-sm: iro.fn-px-to-rem(500px),
             --width-md: iro.fn-px-to-rem(800px),
             --width-lg: iro.fn-px-to-rem(1100px),
-            --rounding: 3px,
+            --rounding: 8px,
             --border:   1px,
 
             --body: (
@@ -28,7 +28,7 @@
 
     @include iro.props-store((
         --colors: (
-            --border: rgba(#000, .05),
+            --border: rgba(#000, .2),
             --shadow: 0 .2em .5em rgba(#000, .2),
 
             --sidebar: (
@@ -57,9 +57,11 @@
         max-width:             fn.dim(--width-md);
         margin:                0 auto;
         overflow:              hidden;
+        border:                fn.dim(--border) solid fn.color(--border);
         border-radius:         fn.dim(--rounding);
+        background-clip:       padding-box;
         background-color:      fn.global-color(--bg);
-        box-shadow:            0 0 0 1px fn.color(--border), fn.color(--shadow);
+        box-shadow:            fn.color(--shadow);
         color:                 fn.global-color(--fg);
 
         @include iro.bem-modifier('sm') {