Fix striped tables to respect custom row and cell backgrounds (#2623)

.changeset/fix-striped-table-custom-backgrounds.md

@@ -0,0 +1,5 @@
+---
+"@tabler/core": patch
+---
+
+Fixed `.table-striped` and `.table-striped-columns` overriding a row or cell that sets its own background. A `<tr>` or `<td>` carrying `.bg-*`, `.table-*`, `.text-bg-*` or an inline `background` now keeps that background instead of being repainted by the stripe.

core/scss/_variables.scss

@@ -1808,6 +1808,8 @@ $table-striped-bg-factor: 0.05 !default;
 $table-striped-order: even !default;
 $table-striped-bg: var(--bg-surface-tertiary) !default;
 $table-striped-columns-order: even !default;
+// Rows and cells matching this selector keep their own background instead of the stripe.
+$table-striped-exclude-selector: '[class^="bg-"], [class*=" bg-"], [class^="table-"], [class*=" table-"], [class^="text-bg-"], [class*=" text-bg-"], [style*="background"]' !default;
 
 $table-group-separator-color: var(--border-color-translucent) !default;
 

core/scss/bootstrap/_tables.scss

@@ -109,10 +109,13 @@
 // Zebra-striping
 //
 // Default zebra-stripe styles (alternating gray and transparent backgrounds)
+//
+// A row or cell that declares its own background wins over the stripe, so
+// `.bg-*`, `.table-*`, `.text-bg-*` and inline backgrounds stay visible.
 
 // For rows
 .table-striped {
-  > tbody > tr:nth-of-type(#{$table-striped-order}) > * {
+  > tbody > tr:nth-of-type(#{$table-striped-order}):not(:is(#{$table-striped-exclude-selector})) > *:not(:is(#{$table-striped-exclude-selector})) {
     --table-color-type: var(--table-striped-color);
     --table-bg-type: var(--table-striped-bg);
   }
@@ -120,7 +123,7 @@
 
 // For columns
 .table-striped-columns {
-  > :not(caption) > tr > :nth-child(#{$table-striped-columns-order}) {
+  > :not(caption) > tr:not(:is(#{$table-striped-exclude-selector})) > :nth-child(#{$table-striped-columns-order}):not(:is(#{$table-striped-exclude-selector})) {
     --table-color-type: var(--table-striped-color);
     --table-bg-type: var(--table-striped-bg);
   }

core/scss/ui/_tables.scss

@@ -32,6 +32,10 @@
   .table {
     margin-bottom: 0;
   }
+
+  + .card-footer {
+    border-top: 0;
+  }
 }
 
 .table-transparent {