Dark mode: Table fix (#2418)

Co-authored-by: Julien Déramond <julien.deramond@orange.com>
Orange-OpenSource · Dec 19, 2023 · ca86257 · ca86257
1 parent 673feec
commit ca86257
Show file tree

Hide file tree

Showing 6 changed files with 81 additions and 47 deletions.
diff --git a/scss/_root.scss b/scss/_root.scss
@@ -164,7 +164,6 @@
   --#{$prefix}table-active-bg-factor: #{$table-active-bg-factor};
   --#{$prefix}table-hover-bg-factor: #{$table-hover-bg-factor};
   --#{$prefix}table-striped-bg-factor: #{$table-striped-bg-factor};
-  --#{$prefix}table-striped-hover-bg-factor: #{$table-striped-hover-bg-factor};
 
   // Breadcrumb-specific styles
   --#{$prefix}breadcrumb-divider-filter: #{$breadcrumb-divider-filter};
@@ -257,10 +256,9 @@
 
     // Boosted mod
     // Table-specific styles
-    --#{$prefix}table-striped-bg-factor: #{$table-striped-bg-factor-dark};
-    --#{$prefix}table-striped-hover-bg-factor: #{$table-striped-hover-bg-factor-dark};
-    --#{$prefix}table-hover-bg-factor: #{$table-hover-bg-factor-dark};
     --#{$prefix}table-active-bg-factor: #{$table-active-bg-factor-dark};
+    --#{$prefix}table-hover-bg-factor: #{$table-hover-bg-factor-dark};
+    --#{$prefix}table-striped-bg-factor: #{$table-striped-bg-factor-dark};
 
     // Breadcrumb-specific styles
     --#{$prefix}breadcrumb-divider-filter: #{$breadcrumb-divider-filter-dark};

diff --git a/scss/_tables.scss b/scss/_tables.scss
@@ -15,8 +15,6 @@
   --#{$prefix}table-accent-bg: #{$table-accent-bg};
   --#{$prefix}table-striped-color: #{$table-striped-color};
   --#{$prefix}table-striped-bg: #{$table-striped-bg};
-  --#{$prefix}table-striped-hover-color: #{$table-striped-hover-color}; // Boosted mod
-  --#{$prefix}table-striped-hover-bg: #{$table-striped-hover-bg}; // Boosted mod
   --#{$prefix}table-active-color: #{$table-active-color};
   --#{$prefix}table-active-bg: #{$table-active-bg};
   --#{$prefix}table-hover-color: #{$table-hover-color};
@@ -146,13 +144,6 @@
     --#{$prefix}table-color-state: var(--#{$prefix}table-hover-color);
     --#{$prefix}table-bg-state: var(--#{$prefix}table-hover-bg);
   }
-
-  // Boosted mod
-  &.table-striped > tbody > tr:hover > * {
-    --#{$prefix}table-color-state: var(--#{$prefix}table-striped-hover-color);
-    --#{$prefix}table-bg-state: var(--#{$prefix}table-striped-hover-bg);
-  }
-  // End mod
 }
 
 // Table variants set the table cell backgrounds, border colors

diff --git a/scss/_variables-dark.scss b/scss/_variables-dark.scss
@@ -150,8 +150,7 @@ $breadcrumb-divider-filter-dark:      $invert-filter !default; // Boosted mod
 // Tables
 //
 
-$table-striped-bg-factor-dark:        .135 !default; // Boosted mod
-$table-striped-hover-bg-factor-dark:  .855 !default; // Boosted mod
+$table-striped-bg-factor-dark:        1 !default; // Boosted mod
+$table-active-bg-factor-dark:         .35 !default; // Boosted mod
 $table-hover-bg-factor-dark:          .135 !default; // Boosted mod
-$table-active-bg-factor-dark:         .565 !default; // Boosted mod
 // scss-docs-end sass-dark-mode-vars
diff --git a/scss/_variables.scss b/scss/_variables.scss
@@ -890,18 +890,14 @@ $table-accent-bg:                       transparent !default;
 $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), 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), 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:                    var(--#{$prefix}black) !default; // Boosted mod: instead of `$table-color`
+$table-striped-bg-factor:               .035 !default; // Boosted mod: equivalent to `$gray-200`
+$table-striped-bg:                      rgba(var(--#{$prefix}black-rgb), var(--#{$prefix}table-striped-bg-factor)) !default; // Boosted mod: instead of `rgba(var(--#{$prefix}emphasis-color-rgb), $table-striped-bg-factor)`
+$table-variant-striped-bg-factor:       .08 !default; // Boosted mod
+
+$table-active-color:                    $table-color !default;
 $table-active-bg-factor:                .135 !default; // Boosted mod
 $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-variant-active-bg-factor:        .4 !default; // Boosted mod
 
 $table-hover-color:                     $table-color !default;
 $table-hover-bg-factor:                 .065 !default; // Boosted mod
@@ -921,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
 

diff --git a/scss/mixins/_table-variants.scss b/scss/mixins/_table-variants.scss
@@ -5,7 +5,6 @@
     $color: color-contrast(opaque($body-bg, $background));
     $hover-bg: mix($color, $background, percentage($table-variant-hover-bg-factor));// Boosted mod
     $striped-bg: mix($color, $background, percentage($table-variant-striped-bg-factor)); // Boosted mod
-    $striped-hover-bg: mix($color, $background, percentage($table-variant-striped-hover-bg-factor)); // Boosted mod
     $active-bg: mix($color, $background, percentage($table-variant-active-bg-factor)); // Boosted mod
     $table-border-color: mix($color, $background, percentage($table-border-factor));
 
@@ -14,8 +13,6 @@
     --#{$prefix}table-border-color: #{$table-border-color};
     --#{$prefix}table-striped-bg: #{$striped-bg};
     --#{$prefix}table-striped-color: #{color-contrast($striped-bg)};
-    --#{$prefix}table-striped-hover-bg: #{$striped-hover-bg}; // Boosted mod
-    --#{$prefix}table-striped-hover-color: #{color-contrast($striped-hover-bg)}; // Boosted mod
     --#{$prefix}table-active-bg: #{$active-bg};
     --#{$prefix}table-active-color: #{color-contrast($active-bg)};
     --#{$prefix}table-hover-bg: #{$hover-bg};

diff --git a/site/content/docs/5.3/content/tables.md b/site/content/docs/5.3/content/tables.md
@@ -33,8 +33,21 @@ See [more information about the tables structures](https://a11y-guidelines.orang
 
 ## Variants
 
-<!-- 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 colored variant.
+
+Darker tables are allowed contextually. 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 colored variants</summary>
+<br>
+
+Use contextual classes to color tables, table rows or individual cells.
+
+{{< callout info >}}
+**Heads up!** Because of the more complicated CSS used to generate our table variants, they most likely won't see color mode adaptive styling until v6.
+{{< /callout >}}
 
 <div class="bd-example">
   <table class="table">
@@ -52,31 +65,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 +123,38 @@ 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:
-
+<details>
+<summary>These classes can also be added to Bootstrap's table colored variants.</summary>
+<br>
 {{< table class="table table-dark table-striped" caption="Boosted dark striped rows table" >}}
 
 {{< table class="table table-dark table-striped-columns" caption="Boosted dark striped columns table" >}}
 
-<!-- Boosted mod : no .table-success -->
+{{< table class="table table-success table-striped" caption="Boosted success striped rows table" >}}
+
+{{< table class="table table-success table-striped-columns" caption="Boosted success striped columns table" >}}
+</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 it applied on another Bootstrap's 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 it applied on another Bootstrap's variant</summary>
+<br>
 {{< table class="table table-dark table-striped table-hover" caption="Boosted hoverable dark striped table" >}}
+</details>
 
 ### Active tables
 
@@ -177,6 +215,9 @@ Highlight a table row or cell by adding a `.table-active` class.
 </table>
 ```
 
+<details>
+<summary>See it applied on another Bootstrap's 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 +272,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 +300,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 it applied on another Bootstrap's variant</summary>
+<br>
 {{< table class="table table-dark table-sm" caption="Boosted dark small table" >}}
+</details>
 
 ## Table group dividers