From 511a47c8964c43927563ee88b62b3f215bf9b7d1 Mon Sep 17 00:00:00 2001
From: Volpeon <git@volpeon.ink>
Date: Mon, 28 Mar 2022 20:25:21 +0200
Subject: Update

---
 src/_declare-vars.scss       |  4 +--
 src/_objects.scss            |  2 --
 src/_utils.scss              | 16 ++++++-----
 src/layouts/_container.scss  | 65 ++++---------------------------------------
 src/objects/_alert.scss      |  4 +--
 src/objects/_checkbox.scss   | 32 ++++++++++-----------
 src/objects/_dialog.scss     | 66 +++++++++++++++++++++++++++++---------------
 src/objects/_divider.scss    | 12 ++++----
 src/objects/_header.scss     | 31 ---------------------
 src/objects/_lightbox.scss   |  2 +-
 src/objects/_radio.scss      | 18 ++++++------
 src/objects/_sidebar.scss    | 36 ------------------------
 src/objects/_switch.scss     | 18 ++++++------
 src/objects/_text-field.scss | 10 +++----
 tpl/index.pug                |  6 ++--
 tpl/layouts/container.pug    |  8 ++----
 tpl/objects/bubble.pug       |  8 +++---
 tpl/objects/dialog.pug       | 35 ++++++++++++++++-------
 tpl/objects/header.pug       | 12 --------
 tpl/objects/icon.pug         |  4 +--
 tpl/objects/sidebar.pug      | 12 --------
 tpl/views/dialog.pug         | 17 +++++-------
 22 files changed, 149 insertions(+), 269 deletions(-)
 delete mode 100644 src/objects/_header.scss
 delete mode 100644 src/objects/_sidebar.scss
 delete mode 100644 tpl/objects/header.pug
 delete mode 100644 tpl/objects/sidebar.pug

diff --git a/src/_declare-vars.scss b/src/_declare-vars.scss
index c28cbb2..89d10fe 100644
--- a/src/_declare-vars.scss
+++ b/src/_declare-vars.scss
@@ -79,7 +79,7 @@
             --400: iro.fn-px-to-rem(28px),
         ),
 
-        --border-width: (
+        --border: (
             --thick:  4px,
             --medium: 2px,
             --thin:   1px,
@@ -160,7 +160,7 @@
 
 @include iro.props-store((
     --colors: (
-        --gray: fn.gray-palette(91%),
+        --gray: fn.gray-palette(92%),
     ),
 ), 'palette-light-lo');
 
diff --git a/src/_objects.scss b/src/_objects.scss
index 9a516ee..e2551ad 100644
--- a/src/_objects.scss
+++ b/src/_objects.scss
@@ -12,8 +12,6 @@
 @use 'objects/status-indicator';
 @use 'objects/avatar';
 @use 'objects/bubble';
-@use 'objects/header';
-@use 'objects/sidebar';
 @use 'objects/action-menu';
 @use 'objects/menu';
 @use 'objects/backdrop';
diff --git a/src/_utils.scss b/src/_utils.scss
index c0bc087..4aea27c 100644
--- a/src/_utils.scss
+++ b/src/_utils.scss
@@ -103,18 +103,16 @@ $dirs: (
     @include iro.bem-utility('m#{$dir}-auto') {
         margin#{$suffix}: auto;
     }
-
-    @each $size in (0 10 50 100 200 400) {
-        @include iro.bem-utility('m#{$dir}-#{$size}') {
-            margin#{$suffix}: fn.global-dim(--size --#{$size});
-        }
-    }
     
     @include iro.bem-utility('p#{$dir}-auto') {
         padding#{$suffix}: auto;
     }
 
-    @each $size in (0 10 50 100 200 400) {
+    @each $size in (0 10 50 75 100 125 200 400 700) {
+        @include iro.bem-utility('m#{$dir}-#{$size}') {
+            margin#{$suffix}: fn.global-dim(--size --#{$size});
+        }
+        
         @include iro.bem-utility('p#{$dir}-#{$size}') {
             padding#{$suffix}: fn.global-dim(--size --#{$size});
         }
@@ -123,4 +121,8 @@ $dirs: (
     @include iro.bem-utility('b#{$dir}-0') {
         border#{$suffix}: 0;
     }
+    
+    @include iro.bem-utility('b#{$dir}-1') {
+        border#{$suffix}: 1px solid fn.global-color(--obj);
+    }
 }
diff --git a/src/layouts/_container.scss b/src/layouts/_container.scss
index 3f81758..521262d 100644
--- a/src/layouts/_container.scss
+++ b/src/layouts/_container.scss
@@ -5,77 +5,22 @@
 @include iro.props-namespace('container') {
     @include iro.props-store((
         --dims: (
-            --content-width:     iro.fn-px-to-rem(700px),
-            --sm-content-width:  iro.fn-px-to-rem(360px),
-            --pad-x:             fn.global-dim(--size --700),
-            --pad-y:             fn.global-dim(--size --700),
+            --width:    iro.fn-px-to-rem(700px),
+            --width-50: iro.fn-px-to-rem(360px),
         )
     ), 'dims');
 
     @include iro.bem-layout(iro.props-namespace()) {
-        overflow: hidden;
-
-        @include iro.bem-elem('inner') {
-            margin-top:    calc(-1 * fn.global-dim(--size --700));
-            margin-bottom: calc(-1 * fn.global-dim(--size --700));
-
-            &::before,
-            &::after {
-                content: '';
-                display: block;
-                width:   0;
-                height:  0;
-            }
-
-            &::before {
-                margin-bottom: fn.global-dim(--size --700);
-            }
-
-            &::after {
-                margin-top: fn.global-dim(--size --700);
-            }
-        }
-
-        @include iro.bem-modifier('pad-x') {
-            padding-right: fn.dim(--pad-x);
-            padding-left:  fn.dim(--pad-x);
-        }
-
-        @include iro.bem-modifier('pad-y') {
-            padding-top:    fn.dim(--pad-y);
-            padding-bottom: fn.dim(--pad-y);
-        }
-
         @include iro.bem-modifier('narrow') {
-            max-width:    fn.dim(--content-width);
+            max-width:    fn.dim(--width);
             margin-right: auto;
             margin-left:  auto;
-
-            @each $breakpoint in map-keys(media.$breakpoints) {
-                @include media.media('<=#{$breakpoint}') {
-                    @include iro.bem-suffix('#{$breakpoint}-down') {
-                        max-width:    fn.dim(--content-width);
-                        margin-right: auto;
-                        margin-left:  auto;
-                    }
-                }
-            }
         }
 
-        @include iro.bem-modifier('sm-narrow') {
-            max-width:    fn.dim(--sm-content-width);
+        @include iro.bem-modifier('narrow-50') {
+            max-width:    fn.dim(--width-50);
             margin-right: auto;
             margin-left:  auto;
-
-            @each $breakpoint in map-keys(media.$breakpoints) {
-                @include media.media('<=#{$breakpoint}') {
-                    @include iro.bem-suffix('#{$breakpoint}-down') {
-                        max-width:    fn.dim(--sm-content-width);
-                        margin-right: auto;
-                        margin-left:  auto;
-                    }
-                }
-            }
         }
     }
 }
diff --git a/src/objects/_alert.scss b/src/objects/_alert.scss
index 0bb8485..3b4656e 100644
--- a/src/objects/_alert.scss
+++ b/src/objects/_alert.scss
@@ -4,7 +4,7 @@
 @include iro.props-namespace('alert') {
     @include iro.props-store((
         --dims: (
-            --border-width: 2px,
+            --border: 2px,
             --pad-x:        fn.global-dim(--size --250),
             --pad-y:        fn.global-dim(--size --250),
             --rounding:     4px,
@@ -24,7 +24,7 @@
 
     @include iro.bem-object(iro.props-namespace()) {
         padding:          fn.dim(--pad-y) fn.dim(--pad-x);
-        border:           fn.dim(--border-width) solid fn.color(--border);
+        border:           fn.dim(--border) solid fn.color(--border);
         border-radius:    fn.dim(--rounding);
         background-color: fn.color(--bg);
         color:            fn.global-color(--fg);
diff --git a/src/objects/_checkbox.scss b/src/objects/_checkbox.scss
index 412efda..5443354 100644
--- a/src/objects/_checkbox.scss
+++ b/src/objects/_checkbox.scss
@@ -4,11 +4,11 @@
 @include iro.props-namespace('checkbox') {
     @include iro.props-store((
         --dims: (
-            --size:         fn.global-dim(--size --175),
-            --label-gap:    fn.global-dim(--size --125),
-            --border-width: fn.global-dim(--border-width --medium),
-            --pad-x:        fn.global-dim(--size --65),
-            --pad-y:        fn.global-dim(--size --65),
+            --size:      fn.global-dim(--size --175),
+            --label-gap: fn.global-dim(--size --125),
+            --border:    fn.global-dim(--border --medium),
+            --pad-x:     fn.global-dim(--size --65),
+            --pad-y:     fn.global-dim(--size --65),
         ),
     ), 'dims');
 
@@ -56,7 +56,7 @@
             width:            fn.dim(--size);
             height:           fn.dim(--size);
             margin-top:       calc(.5 * (fn.global-dim(--font --standard --line-height) * 1em - fn.dim(--size)));
-            border-radius:    fn.dim(--border-width);
+            border-radius:    fn.dim(--border);
             background-color: fn.color(--box-border);
     
             &::before,
@@ -68,10 +68,10 @@
     
             &::before {
                 z-index:          2;
-                top:              fn.dim(--border-width);
-                left:             fn.dim(--border-width);
-                width:            calc(fn.dim(--size) - 2 * fn.dim(--border-width));
-                height:           calc(fn.dim(--size) - 2 * fn.dim(--border-width));
+                top:              fn.dim(--border);
+                left:             fn.dim(--border);
+                width:            calc(fn.dim(--size) - 2 * fn.dim(--border));
+                height:           calc(fn.dim(--size) - 2 * fn.dim(--border));
                 transition:       transform .2s ease;
                 background-color: fn.color(--box-bg);
             }
@@ -79,9 +79,9 @@
             &::after {
                 z-index:       3;
                 top:           calc(.5 * fn.dim(--size) - 1px);
-                left:          calc(1.5 * fn.dim(--border-width));
+                left:          calc(1.5 * fn.dim(--border));
                 box-sizing:    border-box;
-                width:         calc(fn.dim(--size) - 3 * fn.dim(--border-width));
+                width:         calc(fn.dim(--size) - 3 * fn.dim(--border));
                 height:        0;
                 transform:     scale(0);
                 transition:    transform .2s ease;
@@ -96,10 +96,10 @@
             display:          block;
             position:         absolute;
             z-index:          2;
-            top:              calc(1 * fn.dim(--border-width));
-            left:             calc(1 * fn.dim(--border-width));
-            width:            calc(100% - 2 * fn.dim(--border-width));
-            height:           calc(100% - 2 * fn.dim(--border-width));
+            top:              calc(1 * fn.dim(--border));
+            left:             calc(1 * fn.dim(--border));
+            width:            calc(100% - 2 * fn.dim(--border));
+            height:           calc(100% - 2 * fn.dim(--border));
             transform:        scale(0);
             transform-origin: 40% 90%;
             transition:       transform .2s ease;
diff --git a/src/objects/_dialog.scss b/src/objects/_dialog.scss
index 094e09b..ac77a66 100644
--- a/src/objects/_dialog.scss
+++ b/src/objects/_dialog.scss
@@ -1,8 +1,6 @@
 @use 'iro-sass/src/index' as iro;
 @use '../functions' as fn;
 
-@use 'header';
-
 @include iro.props-namespace('dialog') {
     @include iro.props-store((
         --dims: (
@@ -12,6 +10,16 @@
             --rounding: 8px,
             --border:   1px,
 
+            --header: (
+                --pad-x: fn.global-dim(--size --75),
+                --pad-y: fn.global-dim(--size --75),
+            ),
+
+            --sidebar: (
+                --pad-x: fn.global-dim(--size --75),
+                --pad-y: fn.global-dim(--size --75),
+            ),
+
             --body: (
                 --pad-x: fn.global-dim(--size --200),
                 --pad-y: fn.global-dim(--size --200),
@@ -28,18 +36,15 @@
 
     @include iro.props-store((
         --colors: (
-            --border: rgba(#000, .2),
-            --shadow: 0 .2em .5em rgba(#000, .2),
-
-            --sidebar: (
-                --border: fn.global-color(--obj),
-            ),
+            --outer-border: rgba(#000, .2),
+            --inner-border: fn.global-color(--obj),
+            --shadow:       0 .2em .5em rgba(#000, .2),
         ),
     ), 'colors');
 
     @include iro.props-store((
         --colors: (
-            --border: rgba(#fff, .2),
+            --outer-border: rgba(#fff, .2),
         ),
     ), 'colors-dark');
 
@@ -57,7 +62,7 @@
         max-width:             fn.dim(--width-md);
         margin:                0 auto;
         overflow:              hidden;
-        border:                fn.dim(--border) solid fn.color(--border);
+        border:                fn.dim(--border) solid fn.color(--outer-border);
         border-radius:         fn.dim(--rounding);
         background-clip:       padding-box;
         background-color:      fn.global-color(--bg);
@@ -72,29 +77,34 @@
             max-width: fn.dim(--width-lg);
         }
 
-        @include iro.bem-elem('sidebar-header') {
-            grid-area:    sidebar-header;
-            border-right: 1px solid fn.color(--sidebar --border);
-
-            @include iro.bem-sibling-elem('header') {
-                grid-area: header;
+        @include iro.bem-elem('header') {
+            grid-area:     sidebar-header / sidebar-header / header / header;
+            padding:       fn.dim(--header --pad-y) fn.dim(--header --pad-x);
+            border-bottom: 1px solid fn.color(--inner-border);
+
+            @include iro.bem-modifier('sidebar') {
+                grid-area:    sidebar-header;
+                border-right: 1px solid fn.color(--inner-border);
+    
+                @include iro.bem-sibling-elem('header') {
+                    grid-area: header;
+                }
             }
         }
 
-        @include iro.bem-elem('header') {
-            grid-area: sidebar-header / sidebar-header / header / header;
+        @include iro.bem-elem('title') {
+            padding-right: calc(fn.dim(--body --pad-x) - fn.dim(--header --pad-x));
+            padding-left:  calc(fn.dim(--body --pad-x) - fn.dim(--header --pad-x));
         }
 
         @include iro.bem-elem('close-btn') {
             margin-left: auto;
         }
 
-        @include iro.bem-elem('label') {
-            padding: 0 calc(fn.dim(--body --pad-x) - fn.foreign-dim(--header, --pad-x));
-        }
-
         @include iro.bem-elem('sidebar') {
-            grid-area: sidebar;
+            grid-area:    sidebar;
+            padding:      fn.dim(--sidebar --pad-y) fn.dim(--sidebar --pad-x);
+            border-right: 1px solid fn.color(--inner-border);
         }
 
         @include iro.bem-elem('body') {
@@ -108,5 +118,15 @@
             justify-content: flex-end;
             padding:         fn.dim(--body --pad-y) fn.dim(--body --pad-x);
         }
+
+        @include iro.bem-modifier('flat') {
+            @include iro.bem-elem('header') {
+                border-bottom: 0;
+            }
+
+            @include iro.bem-elem('body') {
+                padding-top: 0;
+            }
+        }
     }
 }
diff --git a/src/objects/_divider.scss b/src/objects/_divider.scss
index cef598f..9764ddb 100644
--- a/src/objects/_divider.scss
+++ b/src/objects/_divider.scss
@@ -7,15 +7,15 @@
             --margin-y: fn.global-dim(--size --85),
     
             --strong: (
-                --border-width:    fn.global-dim(--border-width --thick),
+                --border:          fn.global-dim(--border --thick),
                 --label-font-size: fn.global-dim(--font-size --100),
             ),
             --medium: (
-                --border-width:    fn.global-dim(--border-width --medium),
+                --border:          fn.global-dim(--border --medium),
                 --label-font-size: fn.global-dim(--font-size --75),
             ),
             --faint: (
-                --border-width:    fn.global-dim(--border-width --thin),
+                --border:          fn.global-dim(--border --thin),
                 --label-font-size: fn.global-dim(--font-size --50),
             ),
         ),
@@ -40,7 +40,7 @@
 
     @include iro.bem-object(iro.props-namespace()) {
         display:          block;
-        height:           fn.dim(--strong --border-width);
+        height:           fn.dim(--strong --border);
         margin-top:       fn.dim(--margin-y);
         margin-bottom:    fn.dim(--margin-y);
         background-color: fn.color(--strong --bg);
@@ -55,12 +55,12 @@
         }
 
         @include iro.bem-modifier('medium') {
-            height:           fn.dim(--medium --border-width);
+            height:           fn.dim(--medium --border);
             background-color: fn.color(--medium --bg);
         }
 
         @include iro.bem-modifier('faint') {
-            height:           fn.dim(--faint --border-width);
+            height:           fn.dim(--faint --border);
             background-color: fn.color(--faint --bg);
         }
 
diff --git a/src/objects/_header.scss b/src/objects/_header.scss
deleted file mode 100644
index 773d584..0000000
--- a/src/objects/_header.scss
+++ /dev/null
@@ -1,31 +0,0 @@
-@use 'iro-sass/src/index' as iro;
-@use '../functions' as fn;
-
-@include iro.props-namespace('header') {
-    @include iro.props-store((
-        --dims: (
-            --pad-x: fn.global-dim(--size --75),
-            --pad-y: fn.global-dim(--size --75)
-        ),
-    ), 'dims');
-
-    @include iro.props-store((
-        --colors: (
-            --border: fn.global-color(--obj),
-        ),
-    ), 'colors');
-
-    @include iro.bem-object(iro.props-namespace()) {
-        border-bottom: 1px solid fn.color(--border);
-
-        @include iro.bem-elem('content') {
-            display:          flex;
-            box-sizing:       border-box;
-            align-items:      center;
-            height:           100%;
-            padding:          fn.dim(--pad-y) fn.dim(--pad-x);
-            background-color: fn.global-color(--bg);
-            color:            fn.global-color(--fg);
-        }
-    }
-}
diff --git a/src/objects/_lightbox.scss b/src/objects/_lightbox.scss
index 435ff88..131db29 100644
--- a/src/objects/_lightbox.scss
+++ b/src/objects/_lightbox.scss
@@ -12,7 +12,7 @@
             --thumbnail: (
                 --size:     fn.global-dim(--size --800),
                 --spacing:  fn.global-dim(--size --100),
-                --selected: 2px, //fn.global-dim(--border-width --medium),
+                --selected: 2px, //fn.global-dim(--border --medium),
             ),
             --button: (
                 --font-size: fn.global-dim(--font-size --200),
diff --git a/src/objects/_radio.scss b/src/objects/_radio.scss
index c740833..65dfa66 100644
--- a/src/objects/_radio.scss
+++ b/src/objects/_radio.scss
@@ -4,11 +4,11 @@
 @include iro.props-namespace('radio') {
     @include iro.props-store((
         --dims: (
-            --diameter:     calc(fn.global-dim(--size --175) + 1px),
-            --label-gap:    fn.global-dim(--size --125),
-            --border-width: fn.global-dim(--border-width --medium),
-            --pad-x:        fn.global-dim(--size --65),
-            --pad-y:        fn.global-dim(--size --65),
+            --diameter:  calc(fn.global-dim(--size --175) + 1px),
+            --label-gap: fn.global-dim(--size --125),
+            --border:    fn.global-dim(--border --medium),
+            --pad-x:     fn.global-dim(--size --65),
+            --pad-y:     fn.global-dim(--size --65),
         ),
     ), 'dims');
 
@@ -63,10 +63,10 @@
                 content:          '';
                 display:          block;
                 position:         relative;
-                top:              fn.dim(--border-width);
-                left:             fn.dim(--border-width);
-                width:            calc(fn.dim(--diameter) - 2 * fn.dim(--border-width));
-                height:           calc(fn.dim(--diameter) - 2 * fn.dim(--border-width));
+                top:              fn.dim(--border);
+                left:             fn.dim(--border);
+                width:            calc(fn.dim(--diameter) - 2 * fn.dim(--border));
+                height:           calc(fn.dim(--diameter) - 2 * fn.dim(--border));
                 transition:       transform .2s ease;
                 border-radius:    fn.dim(--diameter);
                 background-color: fn.color(--circle-bg);
diff --git a/src/objects/_sidebar.scss b/src/objects/_sidebar.scss
deleted file mode 100644
index bf8dd59..0000000
--- a/src/objects/_sidebar.scss
+++ /dev/null
@@ -1,36 +0,0 @@
-@use 'iro-sass/src/index' as iro;
-@use '../functions' as fn;
-
-@include iro.props-namespace('sidebar') {
-    @include iro.props-store((
-        --dims: (
-            --pad-x: fn.global-dim(--size --75),
-            --pad-y: fn.global-dim(--size --75)
-        ),
-    ), 'dims');
-
-    @include iro.props-store((
-        --colors: (
-            --border: fn.global-color(--obj),
-        ),
-    ), 'colors');
-
-    @include iro.bem-object(iro.props-namespace()) {
-        border-width: 0 1px 0 0;
-        border-style: solid;
-        border-color: fn.color(--border);
-
-        @include iro.bem-elem('content') {
-            box-sizing:       border-box;
-            height:           100%;
-            padding:          fn.dim(--pad-y) fn.dim(--pad-x);
-            background-color: fn.global-color(--bg);
-            color:            fn.global-color(--fg);
-        }
-
-        @include iro.bem-modifier('right') {
-            border-right-width: 0;
-            border-left-width:  1px;
-        }
-    }
-}
diff --git a/src/objects/_switch.scss b/src/objects/_switch.scss
index a818bde..ad39115 100644
--- a/src/objects/_switch.scss
+++ b/src/objects/_switch.scss
@@ -4,12 +4,12 @@
 @include iro.props-namespace('switch') {
     @include iro.props-store((
         --dims: (
-            --width:        fn.global-dim(--size --325),
-            --height:       calc(fn.global-dim(--size --175) + 1px),
-            --label-gap:    fn.global-dim(--size --125),
-            --border-width: fn.global-dim(--border-width --medium),
-            --pad-x:        fn.global-dim(--size --65),
-            --pad-y:        fn.global-dim(--size --65),
+            --width:     fn.global-dim(--size --325),
+            --height:    calc(fn.global-dim(--size --175) + 1px),
+            --label-gap: fn.global-dim(--size --125),
+            --border:    fn.global-dim(--border --medium),
+            --pad-x:     fn.global-dim(--size --65),
+            --pad-y:     fn.global-dim(--size --65),
         ),
     ), 'dims');
 
@@ -67,10 +67,10 @@
             &::after {
                 content:          '';
                 display:          block;
-                width:            calc(fn.dim(--height) - 2 * fn.dim(--border-width));
-                height:           calc(fn.dim(--height) - 2 * fn.dim(--border-width));
+                width:            calc(fn.dim(--height) - 2 * fn.dim(--border));
+                height:           calc(fn.dim(--height) - 2 * fn.dim(--border));
                 transition:       transform .2s ease;
-                border:           fn.dim(--border-width) solid fn.color(--handle-border);
+                border:           fn.dim(--border) solid fn.color(--handle-border);
                 border-radius:    fn.dim(--width);
                 background-color: fn.color(--handle-bg);
             }
diff --git a/src/objects/_text-field.scss b/src/objects/_text-field.scss
index 1e18f0a..643e8d9 100644
--- a/src/objects/_text-field.scss
+++ b/src/objects/_text-field.scss
@@ -34,7 +34,7 @@
         --dims: (
             --pad-x:         fn.global-dim(--size --125),
             --pad-y:         fn.global-dim(--size --125),
-            --border-width:  fn.global-dim(--border-width --thin),
+            --border:        fn.global-dim(--border --thin),
             --border-radius: 2px,
 
             --extended: (
@@ -43,7 +43,7 @@
             ),
 
             --focus: (
-                --border-width:  fn.global-dim(--border-width --medium),
+                --border:  fn.global-dim(--border --medium),
             )
         ),
     ), 'dims');
@@ -93,7 +93,7 @@
 
     @include iro.bem-object(iro.props-namespace()) {
         $line-height:         1.4;
-        $focus-border-offset: calc(fn.dim(--border-width) - fn.dim(--focus --border-width));
+        $focus-border-offset: calc(fn.dim(--border) - fn.dim(--focus --border));
 
         position:         relative;
         min-width:        0;
@@ -107,7 +107,7 @@
             right:            0;
             bottom:           0;
             left:             0;
-            border:           fn.dim(--border-width) solid fn.color(--border);
+            border:           fn.dim(--border) solid fn.color(--border);
             border-radius:    fn.dim(--border-radius);
             box-shadow:       fn.color(--shadow);
             pointer-events:   none;
@@ -143,7 +143,7 @@
                     right:         $focus-border-offset;
                     bottom:        $focus-border-offset;
                     left:          $focus-border-offset;
-                    border:        fn.dim(--focus --border-width) solid fn.color(--focus --border);
+                    border:        fn.dim(--focus --border) solid fn.color(--focus --border);
                     border-radius: calc(fn.dim(--border-radius) - $focus-border-offset);
                     box-shadow:    fn.color(--focus --shadow);
                 }
diff --git a/tpl/index.pug b/tpl/index.pug
index 6ff502c..4ed1ae3 100644
--- a/tpl/index.pug
+++ b/tpl/index.pug
@@ -27,8 +27,6 @@ include objects/lightbox.pug
 include objects/list-group.pug
 include objects/table.pug
 include objects/alert.pug
-include objects/header.pug
-include objects/sidebar.pug
 include objects/bubble.pug
 include objects/bubble-group.pug
 
@@ -36,7 +34,7 @@ mixin view(id, title)
     -
         views.push({ id, title });
 
-    +container(padX=true padY=true narrow=true class='c-view' id=id)
+    +container(narrow=true class='u-p-700 c-view' id=id)
         +h1-heading('xl')= title
         +divider('medium')
         block
@@ -112,7 +110,7 @@ html
             +view-bubble
             +view-bubble-group
 
-        +sidebar(class='c-sidebar')
+        .c-sidebar.l-overflow.u-themed.t-raised.u-p-75.u-br-1
             +menu
                 each view in views
                     +menu-item(tag='a' href='#' + view.id)= view.title
diff --git a/tpl/layouts/container.pug b/tpl/layouts/container.pug
index c1affc4..0973b74 100644
--- a/tpl/layouts/container.pug
+++ b/tpl/layouts/container.pug
@@ -2,11 +2,8 @@ mixin container
     -
         let classes = {
             'l-container':            true,
-            'l-container--pad-x':     attributes.padX,
-            'l-container--pad-y':     attributes.padY,
             'l-container--narrow':    attributes.narrow,
-            'l-container--sm-narrow': attributes.smNarrow,
-            'l-container--in-page':   attributes.inPage,
+            'l-container--narrow-50': attributes.narrow50,
             'u-themed':               !!attributes.theme
         }
         if (!!attributes.theme) {
@@ -17,5 +14,4 @@ mixin container
         }
 
     div(class=classes)&attributes(attributes)
-        .l-container__inner
-            block
+        block
diff --git a/tpl/objects/bubble.pug b/tpl/objects/bubble.pug
index 1e0df38..fad7242 100644
--- a/tpl/objects/bubble.pug
+++ b/tpl/objects/bubble.pug
@@ -31,11 +31,11 @@ mixin bubble(user)
         else if user
             header(class=headerClasses)
                 strong= user
-        div.o-bubble__body.s-colored-links
+        span.s-colored-links
             - slots.body()
-            if slots.time
-                small.o-bubble__time
-                    - slots.time()
+        if slots.time
+            small.o-bubble__time
+                - slots.time()
         if slots.footer
             footer.o-bubble__footer
                 - slots.footer()
diff --git a/tpl/objects/dialog.pug b/tpl/objects/dialog.pug
index 2474cc3..91b99d9 100644
--- a/tpl/objects/dialog.pug
+++ b/tpl/objects/dialog.pug
@@ -1,6 +1,4 @@
 include heading.pug
-include header.pug
-include sidebar.pug
 
 mixin dialog(title)
     - const slots = {}
@@ -12,9 +10,23 @@ mixin dialog(title)
         block ? block() : undefined 
 
         let classes = {
-            'o-dialog': true,
+            'o-dialog':       true,
+            'o-dialog--flat': attributes.flat,
         }
 
+        let headerClass = {
+            'o-dialog__header': true,
+            'u-themed':         !attributes.flat,
+            't-lowered':        !attributes.flat,
+            'l-card':           true,
+        }
+
+        let sidebarHeaderClass = {
+            'o-dialog__header--sidebar': true,
+        }
+
+        Object.assign(sidebarHeaderClass, headerClass);
+
         let bodyClass = {
             'o-dialog__body': true
         }
@@ -23,21 +35,24 @@ mixin dialog(title)
         }
 
     div(class=classes)
-        if slots['sidebar-header']
-            +header(class='o-dialog__sidebar-header')
-                - slots['sidebar-header']()
+        if slots['sidebar-header'] || attributes.sidebarTitle
+            div(class=sidebarHeaderClass)
+                if slots['sidebar-header']
+                    - slots['sidebar-header']()
+                else
+                    +div-heading('sm')(class='o-dialog__title l-card__block l-card__block--main')= attributes.sidebarTitle
 
         if slots.sidebar
-            +sidebar(class='o-dialog__sidebar')
+            .o-dialog__sidebar.l-overflow
                 - slots.sidebar()
 
-        +header(class='o-dialog__header')
+        div(class=headerClass)
             if slots.header
                 - slots.header()
             else
                 if title
-                    +div-heading('sm')(class='o-dialog__label')= title
-            +action-button(round=true quiet=true icon='x' class='o-dialog__close-btn')
+                    +div-heading('sm')(class='o-dialog__title l-card__block l-card__block--main')= title
+            +action-button(round=true quiet=true icon='x' class='o-dialog__close-btn l-card__block')
 
         section(class=bodyClass)
             if slots.body
diff --git a/tpl/objects/header.pug b/tpl/objects/header.pug
deleted file mode 100644
index 0d9d7ee..0000000
--- a/tpl/objects/header.pug
+++ /dev/null
@@ -1,12 +0,0 @@
-mixin header
-    -
-        let classes = {
-            'o-header': true
-        }
-        if (attributes.class) {
-            classes[attributes.class] = true;
-        }
-
-    header(class=classes)
-        .o-header__content.t-lo
-            block
diff --git a/tpl/objects/icon.pug b/tpl/objects/icon.pug
index 1ed6052..67bcf37 100644
--- a/tpl/objects/icon.pug
+++ b/tpl/objects/icon.pug
@@ -2,8 +2,8 @@ mixin icon(id)
     -
         let href    = 'icons.svg#' + id
         let classes = {
-            'o-icon':        true,
-            'o-icon--block': attributes.block,
+            'o-icon':    true,
+            'u-d-block': attributes.block,
         }
         if (attributes.class) {
             classes[attributes.class] = true;
diff --git a/tpl/objects/sidebar.pug b/tpl/objects/sidebar.pug
deleted file mode 100644
index caa0f1f..0000000
--- a/tpl/objects/sidebar.pug
+++ /dev/null
@@ -1,12 +0,0 @@
-mixin sidebar
-    -
-        let classes = {
-            'o-sidebar': true
-        }
-        if (attributes.class) {
-            classes[attributes.class] = true;
-        }
-
-    aside(class=classes)
-        .o-sidebar__content.l-overflow
-            block
diff --git a/tpl/views/dialog.pug b/tpl/views/dialog.pug
index 0b6f8e7..f90ef21 100644
--- a/tpl/views/dialog.pug
+++ b/tpl/views/dialog.pug
@@ -2,7 +2,7 @@ mixin view-dialog
     +view('dialog', 'Dialog')
         .c-box
             +backdrop
-                +dialog('Lorem ipsum')
+                +dialog('Lorem ipsum')(flat=true)
                     +slot('body')
                         = loremIpsum
 
@@ -18,9 +18,7 @@ mixin view-dialog
 
         .c-box
             +backdrop
-                +dialog('Tags')
-                    +slot('sidebar-header')
-                        +div-heading('sm')(class='o-dialog__label')= '#channel'
+                +dialog('Tags')(sidebarTitle='#channel')
                     +slot('sidebar')
                         +menu(style={ 'min-width': '10em' })
                             +menu-item(icon='bookmark')= 'Bookmark'
@@ -44,12 +42,11 @@ mixin view-dialog
             +backdrop
                 +dialog
                     +slot('header')
-                        .l-card.l-card--flush
-                            .l-card__block.l-flex
-                                +action-button(quiet=true icon='chevron-left')
-                                +action-button(quiet=true icon='chevron-right')
-                            .l-card__block.l-card__block--main
-                                +div-heading('sm')= 'Tags'
+                        .l-card__block.l-flex
+                            +action-button(quiet=true icon='chevron-left')
+                            +action-button(quiet=true icon='chevron-right')
+                        .l-card__block.l-card__block--main
+                            +div-heading('sm')= 'Tags'
                     +slot('sidebar')
                         +menu(style={ 'min-width': '10em' })
                             +menu-item(icon='bookmark')= 'Bookmark'
-- 
cgit v1.2.3-70-g09d2