Drop deprecated `.table-primary` and `.table-dark` remaining usage (#42537)

diff --git a/site/src/assets/examples/cheatsheet/index.astro b/site/src/assets/examples/cheatsheet/index.astro
index 7a7d3a9a58d4b25d5d4888239c9e846a3bdb2cc9..92a30f95ff1ca2e187eec1f7883b02b0053ee0f2 100644 (file)
--- a/site/src/assets/examples/cheatsheet/index.astro
+++ b/site/src/assets/examples/cheatsheet/index.astro
@@ -198,7 +198,7 @@ export const body_class = 'bg-body-tertiary'
           </table>`} />
 
         <Example showMarkup={false} code={`
-          <table class="table table-dark table-borderless">
+          <table class="table table-borderless" data-bs-theme="dark">
             <thead>
             <tr>
               <th scope="col">#</th>

diff --git a/site/src/content/docs/content/tables.mdx b/site/src/content/docs/content/tables.mdx
index de533419be34d7144acca27ee57706baa5ad0c64..5a65188abdbdf26fefaed0214bbca46654bf2cf0 100644 (file)
--- a/site/src/content/docs/content/tables.mdx
+++ b/site/src/content/docs/content/tables.mdx
@@ -89,7 +89,7 @@ Add `.table-hover` to enable a hover state on table rows within a `<tbody>`.
 
 <Table class="table table-hover" />
 
-<Table class="table table-dark table-hover" />
+<Table class="table table-hover" theme="dark" />
 
 These hoverable rows can also be combined with the striped rows variant:
 
@@ -153,7 +153,7 @@ Highlight a table row or cell by adding a `.table-active` class.
 `} />
 
 <Example code={`
-<table class="table table-dark">
+<table class="table" data-bs-theme="dark">
   <thead>
     <tr>
       <th scope="col">#</th>
@@ -184,7 +184,7 @@ Highlight a table row or cell by adding a `.table-active` class.
   </tbody>
 </table>
 `} customMarkup={`
-<table class="table table-dark">
+<table class="table" data-bs-theme="dark">
   <thead>
     ...
   </thead>
@@ -215,7 +215,7 @@ For the accented tables ([striped rows](#striped-rows), [striped columns](#strip
 
 - 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.
+- For each table variant, we set `--bs-table-bg-type` or `--bs-table-bg-state` to a semi-transparent color derived from the current theme color. Those values are layered in the inset box shadow, while `--bs-table-accent-bg` remains a transparent fallback.
 
 - Text and border colors are generated the same way, and their colors are inherited by default.
 
@@ -241,7 +241,7 @@ Add `.table-borderless` for a table without borders.
 
 <Table class="table table-borderless" />
 
-<Table class="table table-dark table-borderless" />
+<Table class="table table-borderless" theme="dark" />
 
 ## Small tables
 
@@ -249,7 +249,7 @@ Add `.table-sm` to make any `.table` more compact by cutting all cell `padding`
 
 <Table class="table table-sm" />
 
-<Table class="table table-dark table-sm" />
+<Table class="table table-sm" theme="dark" />
 
 ## Table group dividers
 

diff --git a/site/src/content/docs/guides/migration.mdx b/site/src/content/docs/guides/migration.mdx
index c27b268771286ce56de75a184082bc1367e770f6..590ad7f8eb9fab39da31379fa8353661c33fc148 100644 (file)
--- a/site/src/content/docs/guides/migration.mdx
+++ b/site/src/content/docs/guides/migration.mdx
@@ -66,7 +66,7 @@ Bootstrap 6 is a major release with many breaking changes to modernize our codeb
   - Renamed `xxl` to `2xl` for better scaling with additional custom breakpoints
   - Increased the `2xl` breakpoint from 1400px to 1536px, and its container from 1320px to 1440px.
 - **Adopted modern CSS color functions.** All Sass color variables now use `oklch()` notation (e.g., `$blue: oklch(60% 0.24 240)`) and tint/shade scales are generated with `color-mix(in lab, ...)` in the compiled CSS. The v5 `$*-rgb` CSS custom properties and `rgba()` patterns have been removed. This requires browser support for `color-mix()` and `oklch()`.
-- **New theme token system with `.theme-*` classes.** Per-component color variant classes (like `.alert-primary`, `.badge.bg-primary`, `.btn-primary`) are replaced by a composable `.theme-{name}` pattern. Adding `.theme-primary` to a component sets `--theme-bg`, `--theme-fg`, `--theme-border`, `--theme-contrast`, and other semantic CSS custom properties that the component reads. This applies across buttons, badges, alerts, cards, accordions, and more.
+- **New theme token system with `.theme-*` classes.** Per-component color variant classes (like `.alert-primary`, `.badge.bg-primary`, `.btn-primary`, `.table-primary`) are replaced by a composable `.theme-{name}` pattern. Adding `.theme-primary` to a component sets `--theme-bg`, `--theme-fg`, `--theme-border`, `--theme-contrast`, and other semantic CSS custom properties that the component reads. This applies across buttons, badges, alerts, tables, cards, accordions, and more.
 - **Responsive and state classes now use a prefix instead of an infix or suffix.** Class names follow the Tailwind-style `prefix:class` pattern (e.g., `md:d-none` instead of `d-md-none`, `hover:opacity-50` instead of `opacity-50-hover`). In HTML, use the unescaped colon: `class="md:d-none"`. This applies to utilities, grid, pseudo-state variants, and all responsive components.
 
 <BsTable>