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

inst/builtin/bs5/shiny/_rules.scss

@@ -71,24 +71,26 @@ $bslib-checkbox-radio-margin-right: 0.35em !default;
 }
 
 
-@mixin bslib-box-shadows {
+@mixin bslib-dashboard-cards {
 
-  // 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;
+  @if ($bslib-enable-shadows) {
+    // Add box-shadow & remove border from 'top-level' card()/layout_sidebar()
     .bslib-card, .bslib-sidebar-layout {
-      box-shadow: none;
-    }
+      // 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;
+      // Remove outer border, but keep inner borders and borders on nested components
+      border-width: 0;
 
-    // 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;
+      // 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;
+      }
     }
   }
 
@@ -111,34 +113,50 @@ $bslib-checkbox-radio-margin-right: 0.35em !default;
 
 // 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-enable-dashboard {
 
   :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);
+    --bslib-dashboard-border-color-translucent: #{$bslib-dashboard-border-color-translucent};
+    --bslib-dashboard-border-color-translucent-dark: #{$bslib-dashboard-border-color-translucent-dark};
+  }
+
+  .bslib-page-sidebar, .bslib-page-navbar, .bslib-page-dashboard {
+    --#{$prefix}border-color-translucent: var(--bslib-dashboard-border-color-translucent, #{$border-color-translucent});
+  }
+  @include color-mode(dark) {
+    .bslib-page-sidebar, .bslib-page-navbar, .bslib-page-dashboard {
+      --#{$prefix}border-color-translucent: var(--bslib-dashboard-border-color-translucent-dark, #{$border-color-translucent-dark});
+    }
   }
 
-  .bslib-page-sidebar, .bslib-page-navbar {
+  .bslib-page-sidebar, .bslib-page-navbar, .bslib-page-dashboard {
     .bslib-sidebar-layout {
       --bslib-sidebar-bg: var(--bslib-dashboard-sidebar-bg);
       --bslib-sidebar-main-bg: var(--bslib-dashboard-sidebar-main-bg);
     }
   }
 
-  .bslib-page-sidebar {
+  .bslib-page-dashboard {
+    &, & > .bslib-grid > .bslib-grid-item {
+      @include bslib-dashboard-cards;
+    }
+  }
+
+  .bslib-page-sidebar, .bslib-page-dashboard {
     --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;
+        @include bslib-dashboard-cards;
       }
     }
   }
 
-  .bslib-page-navbar {
-
+  .bslib-page-navbar, .bslib-page-dashboard {
     > .navbar {
       --bslib-navbar-default-bg: transparent;
       --bslib-navbar-inverse-bg: var(--#{$prefix}body-color);
@@ -155,7 +173,7 @@ $bslib-checkbox-radio-margin-right: 0.35em !default;
         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;
+          @include bslib-dashboard-cards;
         }
       }
     }

inst/builtin/bs5/shiny/_variables.scss

@@ -111,14 +111,15 @@ $box-shadow-dark:
 // 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-enable-dashboard: true !default;
+$bslib-enable-shadows: $bslib-enable-dashboard !default
 $bslib-value-box-enable-shadow: $bslib-enable-shadows !default;
 
+// bslib Dashboard Styles
+$bslib-dashboard-border-color-translucent: RGBA(40, 70, 94, 0.1) !default;
+$bslib-dashboard-border-color-translucent-dark: RGBA(255, 255, 255, 0.1) !default;
+
 // Modals
 $modal-dialog-margin-y-sm-up: 10% !default;
 $modal-header-border-width: none !default;