10 files changed, 61 insertions, 37 deletions

diff --git a/src/objects/_action-menu.scss b/src/objects/_action-menu.scss
index a3e1ca1..3943252 100644
--- a/src/objects/_action-menu.scss
+++ b/src/objects/_action-menu.scss
@@ -117,7 +117,7 @@
         @include iro.bem-elem('icon-slot') {
             display:         flex;
             justify-content: center;
-            width:           1em;
+            width:           1.2em;
         }
     }
 }
diff --git a/src/objects/_avatar.scss b/src/objects/_avatar.scss
index 5a65fbf..526912f 100644
--- a/src/objects/_avatar.scss
+++ b/src/objects/_avatar.scss
@@ -21,6 +21,11 @@
 @include iro.props-namespace('avatar') {
     @include iro.props-store((
         --dims: (
+            --150: (
+                --size:           fn.global-dim(--size --600),
+                --font-size:      fn.global-dim(--font-size --150),
+                --indicator-size: fn.global-dim(--size --175),
+            ),
             --100: (
                 --size:           fn.global-dim(--size --450),
                 --font-size:      fn.global-dim(--font-size --100),
@@ -89,27 +94,17 @@
             }
         }
 
-        @include iro.bem-modifier('75') {
-            font-size: fn.dim(--75 --font-size);
-
-            @include status(75);
-
-            @include iro.bem-elem('content') {
-                width:       fn.dim(--75 --size);
-                height:      fn.dim(--75 --size);
-                line-height: fn.dim(--75 --size);
-            }
-        }
-
-        @include iro.bem-modifier('50') {
-            font-size: fn.dim(--50 --font-size);
-
-            @include status(50);
-
-            @include iro.bem-elem('content') {
-                width:       fn.dim(--50 --size);
-                height:      fn.dim(--50 --size);
-                line-height: fn.dim(--50 --size);
+        @each $size in 50 75 150 {
+            @include iro.bem-modifier($size) {
+                font-size: fn.dim(--#{$size} --font-size);
+    
+                @include status($size);
+    
+                @include iro.bem-elem('content') {
+                    width:       fn.dim(--#{$size} --size);
+                    height:      fn.dim(--#{$size} --size);
+                    line-height: fn.dim(--#{$size} --size);
+                }
             }
         }
     }
diff --git a/src/objects/_icon.scss b/src/objects/_icon.scss
index e613ec2..12baeba 100644
--- a/src/objects/_icon.scss
+++ b/src/objects/_icon.scss
@@ -1,11 +1,19 @@
 @use 'iro-sass/src/index' as iro;
+@use '../functions' as fn;
 
 @include iro.props-namespace('icon') {
+    @include iro.props-store((
+        --dims: (
+            --stroke: 1.5px,
+            --size:   calc(1 / 14 * 16em),
+        )
+    ), 'dims');
+
     @include iro.bem-object(iro.props-namespace()) {
         display:         inline-block;
-        width:           1em;
-        height:          1em;
-        stroke-width:    var(--icon-stroke-width, 1.5px);
+        width:           fn.dim(--size);
+        height:          fn.dim(--size);
+        stroke-width:    fn.dim(--stroke);
         stroke-linecap:  round;
         stroke-linejoin: round;
         vertical-align:  -.12em;
diff --git a/tpl/objects/backdrop.pug b/tpl/objects/backdrop.pug
index cbe8866..227700c 100644
--- a/tpl/objects/backdrop.pug
+++ b/tpl/objects/backdrop.pug
@@ -8,5 +8,10 @@ mixin backdrop
             classes[attributes.class] = true;
         }
 
-    div(class=classes, style={ width: '100%', 'min-height': '5em', 'max-height': '40em' })
+        let styles = { width: '100%', 'min-height': '5em', 'max-height': '40em' }
+        if (attributes.pad) {
+            styles['padding'] = '2em';
+        }
+
+    div(class=classes, style=styles)
         block
diff --git a/tpl/objects/bubble-group.pug b/tpl/objects/bubble-group.pug
index a1a8c00..e6a6d19 100644
--- a/tpl/objects/bubble-group.pug
+++ b/tpl/objects/bubble-group.pug
@@ -10,6 +10,6 @@ mixin bubble-group(user)
         }
 
     section(class=classes)
-        .l-bubble-group__avatar.u-sticky-top
+        .l-bubble-group__avatar.u-p-sticky-top
             +avatar= user.slice(0, 2)
         block
diff --git a/tpl/objects/bubble.pug b/tpl/objects/bubble.pug
index bec6e9e..d04f06b 100644
--- a/tpl/objects/bubble.pug
+++ b/tpl/objects/bubble.pug
@@ -43,7 +43,7 @@ mixin bubble(user)
     article(class=classes)
         if user && attributes.avatar
             .l-media.l-media--flush.l-flex--align-start
-                .l-media__block.u-mt-50.u-sticky-top
+                .l-media__block.u-mt-50.u-p-sticky-top
                     +avatar= user.slice(0, 2)
                 .l-media__block.l-media__block--main
                     +content
diff --git a/tpl/objects/dialog.pug b/tpl/objects/dialog.pug
index 95aa41c..ece0d67 100644
--- a/tpl/objects/dialog.pug
+++ b/tpl/objects/dialog.pug
@@ -40,7 +40,7 @@ mixin dialog(title)
                 if slots['sidebar-header']
                     - slots['sidebar-header']()
                 else
-                    +div-heading('sm')(class='o-dialog__title l-media__block l-media__block--main')= attributes.sidebarTitle
+                    +div-heading('xl')(class='o-dialog__title u-mt-0 l-media__block l-media__block--main')= attributes.sidebarTitle
 
         if slots.sidebar
             .o-dialog__sidebar.l-overflow
@@ -51,7 +51,7 @@ mixin dialog(title)
                 - slots.header()
             else
                 if title
-                    +div-heading('sm')(class='o-dialog__title l-media__block l-media__block--main')= title
+                    +div-heading('xl')(class='o-dialog__title u-mt-0 l-media__block l-media__block--main')= title
             +action-button(round=true quiet=true icon='x' class='o-dialog__close-btn l-media__block')
 
         section(class=bodyClass)
diff --git a/tpl/objects/icon.pug b/tpl/objects/icon.pug
index 67bcf37..98d51ad 100644
--- a/tpl/objects/icon.pug
+++ b/tpl/objects/icon.pug
@@ -9,5 +9,5 @@ mixin icon(id)
             classes[attributes.class] = true;
         }
 
-    svg(class=classes width='1em' height='1em')
+    svg(class=classes)
         use(href=href)
diff --git a/tpl/views/avatar.pug b/tpl/views/avatar.pug
index 01aaf93..7941649 100644
--- a/tpl/views/avatar.pug
+++ b/tpl/views/avatar.pug
@@ -2,6 +2,14 @@ mixin view-avatar
     +view('avatar', 'Avatar')
         .c-box
             div(style={ display: 'flex', gap: '.3em' })
+                +avatar(size='150' hue=180)
+                    = 'Vo'
+                +avatar(size='150' hue=225)
+                    = 'lp'
+                +avatar(size='150' src='avatar.png')
+            br
+            br
+            div(style={ display: 'flex', gap: '.3em' })
                 +avatar
                     = 'Vo'
                 +avatar(status='green' hue=45)
@@ -28,6 +36,14 @@ mixin view-avatar
 
         .c-box
             div(style={ display: 'flex', gap: '.3em' })
+                +avatar(circle=true size='150' hue=180)
+                    = 'Vo'
+                +avatar(circle=true size='150' hue=225)
+                    = 'lp'
+                +avatar(circle=true size='150' src='avatar.png')
+            br
+            br
+            div(style={ display: 'flex', gap: '.3em' })
                 +avatar(circle=true)
                     = 'Vo'
                 +avatar(circle=true status='green' hue=45)
diff --git a/tpl/views/dialog.pug b/tpl/views/dialog.pug
index 9d6061d..6ef06df 100644
--- a/tpl/views/dialog.pug
+++ b/tpl/views/dialog.pug
@@ -1,13 +1,13 @@
 mixin view-dialog 
     +view('dialog', 'Dialog')
         .c-box
-            +backdrop
+            +backdrop(pad=true)
                 +dialog('Lorem ipsum')(flat=true)
                     +slot('body')
                         = loremIpsum
 
         .c-box
-            +backdrop
+            +backdrop(pad=true)
                 +dialog('Lorem ipsum')(bodyClass='l-overflow')
                     +slot('body')
                         p.u-mt-0= loremIpsum
@@ -17,7 +17,7 @@ mixin view-dialog
                         p= loremIpsum
 
         .c-box
-            +backdrop
+            +backdrop(pad=true)
                 +dialog('Tags')(sidebarTitle='#channel')
                     +slot('sidebar')
                         +menu(style={ 'min-width': '10em' })
@@ -28,7 +28,7 @@ mixin view-dialog
                         p.u-mt-0= loremIpsum
 
         .c-box
-            +backdrop
+            +backdrop(pad=true)
                 +dialog('#channel')
                     +slot('sidebar')
                         +menu(style={ 'min-width': '10em' })
@@ -39,14 +39,14 @@ mixin view-dialog
                         p.u-mt-0= loremIpsum
 
         .c-box
-            +backdrop
+            +backdrop(pad=true)
                 +dialog
                     +slot('header')
                         .l-media__block.l-flex
                             +action-button(quiet=true icon='chevron-left')
                             +action-button(quiet=true icon='chevron-right')
                         .l-media__block.l-media__block--main
-                            +div-heading('sm')= 'Tags'
+                            +div-heading('xl')(class="u-mt-0")= 'Tags'
                     +slot('sidebar')
                         +menu(style={ 'min-width': '10em' })
                             +menu-item(icon='bookmark')= 'Bookmark'