table: Add border color relative to theme for accessibility (#25755)

diff --git a/scss/_tables.scss b/scss/_tables.scss
index 5fa6a866294bd7e00949e6670ec4380594c68d58..92d4ec9b5b9a79f52d814edd89c4efdb1cc0e2f3 100644 (file)
--- a/scss/_tables.scss
+++ b/scss/_tables.scss
@@ -100,7 +100,7 @@
 // inheritance to nested tables.
 
 @each $color, $value in $theme-colors {
-  @include table-row-variant($color, theme-color-level($color, -9));
+  @include table-row-variant($color, theme-color-level($color, $table-bg-level), theme-color-level($color, $table-border-level));
 }
 
 @include table-row-variant(active, $table-active-bg);

diff --git a/scss/_variables.scss b/scss/_variables.scss
index a8fc43280611333dd4c1dc0057a6f7c20e8f5146..78a532b425d3064c4e85653b7c24611c5e45538a 100644 (file)
--- a/scss/_variables.scss
+++ b/scss/_variables.scss
@@ -349,6 +349,9 @@ $table-striped-order:         odd !default;
 
 $table-caption-color:         $text-muted !default;
 
+$table-bg-level:              -9 !default;
+$table-border-level:          -6 !default;
+
 
 // Buttons + Forms
 //

diff --git a/scss/mixins/_table-row.scss b/scss/mixins/_table-row.scss
index 84f1d305aaf5287dbdf5baea2ff561ff57e425ec..f8d61869a482e169f0649934f285a838bacaed41 100644 (file)
--- a/scss/mixins/_table-row.scss
+++ b/scss/mixins/_table-row.scss
@@ -1,6 +1,6 @@
 // Tables
 
-@mixin table-row-variant($state, $background) {
+@mixin table-row-variant($state, $background, $border: null) {
   // Exact selectors below required to override `.table-striped` and prevent
   // inheritance to nested tables.
   .table-#{$state} {
@@ -9,6 +9,15 @@
     > td {
       background-color: $background;
     }
+
+    @if $border != null {
+      th,
+      td,
+      thead th,
+      tbody + tbody {
+        border-color: $border;
+      }
+    }
   }
 
   // Hover states for `.table-hover`