fix(preset): Follow $bslib-sidebar-bg when in dashboard mode (#1133)

* fix(preset): Follow `$bslib-sidebar-bg` when in dashboard mode

Fixes #1126
Also allows `$bslib-sidebar-bg` to set `$bslib-sidebar-fg` with contrasting color if set by the user.

* fix typo

* fix: Call `color-contrast` only if `type-of() == "color"`

inst/builtin/bs5/shiny/_rules.scss

@@ -130,12 +130,9 @@ $bslib-checkbox-radio-margin-right: 0.35em !default;
 @if $bslib-dashboard-design {
 
   :root {
-    --bslib-dashboard-sidebar-bg: var(--#{$prefix}body-bg);
-    --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-header-font-weight: #{$font-weight-semibold};
-    --bslib-sidebar-bg: RGBA(var(--#{$prefix}body-bg-rgb), 0.05);
   }
 
   @include color-mode(dark) {

inst/builtin/bs5/shiny/_variables.scss

@@ -137,6 +137,17 @@ $card-border-radius: 8px !default;
 $bslib-dashboard-design: true !default;
 $bslib-enable-shadows: $bslib-dashboard-design !default;
 
+$bslib-sidebar-bg: null !default;
+$bslib-sidebar-fg: null !default;
+
+@if $bslib-sidebar-bg == null {
+  // if sidebar-bg not set by user, default to body background
+  $bslib-sidebar-bg: RGBA(var(--#{$prefix}body-bg-rgb), 0.05);
+} @else if $bslib-sidebar-fg == null and type-of($bslib-sidebar-bg) == "color" {
+  // if sidebar-bg but not -fg set by the user, find a contrasting color
+  $bslib-sidebar-fg: color-contrast($bslib-sidebar-bg);
+}
+
 $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;
 

inst/components/scss/sidebar.scss

@@ -1,6 +1,19 @@
 // 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(--_main-fg) !default;
+$bslib-sidebar-bg: null !default;
+$bslib-sidebar-fg: null !default;
+
+@if $bslib-sidebar-bg == null {
+  // sidebar bg not set by the user
+  $bslib-sidebar-bg: rgba(var(--bs-emphasis-color-rgb, 0,0,0), 0.05);
+} @else if $bslib-sidebar-fg == null and type-of($bslib-sidebar-bg) == "color" {
+  // sidebar bg set, fg unset
+  $bslib-sidebar-fg: color-contrast($bslib-sidebar-bg);
+}
+@if $bslib-sidebar-fg == null {
+  // sidebar bg and fg were unset
+  $bslib-sidebar-fg: var(--_main-fg);
+}
+
 $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;