Better the doc + add some variants

scss/_variables.scss

@@ -917,12 +917,19 @@ $table-group-separator-color:           currentcolor !default;
 $table-caption-color:                   var(--#{$prefix}caption-color, var(--#{$prefix}emphasis-color)) !default; // Boosted mod: instead of `var(--#{$prefix}secondary-color)`
 $table-caption-padding-y:               .75rem !default; // Boosted mod
 
-// Boosted mod: no $table-bg-scale
+$table-bg-scale:                        -60% !default;
 // scss-docs-end table-variables
 
 // scss-docs-start table-loop
 $table-variants: (
-  "dark": $dark
+  "primary":    shift-color($primary, $table-bg-scale),
+  "secondary":  shift-color($secondary, $table-bg-scale),
+  "success":    shift-color($success, $table-bg-scale),
+  "info":       shift-color($info, $table-bg-scale),
+  "warning":    shift-color($warning, $table-bg-scale),
+  "danger":     shift-color($danger, $table-bg-scale),
+  "light":      $light,
+  "dark":       $dark,
 ) !default;
 // scss-docs-end table-loop
 

site/content/docs/5.3/content/tables.md

@@ -36,6 +36,15 @@ See [more information about the tables structures](https://a11y-guidelines.orang
 <!-- Boosted mod: only .table-dark is allowed -->
 Use contextual class to color tables, table rows or individual cells.
 
+{{< callout warning >}}
+Boosted doesn't provide any branded variant.
+
+Darker tables are allowed so you may add `data-bs-theme="dark"` to the `.table` or any ancestor element to enable a component-specific color mode. [Learn more about our color modes]({{< docsref "/customize/color-modes" >}}).
+{{< /callout >}}
+
+<details>
+<summary>See Bootstrap's variants</summary>
+<br>
 <div class="bd-example">
   <table class="table">
     <caption class="visually-hidden">Boosted table variants</caption>
@@ -52,31 +61,45 @@ Use contextual class to color tables, table rows or individual cells.
         <td>Cell</td>
         <td>Cell</td>
       </tr>
-    <tr class="table-dark">
-      <th scope="row">Dark</th>
-      <td>Cell</td>
-      <td>Cell</td>
-    </tr>
+      {{< table.inline >}}
+      {{- range (index $.Site.Data "theme-colors") }}
+        <tr class="table-{{ .name }}">
+          <th scope="row">{{ .name | title }}</th>
+          <td>Cell</td>
+          <td>Cell</td>
+        </tr>
+      {{- end -}}
+      {{< /table.inline >}}
     </tbody>
   </table>
 </div>
 
 {{< highlight html >}}
-<!-- On tables -->
-<table class="table-dark">...</table>
+<!-- On tables -->{{< table.inline >}}
+{{- range (index $.Site.Data "theme-colors") }}
+<table class="table-{{ .name }}">...</table>
+{{- end -}}
+{{< /table.inline >}}
 
-<!-- On rows -->
-<tr class="table-dark">...</tr>
+<!-- On rows -->{{< table.inline >}}
+{{- range (index $.Site.Data "theme-colors") }}
+<tr class="table-{{ .name }}">...</tr>
+{{- end -}}
+{{< /table.inline >}}
 
 <!-- On cells (`td` or `th`) -->
-<tr>
-  <td class="table-dark">...</td>
+<tr>{{< table.inline >}}
+{{- range (index $.Site.Data "theme-colors") }}
+  <td class="table-{{ .name }}">...</td>
+{{- end -}}
+{{< /table.inline >}}
 </tr>
 {{< /highlight >}}
 
 {{< callout info >}}
 {{< partial "callouts/warning-color-assistive-technologies.md" >}}
 {{< /callout >}}
+</details>
 
 ## Accented tables
 
@@ -96,27 +119,40 @@ Use .table-striped-columns to add zebra-striping to any table column.
 
 {{< table class="table table-striped-columns" caption="Boosted striped columns table" >}}
 
-These classes can also be added to table variants:
+These classes can also be added to table variants.
+
+<details>
+<summary>See Bootstrap's examples</summary>
+<br>
+{{< table class="table table-dark table-striped" >}}
 
-{{< table class="table table-dark table-striped" caption="Boosted dark striped rows table" >}}
+{{< table class="table table-dark table-striped-columns" >}}
 
-{{< table class="table table-dark table-striped-columns" caption="Boosted dark striped columns table" >}}
+{{< table class="table table-success table-striped" >}}
 
-<!-- Boosted mod : no .table-success -->
+{{< table class="table table-success table-striped-columns" >}}
+</details>
 
 ### Hoverable rows
 
 Add `.table-hover` to enable a hover state on table rows within a `<tbody>`.
 
 {{< table class="table table-hover" caption="Boosted hoverable table" >}}
 
+<details>
+<summary class="mb-3">See on Bootstrap variant</summary>
 {{< table class="table table-dark table-hover" caption="Boosted hoverable dark table" >}}
+</details>
 
 These hoverable rows can also be combined with the striped rows variant:
 
 {{< table class="table table-striped table-hover" caption="Boosted hoverable striped table" >}}
 
+<details>
+<summary>See on Bootstrap variant</summary>
+<br>
 {{< table class="table table-dark table-striped table-hover" caption="Boosted hoverable dark striped table" >}}
+</details>
 
 ### Active tables
 
@@ -177,6 +213,9 @@ Highlight a table row or cell by adding a `.table-active` class.
 </table>
 ```
 
+<details>
+<summary>See on Bootstrap variant</summary>
+<br>
 <div class="bd-example">
   <table class="table table-dark">
     <caption class="visually-hidden">Boosted dark table with an active row and cell</caption>
@@ -231,6 +270,7 @@ Highlight a table row or cell by adding a `.table-active` class.
   </tbody>
 </table>
 ```
+</details>
 
 ## How do the variants and accented tables work?
 
@@ -258,7 +298,11 @@ To display basic tables, Orange Design System recommends using these compact tab
 
 {{< table class="table table-sm" caption="Boosted small table" >}}
 
+<details>
+<summary>See on Bootstrap variant</summary>
+<br>
 {{< table class="table table-dark table-sm" caption="Boosted dark small table" >}}
+</details>
 
 ## Table group dividers