Updated dialog

3 files changed, 18 insertions, 13 deletions

diff --git a/src/_apply-vars.scss b/src/_apply-vars.scss
index 5cf5742..0fbc5e3 100644
--- a/src/_apply-vars.scss
+++ b/src/_apply-vars.scss
@@ -45,6 +45,16 @@
     }
 }
 
+@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('up') {
     @include iro.props-assign('colors');
     @include iro.props-assign('palette-light-hi');
diff --git a/src/objects/_dialog.scss b/src/objects/_dialog.scss
index 8a60b51..40fe7c0 100644
--- a/src/objects/_dialog.scss
+++ b/src/objects/_dialog.scss
@@ -69,9 +69,8 @@
         }
 
         @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(--border);
+            grid-area: sidebar-header / sidebar-header / header / header;
+            padding:   fn.dim(--header --pad-y) fn.dim(--header --pad-x);
 
             @include iro.bem-modifier('sidebar') {
                 grid-area:    sidebar-header;
@@ -122,10 +121,6 @@
         }
 
         @include iro.bem-modifier('flat') {
-            @include iro.bem-elem('header') {
-                border-bottom: 0;
-            }
-
             @include iro.bem-elem('body') {
                 padding-top: 0;
             }
diff --git a/tpl/objects/dialog.pug b/tpl/objects/dialog.pug
index 7ac9c3d..55dc8ad 100644
--- a/tpl/objects/dialog.pug
+++ b/tpl/objects/dialog.pug
@@ -17,17 +17,17 @@ mixin dialog(title)
 
         let headerClass = {
             'o-dialog__header': true,
-            'u-themed':         !attributes.flat,
-            't-down':        !attributes.flat,
-            'l-media':           true,
+            'l-media':          true,
         }
 
         let sidebarHeaderClass = {
+            'o-dialog__header':          true,
             'o-dialog__header--sidebar': true,
+            'u-themed':                  true,
+            't-lo':                      true,
+            'l-media':                   true,
         }
 
-        Object.assign(sidebarHeaderClass, headerClass);
-
         let bodyClass = {
             'o-dialog__body': true
         }
@@ -44,7 +44,7 @@ mixin dialog(title)
                     +div-heading('xl')(class='o-dialog__title l-media__block l-media__block--main')= attributes.sidebarTitle
 
         if slots.sidebar
-            .o-dialog__sidebar.l-overflow
+            .o-dialog__sidebar.l-overflow.u-themed.t-lo
                 - slots.sidebar()
 
         div(class=headerClass)