feat(value-box): Tweaks for dark mode (#791)

Author: gadenbuie

inst/builtin/bs5/shiny/_rules.scss

@@ -97,19 +97,30 @@ $icon-classes: ("bi", "fa", "fas", "far", "fab", "material-icons") !default;
   }
 }
 
+
 .bslib-value-box {
-  &.text-info,
-  &.text-cyan {
-    color: #028097 !important; // Contrast 4.63
+  $cyan: #028097; // Contrast 4.63
+  $warning: #A87600; // Contrast 4 (okay for 16px+ text)
+
+  &.text-info {
+    &, &.text-cyan {
+      --bslib-color-fg: $cyan !important;
+    }
+    color: $cyan !important;
   }
+
   &.text-light {
-    color: $gray-600 !important;
+    --bslib-color-fg: $gray-600 !important;
   }
-  &.text-yellow.text-yellow,
-  &.text-warning.text-warning {
-    color: #A87600; // Contrast 4 (okay for 16px+ text)
+
+  &.text-warning {
+    &, &.text-yellow {
+      --bslib-color-fg: $warning !important;
+    }
+    color: $warning !important;
   }
+
   &.text-teal.text-teal {
-    color: #008558; // Contrast 4.67
+    --bslib-color-fg: #008558; // Contrast 4.67
   }
 }

inst/components/dist/value_box/value_box.css

@@ -233,3 +233,10 @@ $bslib-value-box-horizontal-break-point: 300px;
     }
   }
 }
+
+@include color-mode(dark) {
+  .bslib-value-box {
+    // Bootstrap doesn't have a dark shadow, but the default isn't quite right
+    --bslib-value-box-shadow: 0 0.5rem 1rem rgb(0 0 0 / 50%);
+  }
+}