From: Mark Otto <markdotto@gmail.com>
Date: Mon, 13 Oct 2025 16:37:58 +0000 (-0700)
Subject: Improve table theme variant usage
X-Git-Url: http://git.ipfire.org/?a=commitdiff_plain;h=c698af38c96a98307e2e94787ac681f6d0a4b221;p=thirdparty%2Fbootstrap.git

Improve table theme variant usage
---

diff --git a/scss/content/_tables.scss b/scss/content/_tables.scss
index 72fe6e57b0..a8a09a8ac0 100644
--- a/scss/content/_tables.scss
+++ b/scss/content/_tables.scss
@@ -47,35 +47,6 @@ $table-group-separator-color: currentcolor !default;
 
 // scss-docs-end table-variables
 
-// scss-docs-start table-loop
-$table-variants: $new-theme-colors !default;
-// scss-docs-end table-loop
-
-// scss-docs-start table-variant
-@mixin table-variant($state, $background) {
-  .table-#{$state} {
-    // $color: color-contrast(opaque($body-bg, $background));
-    $color: var(--#{$prefix}#{$state}-text);
-    $hover-bg: color.mix($color, $background, math.percentage($table-hover-bg-factor));
-    $striped-bg: color.mix($color, $background, math.percentage($table-striped-bg-factor));
-    $active-bg: color.mix($color, $background, math.percentage($table-active-bg-factor));
-    $table-border-color: color.mix($color, $background, math.percentage($table-border-factor));
-
-    --#{$prefix}table-color: #{$color};
-    --#{$prefix}table-bg: #{$background};
-    --#{$prefix}table-border-color: #{$table-border-color};
-    --#{$prefix}table-striped-bg: #{$striped-bg};
-    --#{$prefix}table-striped-color: #{color-contrast($striped-bg)};
-    --#{$prefix}table-active-bg: #{$active-bg};
-    --#{$prefix}table-active-color: #{color-contrast($active-bg)};
-    --#{$prefix}table-hover-bg: #{$hover-bg};
-    --#{$prefix}table-hover-color: #{color-contrast($hover-bg)};
-
-    color: var(--#{$prefix}table-color);
-    border-color: var(--#{$prefix}table-border-color);
-  }
-}
-// scss-docs-end table-variant
 
 //
 // Basic Bootstrap table
@@ -89,6 +60,8 @@ $table-variants: $new-theme-colors !default;
     --#{$prefix}table-color-state: initial;
     --#{$prefix}table-bg-state: initial;
     // End of reset
+
+    // scss-docs-start table-css-variables
     --#{$prefix}table-color: #{$table-color};
     --#{$prefix}table-bg: #{$table-bg};
     --#{$prefix}table-border-color: #{$table-border-color};
@@ -99,11 +72,12 @@ $table-variants: $new-theme-colors !default;
     --#{$prefix}table-active-bg: #{$table-active-bg};
     --#{$prefix}table-hover-color: #{$table-hover-color};
     --#{$prefix}table-hover-bg: #{$table-hover-bg};
+    // scss-docs-end table-css-variables
 
     width: 100%;
     margin-bottom: $spacer;
     vertical-align: $table-cell-vertical-align;
-    border-color: var(--#{$prefix}table-border-color);
+    border-color: var(--#{$prefix}theme-border, var(--#{$prefix}table-border-color));
 
     // Target th & td
     // We need the child combinator to prevent styles leaking to nested tables which doesn't have a `.table` class.
@@ -113,10 +87,10 @@ $table-variants: $new-theme-colors !default;
     > :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);
+      color: var(--#{$prefix}table-color-state, var(--#{$prefix}table-color-type, var(--#{$prefix}theme-text, var(--#{$prefix}table-color))));
+      background-color: var(--#{$prefix}theme-bg-subtle, 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}theme-bg-subtle, var(--#{$prefix}table-accent-bg))));
     }
 
     > tbody {
@@ -191,16 +165,16 @@ $table-variants: $new-theme-colors !default;
   // 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}theme-text, var(--#{$prefix}table-striped-color));
+      --#{$prefix}table-bg-type: color-mix(in srgb, var(--#{$prefix}theme-text, var(--#{$prefix}table-color)) #{math.percentage($table-striped-bg-factor)}, transparent);
     }
   }
 
   // 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}theme-text, var(--#{$prefix}table-striped-color));
+      --#{$prefix}table-bg-type: color-mix(in srgb, var(--#{$prefix}theme-text, var(--#{$prefix}table-color)) #{math.percentage($table-striped-bg-factor)}, transparent);
     }
   }
 
@@ -209,8 +183,8 @@ $table-variants: $new-theme-colors !default;
   // 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}theme-text, var(--#{$prefix}table-active-color));
+    --#{$prefix}table-bg-state: color-mix(in srgb, var(--#{$prefix}theme-text, var(--#{$prefix}table-color)) #{math.percentage($table-active-bg-factor)}, transparent);
   }
 
   // Hover effect
@@ -219,35 +193,10 @@ $table-variants: $new-theme-colors !default;
 
   .table-hover {
     > tbody > tr:hover > * {
-      --#{$prefix}table-color-state: var(--#{$prefix}table-hover-color);
-      --#{$prefix}table-bg-state: var(--#{$prefix}table-hover-bg);
-    }
-  }
-
-
-  // Table variants
-  //
-  // Table variants set the table cell backgrounds, border colors
-  // and the colors of the striped, hovered & active tables
-
-  // scss-docs-start table-variants-loop
-  @each $color in map.keys($table-variants) {
-    .table-#{$color} {
-      --#{$prefix}table-color: var(--#{$prefix}#{$color}-text);
-      --#{$prefix}table-bg: var(--#{$prefix}#{$color}-bg-subtle);
-      --#{$prefix}table-border-color: var(--#{$prefix}#{$color}-border);
-      --#{$prefix}table-striped-bg: color-mix(in srgb, var(--#{$prefix}#{$color}-bg-subtle), var(--#{$prefix}table-color) #{math.percentage($table-striped-bg-factor)});
-      --#{$prefix}table-striped-color: var(--#{$prefix}table-color);
-      --#{$prefix}table-active-bg: color-mix(in srgb, var(--#{$prefix}#{$color}-bg-subtle), var(--#{$prefix}table-color) #{math.percentage($table-active-bg-factor)});
-      --#{$prefix}table-active-color: var(--#{$prefix}table-color);
-      --#{$prefix}table-hover-bg: color-mix(in srgb, var(--#{$prefix}#{$color}-bg-subtle), var(--#{$prefix}table-color) #{math.percentage($table-hover-bg-factor)});
-      --#{$prefix}table-hover-color: var(--#{$prefix}table-color);
-
-      color: var(--#{$prefix}table-color);
-      border-color: var(--#{$prefix}table-border-color);
+      --#{$prefix}table-color-state: var(--#{$prefix}theme-text, var(--#{$prefix}table-hover-color));
+      --#{$prefix}table-bg-state: color-mix(in srgb, var(--#{$prefix}theme-text, var(--#{$prefix}table-color)) #{math.percentage($table-hover-bg-factor)}, transparent);
     }
   }
-  // scss-docs-end table-variants-loop
 
   // Responsive tables
   //
diff --git a/site/src/content/docs/content/tables.mdx b/site/src/content/docs/content/tables.mdx
index eb07ea1ffe..e4bfd003f9 100644
--- a/site/src/content/docs/content/tables.mdx
+++ b/site/src/content/docs/content/tables.mdx
@@ -35,7 +35,7 @@ Use theme-specific color classes to style tables, table rows, or individual cell
       </tr>
       {getData('theme-colors').map((themeColor) => {
         return (
-          <tr class={`table-${themeColor.name}`}>
+          <tr class={`theme-${themeColor.name}`}>
             <th scope="row">{themeColor.title}</th>
             <td>Cell</td>
             <td>Cell</td>
@@ -48,14 +48,14 @@ Use theme-specific color classes to style tables, table rows, or individual cell
 
 <Code code={[
   `<!-- On tables -->`,
-  ...getData('theme-colors').map((themeColor) => `<table class="table table-${themeColor.name}">...</table>`),
+  ...getData('theme-colors').map((themeColor) => `<table class="table theme-${themeColor.name}">...</table>`),
   `
 <!-- On rows -->`,
-  ...getData('theme-colors').map((themeColor) => `<tr class="table-${themeColor.name}">...</tr>`),
+  ...getData('theme-colors').map((themeColor) => `<tr class="theme-${themeColor.name}">...</tr>`),
   `
 <!-- On cells (\`td\` or \`th\`) -->
 <tr>`,
-  ...getData('theme-colors').map((themeColor) => `  <td class="table-${themeColor.name}">...</td>`),
+  ...getData('theme-colors').map((themeColor) => `  <td class="theme-${themeColor.name}">...</td>`),
   `</tr>`
 ]} lang="html" />
 
@@ -81,9 +81,9 @@ These classes can also be added to table variants:
 
 <Table class="table table-striped-columns" theme="dark" />
 
-<Table class="table table-success table-striped" />
+<Table class="table theme-success table-striped" />
 
-<Table class="table table-success table-striped-columns" />
+<Table class="table theme-success table-striped-columns" />
 
 ### Hoverable rows
 
@@ -223,7 +223,7 @@ For the accented tables ([striped rows](#striped-rows), [striped columns](#strip
 
 Behind the scenes it looks like this:
 
-<ScssDocs name="table-variants-loop" file="scss/content/_tables.scss" />
+{/* <ScssDocs name="table-variants-loop" file="scss/content/_tables.scss" /> */}
 
 ## Table borders
 
@@ -708,7 +708,7 @@ Use `.table-responsive{-sm|-md|-lg|-xl|-2xl}` as needed to create responsive tab
 
 ### Sass loops
 
-<ScssDocs name="table-loop" file="scss/content/_tables.scss" />
+{/* <ScssDocs name="table-loop" file="scss/content/_tables.scss" /> */}
 
 ### Customizing