diff --git a/scss/_root.scss b/scss/_root.scss
index 4776bff64f..c869697de4 100644
--- a/scss/_root.scss
+++ b/scss/_root.scss
@@ -150,6 +150,10 @@
--#{$prefix}icon-filter: none;
--#{$prefix}select-indicator: #{$form-select-indicator};
--#{$prefix}select-disabled-indicator: #{$form-select-disabled-indicator};
+ --#{$prefix}table-striped-bg-factor: #{$table-striped-bg-factor};
+ --#{$prefix}table-striped-hover-bg-factor: #{$table-striped-hover-bg-factor};
+ --#{$prefix}table-hover-bg-factor: #{$table-hover-bg-factor};
+ --#{$prefix}table-active-bg-factor: #{$table-active-bg-factor};
// ******* End additions for dark-mode
}
@@ -238,6 +242,10 @@
--#{$prefix}icon-filter: #{$invert-filter};
--#{$prefix}select-indicator: #{$form-select-indicator-dark};
--#{$prefix}select-disabled-indicator: #{$form-select-disabled-indicator-dark};
+ --#{$prefix}table-striped-bg-factor: .135; // .2 if solid bg
+ --#{$prefix}table-striped-hover-bg-factor: .855; // .865 if solid bg
+ --#{$prefix}table-hover-bg-factor: .135; // .2 if solid bg
+ --#{$prefix}table-active-bg-factor: .565; // .6 if solid bg
// ******* End additions for dark-mode
// scss-docs-end root-dark-mode-vars
}
diff --git a/scss/_variables.scss b/scss/_variables.scss
index 4a13218636..44d0a519cb 100644
--- a/scss/_variables.scss
+++ b/scss/_variables.scss
@@ -888,21 +888,21 @@ $table-th-font-weight: null !default;
$table-striped-color: $table-color !default;
$table-striped-bg-factor: .065 !default; // Boosted mod
-$table-striped-bg: rgba(var(--#{$prefix}emphasis-color-rgb), $table-striped-bg-factor) !default;
-$table-striped-hover-color: $table-color !default; // Boosted mod
+$table-striped-bg: rgba(var(--#{$prefix}emphasis-color-rgb), var(--#{$prefix}table-striped-bg-factor)) !default; // Boosted mod: instead of `rgba(var(--#{$prefix}emphasis-color-rgb), $table-striped-bg-factor)`
+$table-striped-hover-color: var(--#{$prefix}black) !default; // Boosted mod
$table-striped-hover-bg-factor: .4 !default; // Boosted mod
-$table-striped-hover-bg: rgba(var(--#{$prefix}emphasis-color-rgb), $table-striped-hover-bg-factor) !default; // Boosted mod
+$table-striped-hover-bg: rgba(var(--#{$prefix}emphasis-color-rgb), var(--#{$prefix}table-striped-hover-bg-factor)) !default; // Boosted mod
$table-variant-striped-bg-factor: .2 !default; // Boosted mod
$table-variant-striped-hover-bg-factor: .865 !default; // Boosted mod
-$table-active-color: $table-color !default;
+$table-active-color: var(--#{$prefix}black) !default; // Boosted mod: instead of `$table-color`
$table-active-bg-factor: .135 !default; // Boosted mod
-$table-active-bg: rgba(var(--#{$prefix}emphasis-color-rgb), $table-active-bg-factor) !default;
+$table-active-bg: rgba(var(--#{$prefix}emphasis-color-rgb), var(--#{$prefix}table-active-bg-factor)) !default; // Boosted mod: instead of `rgba(var(--#{$prefix}emphasis-color-rgb), $table-active-bg-factor)`
$table-variant-active-bg-factor: .6 !default; // Boosted mod
$table-hover-color: $table-color !default;
$table-hover-bg-factor: .065 !default; // Boosted mod
-$table-hover-bg: rgba(var(--#{$prefix}emphasis-color-rgb), $table-hover-bg-factor) !default;
+$table-hover-bg: rgba(var(--#{$prefix}emphasis-color-rgb), var(--#{$prefix}table-hover-bg-factor)) !default; // Boosted mod: instead of `rgba(var(--#{$prefix}emphasis-color-rgb), $table-hover-bg-factor)`
$table-variant-hover-bg-factor: .2 !default; // Boosted mod
$table-border-factor: .4 !default; // Boosted mod
diff --git a/site/content/docs/5.3/content/tables.md b/site/content/docs/5.3/content/tables.md
index 6bc770bc16..e2071fcc6a 100644
--- a/site/content/docs/5.3/content/tables.md
+++ b/site/content/docs/5.3/content/tables.md
@@ -914,7 +914,7 @@ Use SVG or PNG to display icons or thumbnails in your compact table data cell el
-
+
Cell text
|
Cell text |
@@ -951,7 +951,7 @@ Use SVG or PNG to display icons or thumbnails in your compact table data cell el
-
+
Cell text
|
Cell text |
@@ -1068,7 +1068,7 @@ Use SVG or PNG to display icons or thumbnails in your compact table data cell el
...
-
+
Cell text
|
...
diff --git a/site/content/docs/5.3/dark-mode.md b/site/content/docs/5.3/dark-mode.md
index 4d8df2a11e..9becb00320 100644
--- a/site/content/docs/5.3/dark-mode.md
+++ b/site/content/docs/5.3/dark-mode.md
@@ -4504,6 +4504,385 @@ sitemap_exclude: true
+## Contents
+
+### Tables
+
+No theme
+
+
+
+ Boosted tables basic and hover look
+
+ # | First | Last | Handle |
+
+
+ 1 | Active | Row | @activeRow |
+ 2 | Active | Cell | @activeCell |
+ 3 | Random | @random |
+ 4 | Skye | Island | @scotland |
+ 5 | Ring of | Kerry | @ireland |
+
+
+
+ Boosted tables striped and hover look
+
+ # | First | Last | Handle |
+
+
+ 1 | Active | Row | @activeRow |
+ 2 | Active | Cell | @activeCell |
+ 3 | Random | @random |
+ 4 | Skye | Island | @scotland |
+ 5 | Ring of | Kerry | @ireland |
+
+
+
+ Boosted tables when nested
+
+ # | First | Last | Handle |
+
+
+
+
+ Boosted nested table in active row
+
+ # | First | Last | Handle |
+
+
+ 1 | Active | Row | @activeRow |
+ 2 | Skye | Island | @scotland |
+
+
+ |
+
+
+ Boosted nested table in striped row
+
+ # | First | Last | Handle |
+
+
+ 1 | Active | Row | @activeRow |
+ 2 | Skye | Island | @scotland |
+
+
+ |
+
+
+ Boosted nested table in striped row
+
+ # | First | Last | Handle |
+
+
+ 1 | Active | Row | @activeRow |
+ 2 | Skye | Island | @scotland |
+
+
+ |
+
+
+
+
+Dark theme on container
+
+
+
+ Boosted tables basic and hover look
+
+ # | First | Last | Handle |
+
+
+ 1 | Active | Row | @activeRow |
+ 2 | Active | Cell | @activeCell |
+ 3 | Random | @random |
+ 4 | Skye | Island | @scotland |
+ 5 | Ring of | Kerry | @ireland |
+
+
+
+ Boosted tables striped and hover look
+
+ # | First | Last | Handle |
+
+
+ 1 | Active | Row | @activeRow |
+ 2 | Active | Cell | @activeCell |
+ 3 | Random | @random |
+ 4 | Skye | Island | @scotland |
+ 5 | Ring of | Kerry | @ireland |
+
+
+
+ Boosted tables when nested
+
+ # | First | Last | Handle |
+
+
+
+
+ Boosted nested table in active row
+
+ # | First | Last | Handle |
+
+
+ 1 | Active | Row | @activeRow |
+ 2 | Skye | Island | @scotland |
+
+
+ |
+
+
+ Boosted nested table in striped row
+
+ # | First | Last | Handle |
+
+
+ 1 | Active | Row | @activeRow |
+ 2 | Skye | Island | @scotland |
+
+
+ |
+
+
+ Boosted nested table in striped row
+
+ # | First | Last | Handle |
+
+
+ 1 | Active | Row | @activeRow |
+ 2 | Skye | Island | @scotland |
+
+
+ |
+
+
+
+
+Light theme on container
+
+
+
+ Boosted tables basic and hover look
+
+ # | First | Last | Handle |
+
+
+ 1 | Active | Row | @activeRow |
+ 2 | Active | Cell | @activeCell |
+ 3 | Random | @random |
+ 4 | Skye | Island | @scotland |
+ 5 | Ring of | Kerry | @ireland |
+
+
+
+ Boosted tables striped and hover look
+
+ # | First | Last | Handle |
+
+
+ 1 | Active | Row | @activeRow |
+ 2 | Active | Cell | @activeCell |
+ 3 | Random | @random |
+ 4 | Skye | Island | @scotland |
+ 5 | Ring of | Kerry | @ireland |
+
+
+
+ Boosted tables when nested
+
+ # | First | Last | Handle |
+
+
+
+
+ Boosted nested table in active row
+
+ # | First | Last | Handle |
+
+
+ 1 | Active | Row | @activeRow |
+ 2 | Skye | Island | @scotland |
+
+
+ |
+
+
+ Boosted nested table in striped row
+
+ # | First | Last | Handle |
+
+
+ 1 | Active | Row | @activeRow |
+ 2 | Skye | Island | @scotland |
+
+
+ |
+
+
+ Boosted nested table in striped row
+
+ # | First | Last | Handle |
+
+
+ 1 | Active | Row | @activeRow |
+ 2 | Skye | Island | @scotland |
+
+
+ |
+
+
+
+
+Dark theme on component
+
+
+
+ Boosted tables basic and hover look
+
+ # | First | Last | Handle |
+
+
+ 1 | Active | Row | @activeRow |
+ 2 | Active | Cell | @activeCell |
+ 3 | Random | @random |
+ 4 | Skye | Island | @scotland |
+ 5 | Ring of | Kerry | @ireland |
+
+
+
+ Boosted tables striped and hover look
+
+ # | First | Last | Handle |
+
+
+ 1 | Active | Row | @activeRow |
+ 2 | Active | Cell | @activeCell |
+ 3 | Random | @random |
+ 4 | Skye | Island | @scotland |
+ 5 | Ring of | Kerry | @ireland |
+
+
+
+ Boosted tables when nested
+
+ # | First | Last | Handle |
+
+
+
+
+ Boosted nested table in active row
+
+ # | First | Last | Handle |
+
+
+ 1 | Active | Row | @activeRow |
+ 2 | Skye | Island | @scotland |
+
+
+ |
+
+
+ Boosted nested table in striped row
+
+ # | First | Last | Handle |
+
+
+ 1 | Active | Row | @activeRow |
+ 2 | Skye | Island | @scotland |
+
+
+ |
+
+
+ Boosted nested table in striped row
+
+ # | First | Last | Handle |
+
+
+ 1 | Active | Row | @activeRow |
+ 2 | Skye | Island | @scotland |
+
+
+ |
+
+
+
+
+Light theme on component
+
+
+
+ Boosted tables basic and hover look
+
+ # | First | Last | Handle |
+
+
+ 1 | Active | Row | @activeRow |
+ 2 | Active | Cell | @activeCell |
+ 3 | Random | @random |
+ 4 | Skye | Island | @scotland |
+ 5 | Ring of | Kerry | @ireland |
+
+
+
+ Boosted tables striped and hover look
+
+ # | First | Last | Handle |
+
+
+ 1 | Active | Row | @activeRow |
+ 2 | Active | Cell | @activeCell |
+ 3 | Random | @random |
+ 4 | Skye | Island | @scotland |
+ 5 | Ring of | Kerry | @ireland |
+
+
+
+ Boosted tables when nested
+
+ # | First | Last | Handle |
+
+
+
+
+ Boosted nested table in active row
+
+ # | First | Last | Handle |
+
+
+ 1 | Active | Row | @activeRow |
+ 2 | Skye | Island | @scotland |
+
+
+ |
+
+
+ Boosted nested table in striped row
+
+ # | First | Last | Handle |
+
+
+ 1 | Active | Row | @activeRow |
+ 2 | Skye | Island | @scotland |
+
+
+ |
+
+
+ Boosted nested table in striped row
+
+ # | First | Last | Handle |
+
+
+ 1 | Active | Row | @activeRow |
+ 2 | Skye | Island | @scotland |
+
+
+ |
+
+
+
+
## Forms
### Color