Fix card cap and sidebar mostly in dashboard design (#1056)

NEWS.md

@@ -6,6 +6,8 @@
 
 * bslib now avoids re-defining its components when used in a context where they are already available, e.g. in a Quarto dashboard. (#1045)
 
+* Improved the appearance of cards with sidebars and headers in the Shiny preset, especially when custom card color themes are used, e.g. with `text-bg-primary` or other Bootstrap utility classes. (#1056)
+
 # bslib 0.7.0
 
 This large release includes many improvements and bug fixes for newer UI components like `layout_columns()`, `card()`, and `sidebar()`. In addition, the new `input_task_button()` offers a drop-in replacement for `shiny::actionButton()` (to prevent multiple submissions of the same operation) as well as pairing nicely with the new `shiny::ExtendedTask` for implementing truly non-blocking operations in Shiny.

inst/builtin/bs5/shiny/_rules.scss

@@ -134,18 +134,20 @@ $bslib-checkbox-radio-margin-right: 0.35em !default;
     --bslib-dashboard-sidebar-main-bg: var(--#{$prefix}body-bg);
     --bslib-dashboard-main-bg: rgb(247, 247, 247);
     --#{$prefix}card-border-color: var(--bslib-dashboard-border-color-translucent, var(--#{$prefix}border-color-translucent));
-    --bslib-dashboard-card-cap-bg: var(--#{$prefix}body-bg);
     --bslib-dashboard-card-header-font-weight: #{$font-weight-semibold};
-    --bslib-sidebar-bg: var(--#{$prefix}body-bg);
-    --bslib-sidebar-fg: var(--#{$prefix}color);
+    --bslib-sidebar-bg: RGBA(var(--#{$prefix}body-bg-rgb), 0.05);
   }
 
   @include color-mode(dark) {
     --bslib-dashboard-main-bg: rgb(20, 20, 24);
   }
 
   .bslib-card {
-    --#{$prefix}card-cap-bg: var(--bslib-dashboard-card-cap-bg);
+    // We don't want to get in the way of $card-cap-bg, which is used by the shiny preset
+    // when the dashboard design is disabled. This next line disables the default background
+    // color of the card header, giving us the white card headers we want, without also
+    // blocking inheritence via `.text-bg-{theme}` classes or others.
+    --#{$prefix}card-cap-bg: ;
     .card-header, .card-footer {
       font-size: 0.9rem;
     }

inst/components/scss/sidebar.scss

@@ -1,6 +1,6 @@
 // User-facing variables, use for theming
 $bslib-sidebar-bg: rgba(var(--bs-emphasis-color-rgb, 0,0,0), 0.05) !default;
-$bslib-sidebar-fg: var(--bs-emphasis-color, black) !default;
+$bslib-sidebar-fg: inherit !default;
 $bslib-sidebar-toggle-bg: rgba(var(--bs-emphasis-color-rgb, 0,0,0), 0.1) !default;
 $bslib-sidebar-border: var(--bs-card-border-width, #{$card-border-width}) solid var(--bs-card-border-color, #{$card-border-color}) !default;
 
@@ -368,6 +368,15 @@ $bslib-sidebar-column-sidebar: Min(calc(100% - var(--_padding-icon)), var(--_sid
         padding-left: var(--_padding);
         padding-right: var(--_padding);
       }
+
+      // Soften main area when sidebar is expanded over content
+      > .main {
+        opacity: 0.33;
+        transition: opacity var(--_transition-easing-x) var(--_transition-duration);
+      }
+      &.sidebar-collapsed > .main {
+        opacity: 1;
+      }
     }
   }
 }