Properly use the nav tabs border color

fixes #4868

Author: dragonstyle

news/changelog-1.3.md

@@ -185,6 +185,7 @@
 
 - HTML output will not decorate links within source code (for example, from `code-link: true`) with external icons. (#3755)
 - Use `toc-expand` to control to what level the TOC will expand by default in HTML documents.
+- Improve tab border coloring across themes ([#4868](https://github.com/quarto-dev/quarto-cli/issues/4868)).
 
 ## Miscellaneous
 

src/resources/formats/html/bootstrap/_bootstrap-functions.scss

@@ -79,6 +79,8 @@
   $gray-300: #dee2e6 !default;
   $blue: #0d6efd !default;
 
+  $simplex-border-mix: mix($white, $black, 93.5%) !default;
+
   $theme-overrides: (
     cerulean: (
       navbar-fg: $white,
@@ -138,6 +140,8 @@
       navbar-bg: $white,
       navbar-fg: rgba($black, 0.6),
       navbar-hl: $black,
+      nav-tabs-link-active-border-color: $simplex-border-mix $simplex-border-mix
+        transparent,
     ),
     sketchy: (
       navbar-fg: $white,

src/resources/formats/html/bootstrap/_bootstrap-rules.scss

@@ -747,11 +747,15 @@ $code-block-bg-color: quarto-color.adjust(
   }
 }
 
+.nav-tabs .nav-item {
+  margin-top: 1px;
+}
+
 .tab-content {
   margin-top: 0px;
-  border-left: $border-color 1px solid;
-  border-right: $border-color 1px solid;
-  border-bottom: $border-color 1px solid;
+  border-left: $nav-tabs-border-color $nav-tabs-border-width solid;
+  border-right: $nav-tabs-border-color $nav-tabs-border-width solid;
+  border-bottom: $nav-tabs-border-color $nav-tabs-border-width solid;
   margin-left: 0;
   padding: 1em;
   margin-bottom: 1em;

src/resources/formats/html/bootstrap/_bootstrap-variables.scss

@@ -180,6 +180,21 @@ $input-border-color: theme-override-value(
   if(variable-exists(input-border-color), $input-border-color, null)
 );
 
+// Same as above (default is respected if there is not override
+// so the `!default` keyword is omitted). Some themes don't provide
+// active tab border colors and they customize the main border
+// color which results in the tabs looking slightly weird since the
+// colors may not match (for example, simplex).
+$nav-tabs-link-active-border-color: theme-override-value(
+  $theme-name,
+  "nav-tabs-link-active-border-color",
+  if(
+    variable-exists(nav-tabs-link-active-border-color),
+    $nav-tabs-link-active-border-color,
+    null
+  )
+);
+
 /* GRID VARIABLES */
 // The left hand sidebar
 $grid-sidebar-width: 250px !default;