feat(shiny-preset): Dashboard design in all page layouts (#897)

NEWS.md

@@ -31,6 +31,10 @@
 
 * Added `input_dark_mode()`, a new input control that provides a toggle button that can be used to switch between the dark and light modes when using Bootstrap 5.3. By default, dark mode is applied automatically if the user's operating system is also in dark mode. App authors can toggle dark mode programmatically from the server using `toggle_dark_mode()`, and if you provide `input_dark_mode()` with an `id`, you can read the current color mode via the corresponding input value. (#787)
 
+* Shiny's Bootstrap theme preset is now used by default in `bs_theme()` and all related `page_*()` functions in bslib. This theme brings a fresh new design to all Shiny apps and dashboards created with bslib. This dashboard design anticipates heavy use of cards for organizing content, and adds a gray background for contrast with minimalistic white cards. This treatment is enabled by default in `page_navbar()` and `page_sidebar()`, and can be turned on in other `page_*()` functions by adding the `bslib-page-dashboard` class to the page container or body tag.
+
+   The preset can also be customized using the `$bslib-dashboard-design` and `$bslib-enable-shadows` Sass variables. Set these to `false` to disable the dashboard treatment and card shadows, respectively. These variables can be set via `bs_theme()`, e.g. `bs_theme("bslib-dashboard-design" = "false")`. (#897)
+
 ## Improvements
 
 * The `bs_themer()` app now supports previewing the dark mode variant of Bootstrap 5 themes. (#767)

inst/builtin/bs5/shiny/_rules.scss

@@ -7,6 +7,15 @@ $web-font-path: "https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,
   @import url($web-font-path);
 }
 
+// Variables
+:root {
+  --bslib-box-shadow-color-rgb: #{$bslib-box-shadow-color-rgb};
+}
+
+@include color-mode(dark) {
+  --bslib-box-shadow-color-rgb: #{$bslib-box-shadow-color-rgb-dark};
+}
+
 // For radioButtons()/checkboxGroupInput(), move text slightly to the right
 $bslib-checkbox-radio-margin-right: 0.35em !default;
 .checkbox,
@@ -71,76 +80,74 @@ $bslib-checkbox-radio-margin-right: 0.35em !default;
 }
 
 
-@mixin bslib-box-shadows {
-
+@if ($bslib-enable-shadows) {
   // Add box-shadow & remove border from 'top-level' card()/layout_sidebar()
-  .bslib-card, .bslib-sidebar-layout {
-    // Shadows on top-level cards/sidebars, not in nested components
-    box-shadow: $box-shadow;
-    .bslib-card, .bslib-sidebar-layout {
-      box-shadow: none;
-    }
-
-    // Remove outer border, but keep inner borders and borders on nested components
-    border-width: 0;
+  .bslib-card {
+    // BS doesn't include a box-shadow rule for .card when `enable-shadows: false`
+    box-shadow: var(--bslib-card-box-shadow, #{$box-shadow});
 
-    // We're deliberately avoiding `@include color-mode(dark)` here since
-    // that'd require a fair amount of duplication to properly implement
-    // https://github.com/rstudio/bslib/pull/829/files#r1361262514
-    [data-#{$prefix}theme="dark"] & {
-      box-shadow: $box-shadow-dark;
+    // Shadows on top-level cards, not in nested components
+    .bslib-card {
+      --bslib-card-box-shadow: ; // unset our shadow
     }
   }
 
-  // Additional card styling (w/ box shadows in mind)
-  .bslib-card {
-    .card-header, .card-footer {
-      background-color: transparent;
-    }
-    .card-header {
-      font-weight: $font-weight-semibold;
-      font-size: 0.9rem;
-      line-height: 1.375rem;
-    }
-    .bslib-sidebar-layout > .sidebar {
-      border-top: var(--bslib-sidebar-border);
-    }
+  .bslib-card-box-shadow-sm {
+    --bslib-card-box-shadow: var(--bslib-card-box-shadow-sm, #{$box-shadow-sm});
+  }
+  .bslib-card-box-shadow-md {
+    --bslib-card-box-shadow: var(--bslib-card-box-shadow-md, #{$box-shadow});
+  }
+  .bslib-card-box-shadow-lg {
+    --bslib-card-box-shadow: var(--bslib-card-box-shadow-lg, #{$box-shadow-lg});
+  }
+  .bslib-card-box-shadow-none {
+    --bslib-card-box-shadow: none;
   }
-
 }
 
 // TODO: move this logic into a "core" bundle that comes with any theme
 // (but you only get the shadows by default in the preset theme)
-@if $bslib-enable-shadows {
+@if $bslib-dashboard-design {
 
   :root {
-    --bslib-dashboard-main-bg: rgba(var(--#{$prefix}emphasis-color-rgb, 0,0,0), 0.03);
     --bslib-dashboard-sidebar-bg: var(--#{$prefix}body-bg);
     --bslib-dashboard-sidebar-main-bg: var(--#{$prefix}body-bg);
+    --#{$prefix}card-border-color: var(--bslib-dashboard-border-color-translucent, var(--#{$prefix}border-color-translucent));
+    --bslib-sidebar-bg: var(--#{$prefix}body-bg);
+    --bslib-sidebar-fg: var(--#{$prefix}color);
   }
 
-  .bslib-page-sidebar, .bslib-page-navbar {
-    .bslib-sidebar-layout {
-      --bslib-sidebar-bg: var(--bslib-dashboard-sidebar-bg);
-      --bslib-sidebar-main-bg: var(--bslib-dashboard-sidebar-main-bg);
+  .bslib-card {
+    .card-header, .card-footer {
+      background-color: transparent;
+      font-size: 0.9rem;
+    }
+    .card-header {
+      font-weight: $font-weight-semibold;
+      line-height: 1.375rem;
     }
   }
 
-  .bslib-page-sidebar {
-    --bslib-page-sidebar-title-bg: transparent;
-    --bslib-page-sidebar-title-color: var(--#{$prefix}body-color);
-    > .bslib-sidebar-layout {
-      --bslib-sidebar-main-bg: var(--bslib-dashboard-main-bg);
-      > .main {
-        @include bslib-box-shadows;
-      }
+  // Set the background color of the page or main content area
+  .bslib-page-dashboard, .bslib-page-sidebar, .bslib-page-navbar {
+    --bslib-dashboard-main-bg: rgba(var(--#{$prefix}emphasis-color-rgb, 0,0,0), 0.03);
+    background-color: var(--bslib-dashboard-main-bg);
+
+    // But make sure that the first layout sidebar is transparent
+    // (unless the user has explicitly set a background color)
+    .bslib-sidebar-layout:not([style*="--_main-bg"]) .main {
+      background-color: transparent;
+    }
+    // and make sure that any nested sidebars have normal, expected behavior
+    .bslib-sidebar-layout .bslib-sidebar-layout .main {
+      background-color: var(--_main-bg);
     }
   }
 
-  .bslib-page-navbar {
-
+  .bslib-page-navbar, .bslib-page-dashboard {
     > .navbar {
-      --bslib-navbar-default-bg: transparent;
+      --bslib-navbar-default-bg: var(--#{$prefix}body-bg);
       --bslib-navbar-inverse-bg: var(--#{$prefix}body-color);
     }
 
@@ -153,13 +160,18 @@ $bslib-checkbox-radio-margin-right: 0.35em !default;
       > .bslib-sidebar-layout,
       > .tab-content > .tab-pane.active.html-fill-container > .bslib-sidebar-layout.html-fill-item {
         border-top: none !important; // Make sure we don't end up w/ a double border
-        --bslib-sidebar-main-bg: var(--bslib-dashboard-main-bg);
-        > .main {
-          @include bslib-box-shadows;
-        }
       }
     }
   }
+
+  .bslib-page-sidebar {
+    --bslib-page-sidebar-title-bg: var(--#{$prefix}body-bg);
+    --bslib-page-sidebar-title-color: var(--#{$prefix}body-color);
+
+    .bslib-page-title {
+      border-color: var(--#{$prefix}border-color-translucent);
+    }
+  }
 }
 
 // By default, non-active .nav links reflect the primary color. This styling
@@ -306,9 +318,3 @@ $icon-classes: ("bi", "fa", "fas", "far", "fab", "material-icons") !default;
     margin-bottom: 0;
   }
 }
-
-@include color-mode(dark) {
-  .shiny-notification.shiny-notification {
-    box-shadow: $box-shadow-dark;
-  }
-}

inst/builtin/bs5/shiny/_variables.scss

@@ -97,28 +97,44 @@ $table-hover-bg: rgba($primary, 0.1) !default;
 $table-striped-order: even !default;
 
 // Box Shadows
+// => These are shiny-preset-specific, hoping Bootstrap adds something like this
+$bslib-box-shadow-color-rgb: 29, 31, 33 !default;
+$bslib-box-shadow-color-rgb-dark: 0, 0, 0 !default;
+
+$box-shadow-sm:
+  0px 1px 2px RGBA(var(--bslib-box-shadow-color-rgb), .1),
+  0px 2px 3px RGBA(var(--bslib-box-shadow-color-rgb), 0.1),
+  0px 3px 8px RGBA(var(--bslib-box-shadow-color-rgb), 0.1) !default;
+
 $box-shadow:
-  0px 1px 2px rgba(29, 31, 33,.1),
-  0px 3px 7px rgba(29, 31, 33,.1),
-  0px 12px 30px rgba(29, 31, 33,.08) !default;
+  0px 1px 2px RGBA(var(--bslib-box-shadow-color-rgb), .1),
+  0px 3px 7px RGBA(var(--bslib-box-shadow-color-rgb), .1),
+  0px 12px 30px RGBA(var(--bslib-box-shadow-color-rgb), .08) !default;
 
-// A shiny-preset-specific variable, hoping Bootstrap adds something like this
-$box-shadow-dark:
-  0px 1px 2px rgba(0, 0, 0,.1),
-  0px 3px 7px rgba(0, 0, 0,.1),
-  0px 12px 30px rgba(0, 0, 0,.08) !default;
+$box-shadow-lg:
+  0px 16px 48px RGBA(var(--bslib-box-shadow-color-rgb), .1),
+  0px 2px 3px RGBA(var(--bslib-box-shadow-color-rgb), 0.1),
+  0px 16px 46px RGBA(var(--bslib-box-shadow-color-rgb), 0.1) !default;
 
 // Cards
 $card-border-radius: 8px !default;
 
-// Borders
-$border-color-translucent: RGBA(40, 70, 94, 0.1) !default;
-$border-color-translucent-dark: RGBA(255, 255, 255, 0.1) !default;
-
-// bslib variables
-$bslib-enable-shadows: true !default;
+// bslib Dashboard Styles
+$bslib-dashboard-design: true !default;
+// "Dashboard" styles give you:
+// * softer borders
+// * white cards
+// * box shadow on cards
+// * white sidebars
+// * light gray background in the main container(s)
+// * white navbar and title panel
+
+$bslib-enable-shadows: $bslib-dashboard-design !default
 $bslib-value-box-enable-shadow: $bslib-enable-shadows !default;
 
+$border-color-translucent: if($bslib-dashboard-design, rgba(40, 70, 94, 0.1), null) !default;
+$border-color-translucent-dark: if($bslib-dashboard-design, rgba(255, 255, 255, 0.1), null) !default;
+
 // Modals
 $modal-dialog-margin-y-sm-up: 10% !default;
 $modal-header-border-width: none !default;