Add color and border-color css variables to table

Close #34944
twbs · Oct 7, 2021 · c3619db · c3619db
1 parent c331a15
commit c3619db
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 4 deletions.
diff --git 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
@@ -5,17 +5,20 @@
     $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};
     --#{$variable-prefix}table-active-color: #{color-contrast($active-bg)};
     --#{$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