De-dupe .table-dark, add new border color utilities, and update table docs

scss/_tables.scss

@@ -1,3 +1,5 @@
+// stylelint-disable comment-empty-line-before
+
 //
 // Basic Bootstrap table
 //
@@ -8,11 +10,17 @@
   color: $table-color;
   vertical-align: $table-cell-vertical-align;
   background-color: $table-bg; // Reset for nesting within parents with `background-color`.
+  border-color: $table-border-color;
 
   th,
   td {
     padding: $table-cell-padding;
-    border-bottom: $table-border-width solid $table-border-color;
+    // Table cells will only inherit if you use longhand properties
+    /* clean-css ignore:start */
+    border-color: inherit;
+    border-bottom-style: solid;
+    border-bottom-width: $table-border-width;
+    /* clean-css ignore:end */
   }
 
   tbody {
@@ -21,11 +29,14 @@
 
   thead th {
     vertical-align: bottom;
-    border-bottom-color: $table-head-border-color;
   }
 
   tbody + tbody {
-    border-top: (2 * $table-border-width) solid $table-border-color;
+    /* clean-css ignore:start */
+    border-color: inherit;
+    border-top-style: solid;
+    border-top-width: (2 * $table-border-width);
+    /* clean-css ignore:end */
   }
 }
 
@@ -47,18 +58,14 @@
 // Add or remove borders all around the table and between all the columns.
 
 .table-bordered {
-  border: $table-border-width solid $table-border-color;
+  border-width: $table-border-width;
 
   th,
   td {
-    border: $table-border-width solid $table-border-color;
-  }
-
-  thead {
-    th,
-    td {
-      border-bottom-width: 2 * $table-border-width;
-    }
+    /* clean-css ignore:start */
+    border-style: solid;
+    border-width: $table-border-width;
+    /* clean-css ignore:end */
   }
 }
 
@@ -75,25 +82,33 @@
 //
 // Default zebra-stripe styles (alternating gray and transparent backgrounds)
 
+// stylelint-disable selector-max-type
 .table-striped {
-  tbody tr:nth-of-type(#{$table-striped-order}) {
-    background-color: $table-accent-bg;
+  > tbody > tr:nth-of-type(#{$table-striped-order}) {
+    > td,
+    > th {
+      background-image: linear-gradient($table-accent-bg, $table-accent-bg);
+    }
   }
 }
+// stylelint-enable selector-max-type
 
 
 // Hover effect
 //
 // Placed here since it has to come after the potential zebra striping
 
+// stylelint-disable selector-max-type
 .table-hover {
-  tbody tr {
-    &:hover {
+  > tbody > tr:hover {
+    > td,
+    > th {
       color: $table-hover-color;
-      background-color: $table-hover-bg;
+      background-image: linear-gradient($table-hover-bg, $table-hover-bg);
     }
   }
 }
+// stylelint-enable selector-max-type
 
 
 // Table backgrounds
@@ -108,60 +123,6 @@
 @include table-row-variant(active, $table-active-bg);
 
 
-// Dark styles
-//
-// Same table markup, but inverted color scheme: dark background and light text.
-
-// stylelint-disable-next-line no-duplicate-selectors
-.table {
-  .thead-dark {
-    th {
-      color: $table-dark-color;
-      background-color: $table-dark-bg;
-      border-color: $table-dark-border-color;
-    }
-  }
-
-  .thead-light {
-    th {
-      color: $table-head-color;
-      background-color: $table-head-bg;
-      border-color: $table-border-color;
-    }
-  }
-}
-
-.table-dark {
-  color: $table-dark-color;
-  background-color: $table-dark-bg;
-
-  th,
-  td,
-  thead th {
-    border-color: $table-dark-border-color;
-  }
-
-  &.table-bordered {
-    border: 0;
-  }
-
-  &.table-striped {
-    tbody tr:nth-of-type(#{$table-striped-order}) {
-      background-color: $table-dark-accent-bg;
-    }
-  }
-
-  &.table-hover {
-    tbody tr {
-      &:hover {
-        color: $table-dark-hover-color;
-        background-color: $table-dark-hover-bg;
-      }
-    }
-  }
-}
-
-
 // Responsive tables
 //
 // Generate series of `.table-responsive-*` classes for configuring the screen

scss/_utilities.scss

@@ -77,7 +77,15 @@ $utilities: map-merge(
     "border-color": (
       property: border-color,
       class: border,
-      values: map-merge($theme-colors, ("white": $white))
+      values: map-merge(
+        $theme-colors,
+        (
+          "white": $white,
+          "gray-500": $gray-500,
+          "gray-700": $gray-700,
+          "black": $black
+        )
+      )
     ),
     // Sizing utilities
     "width": (
@@ -412,6 +420,9 @@ $utilities: map-merge(
         (
           "body": $body-bg,
           "white": $white,
+          "black": black,
+          "gray-400": $gray-400,
+          "gray-600": $gray-600,
           "transparent": transparent
         )
       )

scss/_variables.scss

@@ -457,27 +457,16 @@ $table-cell-padding-sm:       .25rem !default;
 
 $table-cell-vertical-align:   top !default;
 
-$table-color:                 $body-color !default;
+$table-color:                 null !default;
 $table-bg:                    null !default;
 $table-accent-bg:             rgba($black, .05) !default;
-$table-hover-color:           $table-color !default;
+$table-hover-color:           null !default;
 $table-hover-bg:              rgba($black, .075) !default;
 $table-active-bg:             $table-hover-bg !default;
 
 $table-border-width:          $border-width !default;
 $table-border-color:          $border-color !default;
 
-$table-head-bg:               $gray-200 !default;
-$table-head-color:            $gray-700 !default;
-$table-head-border-color:     $gray-700 !default;
-
-$table-dark-color:            $white !default;
-$table-dark-bg:               $gray-800 !default;
-$table-dark-accent-bg:        rgba($white, .05) !default;
-$table-dark-hover-color:      $table-dark-color !default;
-$table-dark-hover-bg:         rgba($white, .075) !default;
-$table-dark-border-color:     lighten($table-dark-bg, 7.5%) !default;
-
 $table-striped-order:         odd !default;
 
 $table-caption-color:         $text-muted !default;

scss/mixins/_table-row.scss

@@ -1,39 +1,11 @@
-// Tables
-
 @mixin table-row-variant($state, $background, $border: null) {
   // Exact selectors below required to override `.table-striped` and prevent
   // inheritance to nested tables.
   .table-#{$state} {
-    &,
-    > th,
-    > td {
-      background-color: $background;
-    }
+    background-color: $background;
 
     @if $border != null {
-      th,
-      td,
-      thead th,
-      tbody + tbody {
-        border-color: $border;
-      }
-    }
-  }
-
-  // Hover states for `.table-hover`
-  // Note: this is not available for cells or rows within `thead` or `tfoot`.
-  .table-hover {
-    $hover-background: darken($background, 5%);
-
-    .table-#{$state} {
-      &:hover {
-        background-color: $hover-background;
-
-        > td,
-        > th {
-          background-color: $hover-background;
-        }
-      }
+      border-color: $border;
     }
   }
 }

site/assets/scss/_content.scss

@@ -59,6 +59,10 @@
       }
     }
 
+    thead {
+      border-color: $gray-900;
+    }
+
     // Prevent breaking of code
     td:first-child > code {
       white-space: nowrap;