From f58a2eba0256af61e91085a11508642003f3b789 Mon Sep 17 00:00:00 2001
From: louismaximepiton <louismaxime.piton@orange.com>
Date: Fri, 9 Sep 2022 16:49:30 +0200
Subject: [PATCH 1/7] Adding the custom cascade to make `.active` work on
 `:hover` and on `.table-striped`.

---
 scss/_tables.scss    | 31 +++++++++++++++++++------------
 scss/_variables.scss |  4 +++-
 2 files changed, 22 insertions(+), 13 deletions(-)

diff --git a/scss/_tables.scss b/scss/_tables.scss
index 1fdd43c6bb5b..e8d12762f576 100644
--- a/scss/_tables.scss
+++ b/scss/_tables.scss
@@ -3,10 +3,16 @@
 //
 
 .table {
+  // Reset needed for nesting tables
+  --#{$prefix}table-color--type: initial;
+  --#{$prefix}table-bg--type: initial;
+  --#{$prefix}table-color--state: initial;
+  --#{$prefix}table-bg--state: initial;
+  // End of reset
   --#{$prefix}table-color: #{$table-color};
   --#{$prefix}table-bg: #{$table-bg};
   --#{$prefix}table-border-color: #{$table-border-color};
-  --#{$prefix}table-accent-bg: #{$table-accent-bg};
+  --#{$prefix}table-accent-bg: #{$table-accent-bg}; // Deprecated in Bootstrap 5.3.0 for CSS variables
   --#{$prefix}table-striped-color: #{$table-striped-color};
   --#{$prefix}table-striped-bg: #{$table-striped-bg};
   --#{$prefix}table-active-color: #{$table-active-color};
@@ -16,7 +22,6 @@
 
   width: 100%;
   margin-bottom: $spacer;
-  color: var(--#{$prefix}table-color);
   vertical-align: $table-cell-vertical-align;
   border-color: var(--#{$prefix}table-border-color);
 
@@ -27,9 +32,11 @@
   // stylelint-disable-next-line selector-max-universal
   > :not(caption) > * > * {
     padding: $table-cell-padding-y $table-cell-padding-x;
+    // Following the precept of cascades: https://codepen.io/miriamsuzanne/full/vYNgodb
+    color: var(--#{$prefix}table-color--state, var(--#{$prefix}table-color--type, var(--#{$prefix}table-color)));
     background-color: var(--#{$prefix}table-bg);
     border-bottom-width: $table-border-width;
-    box-shadow: inset 0 0 0 9999px var(--#{$prefix}table-accent-bg);
+    box-shadow: inset 0 0 0 9999px var(--#{$prefix}table-bg--state, var(--#{$prefix}table-bg--type, transparent));
   }
 
   > tbody {
@@ -103,17 +110,17 @@
 
 // For rows
 .table-striped {
-  > tbody > tr:nth-of-type(#{$table-striped-order}) > * {
-    --#{$prefix}table-accent-bg: var(--#{$prefix}table-striped-bg);
-    color: var(--#{$prefix}table-striped-color);
+  > tbody > tr:nth-of-type(#{$table-striped-order}) {
+    --#{$prefix}table-color--type: var(--#{$prefix}table-striped-color);
+    --#{$prefix}table-bg--type: var(--#{$prefix}table-striped-bg);
   }
 }
 
 // For columns
 .table-striped-columns {
   > :not(caption) > tr > :nth-child(#{$table-striped-columns-order}) {
-    --#{$prefix}table-accent-bg: var(--#{$prefix}table-striped-bg);
-    color: var(--#{$prefix}table-striped-color);
+    --#{$prefix}table-color--type: var(--#{$prefix}table-striped-color);
+    --#{$prefix}table-bg--type: var(--#{$prefix}table-striped-bg);
   }
 }
 
@@ -122,8 +129,8 @@
 // The `.table-active` class can be added to highlight rows or cells
 
 .table-active {
-  --#{$prefix}table-accent-bg: var(--#{$prefix}table-active-bg);
-  color: var(--#{$prefix}table-active-color);
+  --#{$prefix}table-color--state: var(--#{$prefix}table-active-color);
+  --#{$prefix}table-bg--state: var(--#{$prefix}table-active-bg);
 }
 
 // Hover effect
@@ -132,8 +139,8 @@
 
 .table-hover {
   > tbody > tr:hover > * {
-    --#{$prefix}table-accent-bg: var(--#{$prefix}table-hover-bg);
-    color: var(--#{$prefix}table-hover-color);
+    --#{$prefix}table-color--state: var(--#{$prefix}table-hover-color);
+    --#{$prefix}table-bg--state: var(--#{$prefix}table-hover-bg);
   }
 }
 
diff --git a/scss/_variables.scss b/scss/_variables.scss
index e0218365ba34..0a0a316aee79 100644
--- a/scss/_variables.scss
+++ b/scss/_variables.scss
@@ -666,7 +666,9 @@ $table-cell-vertical-align:   top !default;
 
 $table-color:                 var(--#{$prefix}body-color) !default;
 $table-bg:                    transparent !default;
-$table-accent-bg:             transparent !default;
+// fusv-disable
+$table-accent-bg:             transparent !default; // Deprecated in Bootstrap 5.3.0 for CSS variables
+// fusv-enable
 
 $table-th-font-weight:        null !default;
 

From 98daef0cd267c335761b7ab268fe8f1217ef9806 Mon Sep 17 00:00:00 2001
From: louismaximepiton <louismaxime.piton@orange.com>
Date: Fri, 9 Sep 2022 16:49:44 +0200
Subject: [PATCH 2/7] Prevent nesting backgrounds

---
 scss/_variables.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/scss/_variables.scss b/scss/_variables.scss
index 0a0a316aee79..59f2e0402784 100644
--- a/scss/_variables.scss
+++ b/scss/_variables.scss
@@ -665,7 +665,7 @@ $table-cell-padding-x-sm:     .25rem !default;
 $table-cell-vertical-align:   top !default;
 
 $table-color:                 var(--#{$prefix}body-color) !default;
-$table-bg:                    transparent !default;
+$table-bg:                    var(--#{$prefix}body-bg) !default;
 // fusv-disable
 $table-accent-bg:             transparent !default; // Deprecated in Bootstrap 5.3.0 for CSS variables
 // fusv-enable

From 6a54eb3e4a125e913d5823a0d3acfbb0c8601fa3 Mon Sep 17 00:00:00 2001
From: louismaximepiton <louismaxime.piton@orange.com>
Date: Fri, 9 Sep 2022 16:49:53 +0200
Subject: [PATCH 3/7] Small typo

---
 site/content/docs/5.2/content/tables.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/site/content/docs/5.2/content/tables.md b/site/content/docs/5.2/content/tables.md
index 577e3ef84c2d..5db9f7007293 100644
--- a/site/content/docs/5.2/content/tables.md
+++ b/site/content/docs/5.2/content/tables.md
@@ -423,7 +423,7 @@ Border styles, active styles, and table variants are not inherited by nested tab
 </div>
 
 ```html
-<table class="table table-striped">
+<table class="table table-striped table-bordered">
   <thead>
     ...
   </thead>

From 5a77b105f383ab8a0d013f819f06cb7353015fc5 Mon Sep 17 00:00:00 2001
From: louismaximepiton <louismaxime.piton@orange.com>
Date: Fri, 9 Sep 2022 16:50:01 +0200
Subject: [PATCH 4/7] .

---
 .bundlewatch.config.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/.bundlewatch.config.json b/.bundlewatch.config.json
index 4c9acc990eea..1a0b80865e16 100644
--- a/.bundlewatch.config.json
+++ b/.bundlewatch.config.json
@@ -26,7 +26,7 @@
     },
     {
       "path": "./dist/css/bootstrap.css",
-      "maxSize": "28.75 kB"
+      "maxSize": "29.0 kB"
     },
     {
       "path": "./dist/css/bootstrap.min.css",

From de606557dab08578eadf241a6800f18bb6388bf2 Mon Sep 17 00:00:00 2001
From: louismaximepiton <louismaxime.piton@orange.com>
Date: Thu, 29 Sep 2022 16:11:29 +0200
Subject: [PATCH 5/7] Adding some docs

---
 scss/_tables.scss                       | 6 +++---
 scss/_variables.scss                    | 4 +---
 site/content/docs/5.2/content/tables.md | 4 ++--
 3 files changed, 6 insertions(+), 8 deletions(-)

diff --git a/scss/_tables.scss b/scss/_tables.scss
index e8d12762f576..f5150d6200de 100644
--- a/scss/_tables.scss
+++ b/scss/_tables.scss
@@ -12,7 +12,7 @@
   --#{$prefix}table-color: #{$table-color};
   --#{$prefix}table-bg: #{$table-bg};
   --#{$prefix}table-border-color: #{$table-border-color};
-  --#{$prefix}table-accent-bg: #{$table-accent-bg}; // Deprecated in Bootstrap 5.3.0 for CSS variables
+  --#{$prefix}table-accent-bg: #{$table-accent-bg};
   --#{$prefix}table-striped-color: #{$table-striped-color};
   --#{$prefix}table-striped-bg: #{$table-striped-bg};
   --#{$prefix}table-active-color: #{$table-active-color};
@@ -36,7 +36,7 @@
     color: var(--#{$prefix}table-color--state, var(--#{$prefix}table-color--type, var(--#{$prefix}table-color)));
     background-color: var(--#{$prefix}table-bg);
     border-bottom-width: $table-border-width;
-    box-shadow: inset 0 0 0 9999px var(--#{$prefix}table-bg--state, var(--#{$prefix}table-bg--type, transparent));
+    box-shadow: inset 0 0 0 9999px var(--#{$prefix}table-bg--state, var(--#{$prefix}table-bg--type, var(--#{$prefix}table-accent-bg)));
   }
 
   > tbody {
@@ -110,7 +110,7 @@
 
 // For rows
 .table-striped {
-  > tbody > tr:nth-of-type(#{$table-striped-order}) {
+  > tbody > tr:nth-of-type(#{$table-striped-order}) > * {
     --#{$prefix}table-color--type: var(--#{$prefix}table-striped-color);
     --#{$prefix}table-bg--type: var(--#{$prefix}table-striped-bg);
   }
diff --git a/scss/_variables.scss b/scss/_variables.scss
index 59f2e0402784..5d4947a62920 100644
--- a/scss/_variables.scss
+++ b/scss/_variables.scss
@@ -666,9 +666,7 @@ $table-cell-vertical-align:   top !default;
 
 $table-color:                 var(--#{$prefix}body-color) !default;
 $table-bg:                    var(--#{$prefix}body-bg) !default;
-// fusv-disable
-$table-accent-bg:             transparent !default; // Deprecated in Bootstrap 5.3.0 for CSS variables
-// fusv-enable
+$table-accent-bg:             transparent !default;
 
 $table-th-font-weight:        null !default;
 
diff --git a/site/content/docs/5.2/content/tables.md b/site/content/docs/5.2/content/tables.md
index 5db9f7007293..d6f72c1ad511 100644
--- a/site/content/docs/5.2/content/tables.md
+++ b/site/content/docs/5.2/content/tables.md
@@ -223,8 +223,8 @@ Highlight a table row or cell by adding a `.table-active` class.
 For the accented tables ([striped rows](#striped-rows), [striped columns](#striped-columns), [hoverable rows](#hoverable-rows), and [active tables](#active-tables)), we used some techniques to make these effects work for all our [table variants](#variants):
 
 - We start by setting the background of a table cell with the `--bs-table-bg` custom property. All table variants then set that custom property to colorize the table cells. This way, we don't get into trouble if semi-transparent colors are used as table backgrounds.
-- Then we add an inset box shadow on the table cells with `box-shadow: inset 0 0 0 9999px var(--bs-table-accent-bg);` to layer on top of any specified `background-color`. Because we use a huge spread and no blur, the color will be monotone. Since `--bs-table-accent-bg` is unset by default, we don't have a default box shadow.
-- When either `.table-striped`, `.table-striped-columns`, `.table-hover` or `.table-active` classes are added, the `--bs-table-accent-bg` is set to a semitransparent color to colorize the background.
+- Then we add an inset box shadow on the table cells with `box-shadow: inset 0 0 0 9999px var(--#{$prefix}table-bg--state, var(--#{$prefix}table-bg--type, var(--#{$prefix}table-accent-bg)));` to layer on top of any specified `background-color`. It uses custom cascade to override the `box-shadow`, regardless the CSS specificity. Because we use a huge spread and no blur, the color will be monotone. Since `--bs-table-accent-bg` is set to `transparent` by default, we don't have a default box shadow.
+- When either `.table-striped`, `.table-striped-columns`, `.table-hover` or `.table-active` classes are added, either `--bs-table-bg--type` or `--bs-table-bg--state` (by default set to `initial`) are set to a semitransparent color (`--bs-table-striped-bg`, `--bs-table-active-bg` or `--bs-table-hover-bg`) to colorize the background and override default `--bs-table-accent-bg`.
 - For each table variant, we generate a `--bs-table-accent-bg` color with the highest contrast depending on that color. For example, the accent color for `.table-primary` is darker while `.table-dark` has a lighter accent color.
 - Text and border colors are generated the same way, and their colors are inherited by default.
 

From 138566da10762553785cf295b300b50ec902eff6 Mon Sep 17 00:00:00 2001
From: Mark Otto <markd.otto@gmail.com>
Date: Sun, 30 Oct 2022 19:31:10 -0400
Subject: [PATCH 6/7] Match variable syntax

---
 scss/_tables.scss | 28 ++++++++++++++--------------
 1 file changed, 14 insertions(+), 14 deletions(-)

diff --git a/scss/_tables.scss b/scss/_tables.scss
index f5150d6200de..9e36e535a0e5 100644
--- a/scss/_tables.scss
+++ b/scss/_tables.scss
@@ -4,10 +4,10 @@
 
 .table {
   // Reset needed for nesting tables
-  --#{$prefix}table-color--type: initial;
-  --#{$prefix}table-bg--type: initial;
-  --#{$prefix}table-color--state: initial;
-  --#{$prefix}table-bg--state: initial;
+  --#{$prefix}table-color-type: initial;
+  --#{$prefix}table-bg-type: initial;
+  --#{$prefix}table-color-state: initial;
+  --#{$prefix}table-bg-state: initial;
   // End of reset
   --#{$prefix}table-color: #{$table-color};
   --#{$prefix}table-bg: #{$table-bg};
@@ -33,10 +33,10 @@
   > :not(caption) > * > * {
     padding: $table-cell-padding-y $table-cell-padding-x;
     // Following the precept of cascades: https://codepen.io/miriamsuzanne/full/vYNgodb
-    color: var(--#{$prefix}table-color--state, var(--#{$prefix}table-color--type, var(--#{$prefix}table-color)));
+    color: var(--#{$prefix}table-color-state, var(--#{$prefix}table-color-type, var(--#{$prefix}table-color)));
     background-color: var(--#{$prefix}table-bg);
     border-bottom-width: $table-border-width;
-    box-shadow: inset 0 0 0 9999px var(--#{$prefix}table-bg--state, var(--#{$prefix}table-bg--type, var(--#{$prefix}table-accent-bg)));
+    box-shadow: inset 0 0 0 9999px var(--#{$prefix}table-bg-state, var(--#{$prefix}table-bg-type, var(--#{$prefix}table-accent-bg)));
   }
 
   > tbody {
@@ -111,16 +111,16 @@
 // For rows
 .table-striped {
   > tbody > tr:nth-of-type(#{$table-striped-order}) > * {
-    --#{$prefix}table-color--type: var(--#{$prefix}table-striped-color);
-    --#{$prefix}table-bg--type: var(--#{$prefix}table-striped-bg);
+    --#{$prefix}table-color-type: var(--#{$prefix}table-striped-color);
+    --#{$prefix}table-bg-type: var(--#{$prefix}table-striped-bg);
   }
 }
 
 // For columns
 .table-striped-columns {
   > :not(caption) > tr > :nth-child(#{$table-striped-columns-order}) {
-    --#{$prefix}table-color--type: var(--#{$prefix}table-striped-color);
-    --#{$prefix}table-bg--type: var(--#{$prefix}table-striped-bg);
+    --#{$prefix}table-color-type: var(--#{$prefix}table-striped-color);
+    --#{$prefix}table-bg-type: var(--#{$prefix}table-striped-bg);
   }
 }
 
@@ -129,8 +129,8 @@
 // The `.table-active` class can be added to highlight rows or cells
 
 .table-active {
-  --#{$prefix}table-color--state: var(--#{$prefix}table-active-color);
-  --#{$prefix}table-bg--state: var(--#{$prefix}table-active-bg);
+  --#{$prefix}table-color-state: var(--#{$prefix}table-active-color);
+  --#{$prefix}table-bg-state: var(--#{$prefix}table-active-bg);
 }
 
 // Hover effect
@@ -139,8 +139,8 @@
 
 .table-hover {
   > tbody > tr:hover > * {
-    --#{$prefix}table-color--state: var(--#{$prefix}table-hover-color);
-    --#{$prefix}table-bg--state: var(--#{$prefix}table-hover-bg);
+    --#{$prefix}table-color-state: var(--#{$prefix}table-hover-color);
+    --#{$prefix}table-bg-state: var(--#{$prefix}table-hover-bg);
   }
 }
 

From d1c240b927d25f9ce8def390bf5ee0d33851f7df Mon Sep 17 00:00:00 2001
From: louismaximepiton <louismaxime.piton@orange.com>
Date: Mon, 7 Nov 2022 12:39:43 +0100
Subject: [PATCH 7/7] .

---
 .bundlewatch.config.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/.bundlewatch.config.json b/.bundlewatch.config.json
index 105c8c15809d..579276eedc0a 100644
--- a/.bundlewatch.config.json
+++ b/.bundlewatch.config.json
@@ -30,7 +30,7 @@
     },
     {
       "path": "./dist/css/bootstrap.min.css",
-      "maxSize": "27.5 kB"
+      "maxSize": "27.75 kB"
     },
     {
       "path": "./dist/js/bootstrap.bundle.js",