pacem-less 0.30.0 → 0.40.0-alba

package/pacem/fonts-phousys.less

@@ -2,4 +2,5 @@
 @import url(https://fonts.googleapis.com/css?family=Teko:300);
 @import url(https://fonts.googleapis.com/css?family=PT+Sans+Narrow:400,700);
 @import url(https://fonts.googleapis.com/css2?family=Share+Tech+Mono&display=swap);
-@import url(https://fonts.googleapis.com/css?family=Yanone+Kaffeesatz:300,700);
+//@import url(https://fonts.googleapis.com/css?family=Yanone+Kaffeesatz:300,700);
+@import url(https://fonts.googleapis.com/css?family=Roboto+Condensed:300,700);

package/pacem/layout/dark/container.less

@@ -0,0 +1,47 @@
+@import "../shared";
+
+.@{PCSS}-contain {
+    &.contain-none {
+        contain: none;
+    }
+
+    &.contain-strict {
+        contain: strict;
+    }
+
+    &.contain-size {
+        contain: size;
+    }
+
+    &.contain-inline-size {
+        contain: inline-size;
+    }
+
+    &.contain-layout {
+        contain: layout;
+    }
+
+    &.contain-style {
+        contain: style;
+    }
+
+    &.contain-paint {
+        contain: paint;
+    }
+}
+
+/* container queries */
+.@{PCSS}-container {
+
+    &.container-normal {
+        container-type: normal;
+    }
+
+    &.container-size {
+        container-type: size;
+    }
+
+    &.container-inline-size {
+        container-type: inline-size;
+    }
+}

package/pacem/layout/dark/grids.less

@@ -211,6 +211,8 @@
             margin: 0;
         }
     }
+
+    // TODO: exploit container queries
 }
 
 @media (max-width: @threshold_sm - 1) {

package/pacem/layout/dark/index.less

@@ -17,4 +17,5 @@
 //@import "layout";
 @import "toolbar";
 @import "breadcrumbs";
-@import "fetch-feedback";
+@import "fetch-feedback";
+@import "container";

package/pacem/layout/dark/layout.less

@@ -411,7 +411,20 @@ aside[pacem], .@{PCSS}-aside {
         // when menu is open it enters like an aside drawer,
         // so make room for it...
 
-        @_menu_open_left_pad: max(@layout_aside_padding, @_aside_margin + @_aside_width);
+        @_menu_open_left_pad: max(@layout_aside_padding, @_aside_margin + @menu_width);
+        @_sidebar_open_left_pad: max(@layout_aside_padding, @_aside_margin + @sidebar_width);
+        @_both_open_left_pad: max(@layout_aside_padding, @_aside_margin + @sidebar_width + @menu_width);
+
+        &.@{PCSS}-sidebar-open {
+            padding-left: @_sidebar_open_left_pad;
+            // ...and keep header and footer aligned.
+            header[pacem],
+            .@{PCSS}-header,
+            footer[pacem],
+            .@{PCSS}-footer {
+                padding-left: @_sidebar_open_left_pad;
+            }
+        }
 
         &.@{PCSS}-menu-open {
             padding-left: @_menu_open_left_pad;
@@ -425,7 +438,24 @@ aside[pacem], .@{PCSS}-aside {
 
             .@{PCSS}-toolbar.toolbar-header,
             .@{PCSS}-toolbar.toolbar-footer {
-                grid-template-columns: @_aside_width 1fr;
+                grid-template-columns: @menu_width 1fr;
+            }
+
+            &.@{PCSS}-sidebar-open {
+                // both menu and sidebar open
+                padding-left: @_both_open_left_pad;
+                // ...and keep header and footer aligned.
+                header[pacem],
+                .@{PCSS}-header,
+                footer[pacem],
+                .@{PCSS}-footer {
+                    padding-left: @_both_open_left_pad;
+                }
+
+                .@{PCSS}-toolbar.toolbar-header,
+                .@{PCSS}-toolbar.toolbar-footer {
+                    grid-template-columns: @sidebar_width + @menu_width 1fr;
+                }
             }
         }
 

package/pacem/layout/mixins.less

@@ -239,13 +239,16 @@
         .PanelColorize(@prefix, @color_primary);
     }
 
+    &.@{prefix}-disabled {
+        .PanelColorize(@prefix, @color_disabled);
+    }
+
     .@{prefix}-tools,
     .tools {
         position: absolute;
         top: @grid_spacing/2;
         right: @grid_spacing/1.5;
         z-index: 1;
-
         .ToolButtons(@_min_height);
     }
 
@@ -308,6 +311,10 @@
         &.@{prefix}-primary {
             .PanelColorizeFullscreen(@prefix, @color_primary);
         }
+
+        &.@{prefix}-disabled {
+            .PanelColorizeFullscreen(@prefix, @color_disabled);
+        }
     }
 }
 

package/pacem/pacem.less

@@ -59,6 +59,7 @@ html .@{PCSS}-preloader {
     @import "ui/@{theme}/loader";
     // menu
     @import "ui/@{theme}/menu";
+    @import "ui/@{theme}/sidebar";
 }
 
 @{shell} when (@shell_only = false), (@full_theme = true) {
@@ -154,40 +155,47 @@ html .@{PCSS}-preloader {
 
 // do not render variables in shell-only mode in order to ease themeable scenarios
 :root when (@shell_only = false), (@full_theme = true) {
-    --pacem-color-background: @color_background;
-    --pacem-color-root: @color_root_background;
-    --pacem-color-default: @color_default;
-    --pacem-color-default-inverse: @color_default_inv;
-    --pacem-color-accent: @color_accent;
-    --pacem-color-accent-inverse: @color_accent_inv;
-    --pacem-color-primary: @color_primary;
-    --pacem-color-primary-inverse: @color_primary_inv;
-    --pacem-color-danger: @color_danger;
-    --pacem-color-danger-inverse: @color_danger_inv;
-    --pacem-color-error: @color_error;
-    --pacem-color-error-inverse: @color_error_inv;
-    --pacem-color-highlight: @color_highlight;
-    --pacem-color-highlight-inverse: @color_highlight_fore;
-    --pacem-color-warning: @color_warning;
-    --pacem-color-warning-inverse: @color_warning_inv;
-    --pacem-color-success: @color_success;
-    --pacem-color-success-inverse: @color_success_inv;
-    --pacem-color-disabled: @color_disabled;
+
+    --@{PCSS}-color-background: @color_background;
+    --@{PCSS}-color-root: @color_root_background;
+    --@{PCSS}-color-default: @color_default;
+    --@{PCSS}-color-default-inverse: @color_default_inv;
+    --@{PCSS}-color-accent: @color_accent;
+    --@{PCSS}-color-accent-inverse: @color_accent_inv;
+    --@{PCSS}-color-primary: @color_primary;
+    --@{PCSS}-color-primary-inverse: @color_primary_inv;
+    --@{PCSS}-color-danger: @color_danger;
+    --@{PCSS}-color-danger-inverse: @color_danger_inv;
+    --@{PCSS}-color-error: @color_error;
+    --@{PCSS}-color-error-inverse: @color_error_inv;
+    --@{PCSS}-color-highlight: @color_highlight;
+    --@{PCSS}-color-highlight-inverse: @color_highlight_fore;
+    --@{PCSS}-color-warning: @color_warning;
+    --@{PCSS}-color-warning-inverse: @color_warning_inv;
+    --@{PCSS}-color-success: @color_success;
+    --@{PCSS}-color-success-inverse: @color_success_inv;
+    --@{PCSS}-color-disabled: @color_disabled;
     // palette
-    --pacem-color-green: @palette_green;
-    --pacem-color-yellow: @palette_yellow;
-    --pacem-color-brown: @palette_brown;
-    --pacem-color-red: @palette_red;
-    --pacem-color-pink: @palette_pink;
-    --pacem-color-blue: @palette_blue;
-    --pacem-color-orange: @palette_orange;
-    --pacem-color-purple: @palette_purple;
-    --pacem-color-teal: @palette_teal;
-    //
-    --pacem-grid-cell: @grid_cell;
-    --pacem-grid-spacing: @grid_spacing;
+    --@{PCSS}-color-green: @palette_green;
+    --@{PCSS}-color-yellow: @palette_yellow;
+    --@{PCSS}-color-brown: @palette_brown;
+    --@{PCSS}-color-red: @palette_red;
+    --@{PCSS}-color-pink: @palette_pink;
+    --@{PCSS}-color-blue: @palette_blue;
+    --@{PCSS}-color-orange: @palette_orange;
+    --@{PCSS}-color-purple: @palette_purple;
+    --@{PCSS}-color-teal: @palette_teal;
+    // spacing
+    --@{PCSS}-grid-cell: @grid_cell;
+    --@{PCSS}-grid-spacing: @grid_spacing;
     @double_grid_spacing: 2 * @grid_spacing;
-    --pacem-grid-double-spacing: @double_grid_spacing;
+    --@{PCSS}-grid-double-spacing: @double_grid_spacing;
+    // z-indexing             
+    --@{PCSS}-zindex-toast: @toast_z_index;
+    --@{PCSS}-zindex-balloon: @balloon_z_index;
+    --@{PCSS}-zindex-menu: @hamburger_z_index;
+    --@{PCSS}-zindex-lightbox: @lightbox_z_index;
+    --@{PCSS}-zindex-header: @header_z_index;
     /* #region deprecated */
     --color-background: @color_background;
     --color-root: @color_root_background;

package/pacem/theme-dark.less

@@ -52,6 +52,9 @@
 @font_size: 14px;
 @font_rem_factor: 1;
 @font_std: 'Roboto Condensed', 'Segoe UI', Helvetica, sans-serif;
+@font_std_rem_factor: 1;
+@font_main_rem_factor: 1;
+@font_tech_rem_factor: @font_rem_factor;
 
 // tweak needed to align the icon to the std font baseline
 @font_icon_offset: -1px;
@@ -78,7 +81,7 @@
 
 /* #region font mixins: adjust font sizes for homogeneous sight*/
 .FontStdSize(@rem) {
-    font-size: 1rem * @rem; // * @font_rem_factor;
+    font-size: 1rem * @rem  * @font_std_rem_factor;
 }
 
 .FontStd(@rem, @weight) {
@@ -97,7 +100,7 @@
 }
 
 .FontMainSize(@rem) {
-    font-size: 1rem * @rem * @font_rem_factor;
+    font-size: 1rem * @rem * @font_main_rem_factor;
 }
 
 .FontMain(@rem, @weight) {
@@ -116,7 +119,7 @@
 }
 
 .FontTechSize(@rem) {
-    font-size: 1rem * @rem * @font_rem_factor;
+    font-size: 1rem * @rem * @font_tech_rem_factor;
 }
 
 .FontTech(@rem, @weight) {
@@ -222,6 +225,14 @@
 @menu_link_fontfamily: @font_std;
 @menu_link_fontsize: 1rem * @font_rem_factor;
 @menu_nav_background: @color_background;
+@menu_nav_outset_spacing: @grid_spacing/1.5;
+@menu_width: @layout_aside_width;
+
+// sidebar
+@sidebar_width: @grid_spacing * 2;
+@sidebar_background: @color_background;
+@sidebar_foreground: @color_default;
+@sidebar_nav_spacing: @menu_nav_outset_spacing;
 
 // breadcrumb
 @color_breadcrumb_home_fore: @color_teal;

package/pacem/theme-light.less

@@ -61,7 +61,7 @@
 
 // menu
 @menu_link_fontfamily: @font_main;
-@menu_link_fontsize: 1rem * @font_rem_factor;
+@menu_link_fontsize: 1rem * @font_main_rem_factor;
 // breadcrumb
 @color_breadcrumb_home_fore: @color_accent;
 // balloon
@@ -77,9 +77,9 @@
 @color_suggest_border_light: rgba(255,255,255,0.8);
 @color_suggest_border_dark: rgba(0,0,0,0.075);
 // tab
-@color_tab_back: @color_button_back;
+@color_tab_back: @color_background; // @color_button_back;
 @color_tab_highlight: @color_highlight;
-@border_tab: 0;
+@border_tab: 1px;
 // lightbox
 @color_lightbox_back: rgba(0,0,0,0.1);
 @color_gallery_back: rgba(0,0,0,0.75);

package/pacem/theme-phousys.less

@@ -15,11 +15,12 @@
 @font_main: 'PT Sans Narrow', 'Segoe UI Light', Helvetica, sans-serif;
 @font_tech: 'Share Tech Mono', Monospace;
 @font_icons: 'Material Icons';
-@font_size: 16px;
-@font_rem_factor: 7/8;
-@font_std: 'Yanone Kaffeesatz', 'Segoe UI', Helvetica, sans-serif;
+@font_size: 14px;
+@font_rem_factor: 1;
+@font_std: 'Roboto Condensed', 'Segoe UI', Helvetica, sans-serif; //'Yanone Kaffeesatz', 'Segoe UI', Helvetica, sans-serif;
 // tweak needed to align the icon to the std font baseline
 @font_icon_offset: -2px;
+@font_weight: 300;
 
 @color_phousys: #29c7de; // #65e4d5;
 // temp overrides
@@ -94,7 +95,7 @@
 @menu_link_active_backgroundcolor: fade(#354a52, 33.333); // fade(@color_default, 5);
 @menu_link_active_decorcolor: @palette_blue;
 @menu_link_fontfamily: @font_tech;
-@menu_link_fontsize: .8rem; // * @font_rem_factor;
+@menu_link_fontsize: .9rem * @font_tech_rem_factor;
 @menu_nav_background: fade(@color_background, 80);
 // breadcrumb
 @color_breadcrumb_home_fore: @color_accent;

package/pacem/ui/dark/button.less

@@ -137,6 +137,16 @@ a.@{PCSS}-button,
         }
     }
 
+    /*&.flat,
+    &.button-flat {
+        color: fade(@color_button_fore, 70);
+
+        &:focus,
+        &:hover {
+            color: @color_button_fore;
+        }
+    }*/
+
     .ButtonColorize(@color_button_back, @color_button_fore);
 
     &.accent,
@@ -178,16 +188,6 @@ a.@{PCSS}-button,
         .ButtonColorize(@color_highlight, @color_highlight_fore);
     }
 
-    &.flat,
-    &.button-flat {
-        color: fade(@color_button_fore, 70);
-
-        &:focus,
-        &:hover {
-            color: @color_button_fore;
-        }
-    }
-
     &.rise,
     &.button-rise {
         /*box-shadow: none;
@@ -270,38 +270,53 @@ a.@{PCSS}-button,
     &.button-circle,
     &.button-square {
         width: 2 *@grid_spacing;
-        height: $width;
+        aspect-ratio: 1;
         font-size: 0;
+        display: flex;
+        justify-content: center;
+        align-items: center;
 
         &::before {
-            position: absolute;
+            /*position: absolute;
             top: 50%;
             left: 50%;
             margin-top: -@grid_spacing/2;
-            margin-left: -@grid_spacing/2;
+            margin-left: -@grid_spacing/2;*/
         }
 
         &.square-small,
         &.circle-small {
             width: 1.5 *@grid_spacing;
-            height: $width;
+            // height: $width;
 
             &::before {
                 font-size: @grid_spacing * .75;
-                margin-top: -@grid_spacing * (1.5 - .75)/2;
-                margin-left: $margin-top;
+                /*margin-top: -@grid_spacing * (1.5 - .75)/2;
+                margin-left: $margin-top;*/
             }
         }
 
         &.square-smaller,
         &.circle-smaller {
             width: @grid_spacing;
-            height: $width;
+            // height: $width;
 
             &::before {
                 font-size: @grid_spacing * .5;
-                margin-top: -@grid_spacing * (0.5)/2;
-                margin-left: $margin-top;
+                /*margin-top: -@grid_spacing * (0.5)/2;
+                margin-left: $margin-top;*/
+            }
+        }
+
+        &.square-auto,
+        &.circle-auto {
+            width: 100%;
+
+            &::before {
+                font-size: @grid_spacing;
+                text-size-adjust: 67%;
+                /*margin-top: -25%;
+                margin-left: -25%;*/
             }
         }
     }

package/pacem/ui/dark/index.less

@@ -60,6 +60,7 @@
 
 // to be imported separately by the shell css
 // @import "menu";
+// @import "sidebar";
 @import "binder";
 @import "markdown";
 @import "social";

package/pacem/ui/dark/menu.less

@@ -1,6 +1,6 @@
 @import "../shared";
 
-@_w: @layout_aside_width;
+@_w: @menu_width;
 
 @_clr_a: @menu_link_color;
 @_clr_a_hover: @menu_link_hover_color;
@@ -321,8 +321,6 @@
 
 
         &.menu-sync {
-            // font-size: .8em;
-            z-index: @header_z_index - 10;
 
             .@{PCSS}-menu {
                 // width: @_w;
@@ -341,11 +339,27 @@
                 }
 
                 nav {
-                    background: none;
                     backdrop-filter: none;
                     grid-row: ~"1/9";
                     // width: @_w;
                     padding-top: @grid_spacing + @layout_header_height;
+                    padding-bottom: @grid_spacing + @layout_footer_height;
+                }
+            }
+
+            &.menu-outset {
+                nav {
+                    padding-top: @menu_nav_outset_spacing;
+                    padding-bottom: @menu_nav_outset_spacing;
+                }
+            }
+
+            &:not(.menu-outset) {
+                // font-size: .8em;
+                z-index: @header_z_index - 10;
+
+                .@{PCSS}-menu nav {
+                    background: none;
                 }
             }
         }
@@ -383,11 +397,10 @@
         }
     }
     /* #endregion*/
-
     // layout with a header?
-    .@{PCSS}-body.@{PCSS}-menu-open[header]:not(.sticky-header-fade) @{P}-menu,
-    .@{PCSS}-body.@{PCSS}-menu-close[header]:not(.sticky-header-fade) @{P}-menu,
-    @{P}-menu.menu-header {
+    .@{PCSS}-body.@{PCSS}-menu-open[header]:not(.sticky-header-fade) @{P}-menu:not(.menu-outset),
+    .@{PCSS}-body.@{PCSS}-menu-close[header]:not(.sticky-header-fade) @{P}-menu:not(.menu-outset),
+    @{P}-menu:not(.menu-outset).menu-header {
         &.menu-sync {
             .@{PCSS}-menu {
 
@@ -399,16 +412,16 @@
         }
     }
 
-    .@{PCSS}-body.@{PCSS}-menu-open[header][headbar]:not(.sticky-header-fade) @{P}-menu,
-    .@{PCSS}-body.@{PCSS}-menu-close[header][headbar]:not(.sticky-header-fade) @{P}-menu,
-    .@{PCSS}-body.@{PCSS}-menu-open[header][headbar-prepend]:not(.sticky-header-fade) @{P}-menu,
-    .@{PCSS}-body.@{PCSS}-menu-close[header][headbar-prepend]:not(.sticky-header-fade) @{P}-menu,
-    .@{PCSS}-body.@{PCSS}-menu-open[headbar] @{P}-menu.menu-header,
-    .@{PCSS}-body.@{PCSS}-menu-open[headbar-prepend] @{P}-menu.menu-header,
-    .@{PCSS}-body.@{PCSS}-menu-close[headbar] @{P}-menu.menu-header,
-    .@{PCSS}-body.@{PCSS}-menu-close[headbar-prepend] @{P}-menu.menu-header,
-    @{P}-menu.menu-header.menu-headbar,
-    @{P}-menu.menu-header.menu-headbar-prepend {
+    .@{PCSS}-body.@{PCSS}-menu-open[header][headbar]:not(.sticky-header-fade) @{P}-menu:not(.menu-outset),
+    .@{PCSS}-body.@{PCSS}-menu-close[header][headbar]:not(.sticky-header-fade) @{P}-menu:not(.menu-outset),
+    .@{PCSS}-body.@{PCSS}-menu-open[header][headbar-prepend]:not(.sticky-header-fade) @{P}-menu:not(.menu-outset),
+    .@{PCSS}-body.@{PCSS}-menu-close[header][headbar-prepend]:not(.sticky-header-fade) @{P}-menu:not(.menu-outset),
+    .@{PCSS}-body.@{PCSS}-menu-open[headbar] @{P}-menu.menu-header:not(.menu-outset),
+    .@{PCSS}-body.@{PCSS}-menu-open[headbar-prepend] @{P}-menu.menu-header:not(.menu-outset),
+    .@{PCSS}-body.@{PCSS}-menu-close[headbar] @{P}-menu.menu-header:not(.menu-outset),
+    .@{PCSS}-body.@{PCSS}-menu-close[headbar-prepend] @{P}-menu.menu-header:not(.menu-outset),
+    @{P}-menu.menu-header.menu-headbar:not(.menu-outset),
+    @{P}-menu.menu-header.menu-headbar-prepend:not(.menu-outset) {
         // layout with header AND headbar?
         &.menu-sync {
             .@{PCSS}-menu {
@@ -420,16 +433,16 @@
         }
     }
 
-    .@{PCSS}-body.@{PCSS}-menu-open[headbar]:not([header]) @{P}-menu:not(.menu-header),
-    .@{PCSS}-body.@{PCSS}-menu-close[headbar]:not([header]) @{P}-menu:not(.menu-header),
-    .@{PCSS}-body.@{PCSS}-menu-open[headbar].sticky-header-fade @{P}-menu:not(.menu-header),
-    .@{PCSS}-body.@{PCSS}-menu-close[headbar].sticky-header-fade @{P}-menu:not(.menu-header),
-    .@{PCSS}-body.@{PCSS}-menu-open[headbar-prepend]:not([header]) @{P}-menu:not(.menu-header),
-    .@{PCSS}-body.@{PCSS}-menu-close[headbar-prepend]:not([header]) @{P}-menu:not(.menu-header),
-    .@{PCSS}-body.@{PCSS}-menu-open[headbar-prepend].sticky-header-fade @{P}-menu:not(.menu-header),
-    .@{PCSS}-body.@{PCSS}-menu-close[headbar-prepend].sticky-header-fade @{P}-menu:not(.menu-header),
-    @{P}-menu.menu-headbar:not(.menu-header),
-    @{P}-menu.menu-headbar-prepend:not(.menu-header) {
+    .@{PCSS}-body.@{PCSS}-menu-open[headbar]:not([header]) @{P}-menu:not(.menu-header):not(.menu-outset),
+    .@{PCSS}-body.@{PCSS}-menu-close[headbar]:not([header]) @{P}-menu:not(.menu-header):not(.menu-outset),
+    .@{PCSS}-body.@{PCSS}-menu-open[headbar].sticky-header-fade @{P}-menu:not(.menu-header):not(.menu-outset),
+    .@{PCSS}-body.@{PCSS}-menu-close[headbar].sticky-header-fade @{P}-menu:not(.menu-header):not(.menu-outset),
+    .@{PCSS}-body.@{PCSS}-menu-open[headbar-prepend]:not([header]) @{P}-menu:not(.menu-header):not(.menu-outset),
+    .@{PCSS}-body.@{PCSS}-menu-close[headbar-prepend]:not([header]) @{P}-menu:not(.menu-header):not(.menu-outset),
+    .@{PCSS}-body.@{PCSS}-menu-open[headbar-prepend].sticky-header-fade @{P}-menu:not(.menu-header):not(.menu-outset),
+    .@{PCSS}-body.@{PCSS}-menu-close[headbar-prepend].sticky-header-fade @{P}-menu:not(.menu-header):not(.menu-outset),
+    @{P}-menu.menu-headbar:not(.menu-header):not(.menu-outset),
+    @{P}-menu.menu-headbar-prepend:not(.menu-header):not(.menu-outset) {
         // headbars without header?
         &.menu-sync {
             .@{PCSS}-menu {
@@ -441,12 +454,12 @@
         }
     }
 
-    .@{PCSS}-body.@{PCSS}-menu-open[footer] @{P}-menu,
-    .@{PCSS}-body.@{PCSS}-menu-close[footer] @{P}-menu,
-    .@{PCSS}-body.@{PCSS}-menu-open[bigfooter] @{P}-menu,
-    .@{PCSS}-body.@{PCSS}-menu-close[bigfooter] @{P}-menu,
-    @{P}-menu.menu-footer,
-    @{P}-menu.menu-bigfooter {
+    .@{PCSS}-body.@{PCSS}-menu-open[footer] @{P}-menu:not(.menu-outset),
+    .@{PCSS}-body.@{PCSS}-menu-close[footer] @{P}-menu:not(.menu-outset),
+    .@{PCSS}-body.@{PCSS}-menu-open[bigfooter] @{P}-menu:not(.menu-outset),
+    .@{PCSS}-body.@{PCSS}-menu-close[bigfooter] @{P}-menu:not(.menu-outset),
+    @{P}-menu.menu-footer:not(.menu-outset),
+    @{P}-menu.menu-bigfooter:not(.menu-outset) {
         // headbars without footers?
         &.menu-sync {
             .@{PCSS}-menu {
@@ -459,26 +472,26 @@
     }
 
 
-    .@{PCSS}-body.@{PCSS}-menu-open[footer][footbar] @{P}-menu,
-    .@{PCSS}-body.@{PCSS}-menu-close[footer][footbar] @{P}-menu,
-    .@{PCSS}-body.@{PCSS}-menu-open[footer][footbar-append] @{P}-menu,
-    .@{PCSS}-body.@{PCSS}-menu-close[footer][footbar-append] @{P}-menu,
-    .@{PCSS}-body.@{PCSS}-menu-open[footbar] @{P}-menu.menu-footer,
-    .@{PCSS}-body.@{PCSS}-menu-open[footbar-append] @{P}-menu.menu-footer,
-    .@{PCSS}-body.@{PCSS}-menu-close[footbar] @{P}-menu.menu-footer,
-    .@{PCSS}-body.@{PCSS}-menu-close[footbar-append] @{P}-menu.menu-footer,
-    .@{PCSS}-body.@{PCSS}-menu-open[bigfooter][footbar] @{P}-menu,
-    .@{PCSS}-body.@{PCSS}-menu-close[bigfooter][footbar] @{P}-menu,
-    .@{PCSS}-body.@{PCSS}-menu-open[bigfooter][footbar-append] @{P}-menu,
-    .@{PCSS}-body.@{PCSS}-menu-close[bigfooter][footbar-append] @{P}-menu,
-    .@{PCSS}-body.@{PCSS}-menu-open[footbar] @{P}-menu.menu-bigfooter,
-    .@{PCSS}-body.@{PCSS}-menu-open[footbar-append] @{P}-menu.menu-bigfooter,
-    .@{PCSS}-body.@{PCSS}-menu-close[footbar] @{P}-menu.menu-bigfooter,
-    .@{PCSS}-body.@{PCSS}-menu-close[footbar-append] @{P}-menu.menu-bigfooter,
-    @{P}-menu.menu-footer.menu-footbar,
-    @{P}-menu.menu-footer.menu-footbar-append,
-    @{P}-menu.menu-bigfooter.menu-footbar,
-    @{P}-menu.menu-bigfooter.menu-footbar-append {
+    .@{PCSS}-body.@{PCSS}-menu-open[footer][footbar] @{P}-menu:not(.menu-outset),
+    .@{PCSS}-body.@{PCSS}-menu-close[footer][footbar] @{P}-menu:not(.menu-outset),
+    .@{PCSS}-body.@{PCSS}-menu-open[footer][footbar-append] @{P}-menu:not(.menu-outset),
+    .@{PCSS}-body.@{PCSS}-menu-close[footer][footbar-append] @{P}-menu:not(.menu-outset),
+    .@{PCSS}-body.@{PCSS}-menu-open[footbar] @{P}-menu.menu-footer:not(.menu-outset),
+    .@{PCSS}-body.@{PCSS}-menu-open[footbar-append] @{P}-menu.menu-footer:not(.menu-outset),
+    .@{PCSS}-body.@{PCSS}-menu-close[footbar] @{P}-menu.menu-footer:not(.menu-outset),
+    .@{PCSS}-body.@{PCSS}-menu-close[footbar-append] @{P}-menu.menu-footer:not(.menu-outset),
+    .@{PCSS}-body.@{PCSS}-menu-open[bigfooter][footbar] @{P}-menu:not(.menu-outset),
+    .@{PCSS}-body.@{PCSS}-menu-close[bigfooter][footbar] @{P}-menu:not(.menu-outset),
+    .@{PCSS}-body.@{PCSS}-menu-open[bigfooter][footbar-append] @{P}-menu:not(.menu-outset),
+    .@{PCSS}-body.@{PCSS}-menu-close[bigfooter][footbar-append] @{P}-menu:not(.menu-outset),
+    .@{PCSS}-body.@{PCSS}-menu-open[footbar] @{P}-menu.menu-bigfooter:not(.menu-outset),
+    .@{PCSS}-body.@{PCSS}-menu-open[footbar-append] @{P}-menu.menu-bigfooter:not(.menu-outset),
+    .@{PCSS}-body.@{PCSS}-menu-close[footbar] @{P}-menu.menu-bigfooter:not(.menu-outset),
+    .@{PCSS}-body.@{PCSS}-menu-close[footbar-append] @{P}-menu.menu-bigfooter:not(.menu-outset),
+    @{P}-menu.menu-footer.menu-footbar:not(.menu-outset),
+    @{P}-menu.menu-footer.menu-footbar-append:not(.menu-outset),
+    @{P}-menu.menu-bigfooter.menu-footbar:not(.menu-outset),
+    @{P}-menu.menu-bigfooter.menu-footbar-append:not(.menu-outset) {
         // layout with footer AND footbar?
         &.menu-sync {
             .@{PCSS}-menu {
@@ -490,12 +503,12 @@
         }
     }
 
-    .@{PCSS}-body.@{PCSS}-menu-open:not([footer]):not([bigfooter])[footbar] @{P}-menu:not(.menu-footer):not(.menu-bigfooter),
-    .@{PCSS}-body.@{PCSS}-menu-open:not([footer]):not([bigfooter])[footbar] @{P}-menu:not(.menu-footer):not(.menu-bigfooter),
-    .@{PCSS}-body.@{PCSS}-menu-open:not([footer]):not([bigfooter])[footbar-append] @{P}-menu:not(.menu-footer):not(.menu-bigfooter),
-    .@{PCSS}-body.@{PCSS}-menu-open:not([footer]):not([bigfooter])[footbar-append] @{P}-menu:not(.menu-footer):not(.menu-bigfooter),
-    @{P}-menu.menu-footbar:not(.menu-footer):not(.menu-bigfooter),
-    @{P}-menu.menu-footbar-append:not(.menu-footer):not(.menu-bigfooter) {
+    .@{PCSS}-body.@{PCSS}-menu-open:not([footer]):not([bigfooter])[footbar] @{P}-menu:not(.menu-footer):not(.menu-bigfooter):not(.menu-outset),
+    .@{PCSS}-body.@{PCSS}-menu-open:not([footer]):not([bigfooter])[footbar] @{P}-menu:not(.menu-footer):not(.menu-bigfooter):not(.menu-outset),
+    .@{PCSS}-body.@{PCSS}-menu-open:not([footer]):not([bigfooter])[footbar-append] @{P}-menu:not(.menu-footer):not(.menu-bigfooter):not(.menu-outset),
+    .@{PCSS}-body.@{PCSS}-menu-open:not([footer]):not([bigfooter])[footbar-append] @{P}-menu:not(.menu-footer):not(.menu-bigfooter):not(.menu-outset),
+    @{P}-menu.menu-footbar:not(.menu-footer):not(.menu-bigfooter):not(.menu-outset),
+    @{P}-menu.menu-footbar-append:not(.menu-footer):not(.menu-bigfooter):not(.menu-outset) {
         // footbars without footer?
         &.menu-sync {
             .@{PCSS}-menu {
@@ -519,7 +532,6 @@
             }
         }
     }
-
     /*@{P}-menu.menu-sync {
         @{P}-button.@{PCSS}-menu.@{PCSS}-hamburger {
             @_avail: @menu_hamburger_button_desktop_size;

package/pacem/ui/dark/sidebar.less

@@ -0,0 +1,135 @@
+@import "../shared";
+
+@_lvl1_width: 2 * @grid_spacing;
+
+@{P}-sidebar {
+    @_zindex: @hamburger_z_index + 1;
+    @_lvl1_zindex: @_zindex + 1;
+    z-index: @_zindex;
+    display: block;
+    position: fixed;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    width: 0;
+
+    &::part(drawer),
+    .sidebar-drawer {
+        position: absolute;
+        top: 0;
+        bottom: 0;
+        left: 0;
+        width: @_lvl1_width;
+        color: @sidebar_foreground;
+        background: @sidebar_background;
+        border-right: 1px solid @color_border;
+        box-sizing: border-box;
+        // initial state
+        transform: translateX(-$width);
+        opacity: 0;
+    }
+
+    &::part(open),
+    .sidebar-drawer.drawer-open {
+        // open state
+        opacity: 1;
+        transform: translateX(0);
+    }
+    // coloring
+
+    .Sidebar(@bg, @fore) {
+
+        &::part(drawer),
+        .sidebar-drawer {
+            .GradientVertical(0, 100%, @bg, darken(@bg, 20));
+            border-color: transparent;
+            color: @fore;
+        }
+    }
+
+    &.sidebar-primary {
+        .Sidebar(@color_primary, @color_primary_inv);
+    }
+
+    &.sidebar-accent {
+        .Sidebar(@color_accent, @color_accent_inv);
+    }
+
+    &.sidebar-warning {
+        .Sidebar(@color_warning, @color_warning_inv);
+    }
+
+    &.sidebar-success {
+        .Sidebar(@color_success, @color_success_inv);
+    }
+
+    &.sidebar-danger {
+        .Sidebar(@color_danger, @color_danger_inv);
+    }
+
+    &.sidebar-error {
+        .Sidebar(@color_error, @color_error_inv);
+    }
+
+    &.sidebar-invert {
+        .Sidebar(@color_default, @color_default_inv);
+    }
+
+    &.sidebar-disabled {
+        .Sidebar(@color_disabled, @color_disabled_inv);
+    }
+}
+
+.@{PCSS}-body {
+
+    @_spacing: @layout_aside_padding;
+
+    &.@{PCSS}-sidebar-open {
+        padding-left: @_lvl1_width + @_spacing;
+
+        @media screen and (min-width: @threshold_lg) {
+
+            &.@{PCSS}-menu-open {
+                padding-left: @_lvl1_width + @layout_aside_width + @_spacing;
+            }
+        }
+
+        @{P}-menu.menu-sync {
+            transform: translateX(@_lvl1_width);
+        }
+    }
+}
+
+@{P}-sidebar nav.@{PCSS}-sidebar {
+    display: grid;
+    grid-template-rows: auto 1fr auto;
+    height: 100%;
+    padding: @sidebar_nav_spacing 0;
+    box-sizing: border-box;
+
+    > .sidebar-start,
+    > .sidebar-end {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+    }
+
+    > .sidebar-start {
+        grid-row: 1;
+    }
+
+    > .sidebar-end {
+        grid-row: 3;
+    }
+
+    .sidebar-button {
+        margin: 0;
+    }
+}
+
+.@{PCSS}-body.@{PCSS}-animations {
+    @{P}-sidebar::part(drawer),
+    @{P}-sidebar .sidebar-drawer {
+        transition: transform .3s @easing_in_out_sine, opacity .2s linear;
+    }
+}

package/pacem/ui/dark/tabs.less

@@ -9,7 +9,7 @@
     display: block;
     //position: relative;
 
-   @{P}-tab {
+    @{P}-tab {
         display: none;
         opacity: 0;
         pointer-events: none;
@@ -45,7 +45,7 @@
         overflow: hidden;
         display: grid;
 
-        >@{P}-tab {
+        > @{P}-tab {
             grid-column: 1;
             grid-row: 1;
             align-self: start;
@@ -107,15 +107,47 @@
     .@{PCSS}-tabs-adapter {
         z-index: 0;
     }*/
-    &.rise {
+    &.rise,
+    &.tabs-rise {
+
+        &when(@dark_theme = true) {
+
+            .@{PCSS}-tabs-content {
+                box-shadow: 0 4px 16px rgba(0,0,0,0.125);
+            }
+
+            .@{PCSS}-tabs.tabs-vertical {
+
+                @{P}-button.@{PCSS}-adapter-page.@{PCSS}-adapter-active {
+                    box-shadow: -2px 2px 4px rgba(0,0,0,0.125);
+                }
+            }
+        }
+
+        &when(@dark_theme = false) {
+
+            .@{PCSS}-tabs-content {
+                box-shadow: 0 2px 24px rgba(0,0,0,0.075);
+            }
+
+            .@{PCSS}-tabs.tabs-vertical {
+
+                @{P}-button.@{PCSS}-adapter-page.@{PCSS}-adapter-active {
+                    box-shadow: -2px 2px 4px rgba(0,0,0,0.05);
+                }
+            }
+        }
+    }
+
+    &.tabs-flat {
         .@{PCSS}-tabs-content {
-            box-shadow: 0 2px @grid_spacing/6 rgba(0,0,0,0.5);
+            box-shadow: none;
         }
 
         .@{PCSS}-tabs.tabs-vertical {
 
-           @{P}-button.@{PCSS}-adapter-page.@{PCSS}-adapter-active {
-                box-shadow: 0 1px 0 rgba(0,0,0,0.5);
+            @{P}-button.@{PCSS}-adapter-page.@{PCSS}-adapter-active {
+                box-shadow: none;
             }
         }
     }
@@ -137,7 +169,7 @@
 
         > li {
 
-            >@{P}-button.@{PCSS}-adapter-page {
+            > @{P}-button.@{PCSS}-adapter-page {
                 padding: @grid_spacing/6 @grid_spacing/2 0 @grid_spacing/2;
                 margin: 0;
                 background-color: transparent;
@@ -150,7 +182,7 @@
                     box-shadow: none;
                 }
 
-                >@{P}-span {
+                > @{P}-span {
                     display: block;
                     box-sizing: border-box;
                     height: @_h_tab - @grid_spacing/6;
@@ -169,10 +201,11 @@
                     border-top: @_brd_tab solid @_clr_brd_tab;
                     border-right: @_brd_tab solid @_clr_brd_tab;
                     border-left: @_brd_tab solid @_clr_brd_tab;
+                    border-bottom: 0;
                     z-index: 1;
                     transform: translateY(@_brd_tab);
 
-                    >@{P}-span {
+                    > @{P}-span {
                         border-color: @color_tab_highlight;
                         //background-color: @color_teal;
                     }
@@ -228,13 +261,13 @@
             > li {
                 display: list-item;
 
-                >@{P}-button.@{PCSS}-adapter-page {
+                > @{P}-button.@{PCSS}-adapter-page {
                     padding: @grid_spacing/4 0 @grid_spacing/4 @grid_spacing/2;
                     display: block;
                     border-bottom-left-radius: @border_radius;
                     border-top-right-radius: 0;
 
-                    >@{P}-span {
+                    > @{P}-span {
                         display: block;
                         text-align: left;
                         margin: 0;
@@ -247,7 +280,14 @@
 
                     &.@{PCSS}-adapter-active {
 
-                        >@{P}-span {
+                        border-top: @_brd_tab solid @_clr_brd_tab;
+                        border-bottom: @_brd_tab solid @_clr_brd_tab;
+                        border-left: @_brd_tab solid @_clr_brd_tab;
+                        border-right: 0;
+                        z-index: 1;
+                        transform: translateX(@_brd_tab);
+
+                        > @{P}-span {
                             border-color: @color_tab_highlight;
                         }
                     }
@@ -282,9 +322,9 @@
 
 // animations
 .@{PCSS}-animations {
-   @{P}-tabs {
-       @{P}-tab {
+    @{P}-tabs {
+        @{P}-tab {
             transition: opacity .2s, transform .2s @easing_out_sine;
         }
     }
-}
+}

package/pacem/ui/dark/timeline.less

@@ -129,7 +129,7 @@
         .Coloring(@color_default, @color_default_inv);
         // coloring
         &.step-disabled {
-            .Coloring(@color_disabled, @color_default);
+            .Coloring(@color_disabled, @color_disabled_inv);
         }
 
         &.step-success {

package/pacem/ui/light/sidebar.less

@@ -0,0 +1,2 @@
+// theme-dark is the 'cookie-cutter'
+@import "../dark/sidebar";

package/pacem/ui/phousys/sidebar.less

@@ -0,0 +1,2 @@
+// theme-dark is the 'cookie-cutter'
+@import "../dark/sidebar";

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.30.0",
+  "version": "0.40.0-alba",
   "name": "pacem-less",
   "homepage": "https://js.pacem.it",
   "repository": {