Add color and border-color css variables to tables (#35055)

diff --git a/scss/_tables.scss b/scss/_tables.scss
index e10e4c4e4cb375b6eaa082f861b1cadea1bbcc5c..30e898b580a441c5e237bd3cef14cb9575b9a409 100644 (file)
--- a/scss/_tables.scss
+++ b/scss/_tables.scss
@@ -3,7 +3,9 @@
 //
 
 .table {
+  --#{$variable-prefix}table-color: #{$table-color};
   --#{$variable-prefix}table-bg: #{$table-bg};
+  --#{$variable-prefix}table-border-color: #{$table-border-color};
   --#{$variable-prefix}table-accent-bg: #{$table-accent-bg};
   --#{$variable-prefix}table-striped-color: #{$table-striped-color};
   --#{$variable-prefix}table-striped-bg: #{$table-striped-bg};
@@ -14,9 +16,9 @@
 
   width: 100%;
   margin-bottom: $spacer;
-  color: $table-color;
+  color: var(--#{$variable-prefix}table-color);
   vertical-align: $table-cell-vertical-align;
-  border-color: $table-border-color;
+  border-color: var(--#{$variable-prefix}table-border-color);
 
   // Target th & td
   // We need the child combinator to prevent styles leaking to nested tables which doesn't have a `.table` class.

diff --git a/scss/mixins/_table-variants.scss b/scss/mixins/_table-variants.scss
index 9fd0fb02a42c4ea47054c40a9ab1312138780bc9..cad70a19b1c9665bbaf16cab853b9997d1800727 100644 (file)
--- a/scss/mixins/_table-variants.scss
+++ b/scss/mixins/_table-variants.scss
@@ -5,8 +5,11 @@
     $hover-bg: mix($color, $background, percentage($table-hover-bg-factor));
     $striped-bg: mix($color, $background, percentage($table-striped-bg-factor));
     $active-bg: mix($color, $background, percentage($table-active-bg-factor));
+    $border-color: mix($color, $background, percentage($table-border-factor));
 
+    --#{$variable-prefix}table-color: #{$color};
     --#{$variable-prefix}table-bg: #{$background};
+    --#{$variable-prefix}table-border-color: #{$border-color};
     --#{$variable-prefix}table-striped-bg: #{$striped-bg};
     --#{$variable-prefix}table-striped-color: #{color-contrast($striped-bg)};
     --#{$variable-prefix}table-active-bg: #{$active-bg};
@@ -14,8 +17,8 @@
     --#{$variable-prefix}table-hover-bg: #{$hover-bg};
     --#{$variable-prefix}table-hover-color: #{color-contrast($hover-bg)};
 
-    color: $color;
-    border-color: mix($color, $background, percentage($table-border-factor));
+    color: var(--#{$variable-prefix}table-color);
+    border-color: var(--#{$variable-prefix}table-border-color);
   }
 }
 // scss-docs-end table-variant