Improved table element styles & fixed table styles inside asides

.changeset/curly-dolphins-grow.md

@@ -0,0 +1,5 @@
+---
+"@astrojs/starlight": minor
+---
+
+Improves styling of Markdown tables to work better in different contexts, including against different background colours like when used in asides.

docs/src/content/docs/guides/tables-test.md

@@ -0,0 +1,132 @@
+---
+title: ⚠️ Table styles test ⚠️
+---
+
+:::danger
+TODO(delucis): Delete me!
+:::
+
+| Framework              | CO₂ per page visit |
+| ---------------------- | ------------------ |
+| [Starlight][sl-carbon] | 0.01g              |
+| [VitePress][vp-carbon] | 0.05g              |
+| [Docus][dc-carbon]     | 0.05g              |
+
+:::note
+| Framework | CO₂ per page visit |
+| ---------------------- | ------------------ |
+| [Starlight][sl-carbon] | 0.01g |
+| [VitePress][vp-carbon] | 0.05g |
+| [Docus][dc-carbon] | 0.05g |
+:::
+
+:::caution
+| Framework | CO₂ per page visit |
+| ---------------------- | ------------------ |
+| [Starlight][sl-carbon] | 0.01g |
+| [VitePress][vp-carbon] | 0.05g |
+| [Docus][dc-carbon] | 0.05g |
+:::
+
+[sl-carbon]: https://www.websitecarbon.com/website/starlight-astro-build-getting-started/
+[vp-carbon]: https://www.websitecarbon.com/website/vitepress-dev-guide-what-is-vitepress/
+[dc-carbon]: https://www.websitecarbon.com/website/docus-dev-introduction-getting-started/
+
+## Unbalanced content example
+
+Taken from [Carbon Design System “Structured List” example](https://carbondesignsystem.com/components/structured-list/usage/#live-demo).
+
+| ColumnA | ColumnB | ColumnC                                                                                                                                                                                                                                    |
+| ------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| Row 1   | Row 1   | Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc dui magna, finibus id tortor sed, aliquet bibendum augue. Aenean posuere sem vel euismod dignissim. Nulla ut cursus dolor. Pellentesque vulputate nisl a porttitor interdum. |
+| Row 2   | Row 2   | Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc dui magna, finibus id tortor sed, aliquet bibendum augue. Aenean posuere sem vel euismod dignissim. Nulla ut cursus dolor. Pellentesque vulputate nisl a porttitor interdum. |
+
+## Small table example
+
+Taken from the [Bootstrap docs](https://getbootstrap.com/docs/5.3/content/tables/#overview).
+
+| #   | First          | Last     | Handle   |
+| --- | -------------- | -------- | -------- |
+| 1   | Mark           | Otto     | @mdo     |
+| 2   | Jacob          | Thornton | @fat     |
+| 3   | Larry the Bird |          | @twitter |
+
+## Kitchen Sink
+
+|         | 1         | 2          | 3       |
+| ------- | --------- | ---------- | ------- |
+| Patrick | 25-30 cm  | 30.1-35 cm | > 35 cm |
+| Samuel  | 8-11.9 cm | 12-15.9 cm | ≥ 16 cm |
+| Anna    | 8-11.9 cm | 12-15.9 cm | 16 cm   |
+| Vianca  | 8-11.9 cm | 12-15.9 cm | 16 cm   |
+| Jacob   | 8-11.9 cm | 12-15.9 cm | ≥ 16 cm |
+
+:::note
+| | 1 | 2 | 3 |
+| ------- | --------- | ---------- | ------- |
+| Patrick | 25-30 cm | 30.1-35 cm | > 35 cm |
+| Samuel | 8-11.9 cm | 12-15.9 cm | ≥ 16 cm |
+| Anna | 8-11.9 cm | 12-15.9 cm | 16 cm |
+| Vianca | 8-11.9 cm | 12-15.9 cm | 16 cm |
+| Jacob | 8-11.9 cm | 12-15.9 cm | ≥ 16 cm |
+:::
+
+:::tip
+| | 1 | 2 | 3 |
+| ------- | --------- | ---------- | ------- |
+| Patrick | 25-30 cm | 30.1-35 cm | > 35 cm |
+| Samuel | 8-11.9 cm | 12-15.9 cm | ≥ 16 cm |
+| Anna | 8-11.9 cm | 12-15.9 cm | 16 cm |
+| Vianca | 8-11.9 cm | 12-15.9 cm | 16 cm |
+| Jacob | 8-11.9 cm | 12-15.9 cm | ≥ 16 cm |
+:::
+
+:::caution
+| | 1 | 2 | 3 |
+| ------- | --------- | ---------- | ------- |
+| Patrick | 25-30 cm | 30.1-35 cm | > 35 cm |
+| Samuel | 8-11.9 cm | 12-15.9 cm | ≥ 16 cm |
+| Anna | 8-11.9 cm | 12-15.9 cm | 16 cm |
+| Vianca | 8-11.9 cm | 12-15.9 cm | 16 cm |
+| Jacob | 8-11.9 cm | 12-15.9 cm | ≥ 16 cm |
+:::
+
+:::danger
+| | 1 | 2 | 3 |
+| ------- | --------- | ---------- | ------- |
+| Patrick | 25-30 cm | 30.1-35 cm | > 35 cm |
+| Samuel | 8-11.9 cm | 12-15.9 cm | ≥ 16 cm |
+| Anna | 8-11.9 cm | 12-15.9 cm | 16 cm |
+| Vianca | 8-11.9 cm | 12-15.9 cm | 16 cm |
+| Jacob | 8-11.9 cm | 12-15.9 cm | ≥ 16 cm |
+:::
+
+## Another example
+
+| Destination            | Web | Mobile | Server | Web | Mobile |
+| ---------------------- | --- | ------ | ------ | --- | ------ |
+| 1Flow                  | ✅  | ✅     | ✅     | ⬜️  | ⬜️     |
+| 1Flow Mobile Plugin ℹ️ | ⬜️  | ✅     | ⬜️     | ⬜️  | ⬜️     |
+| 1Flow Web (Actions) ℹ️ | ✅  | ⬜️     | ⬜️     | ⬜️  | ⬜️     |
+| 2mee                   | ✅  | ✅     | ✅     | ⬜️  | ⬜️     |
+| Aampe                  | ✅  | ✅     | ✅     | ⬜️  | ⬜️     |
+| AB Smartly             | ✅  | ✅     | ✅     | ⬜️  | ⬜️     |
+| AB Tasty client side   | ✅  | ✅     | ✅     | ⬜️  | ⬜️     |
+| ABsmartly (Actions)    | ✅  | ⬜️     | ✅     | ⬜️  | ⬜️     |
+| Acoustic (Actions) ℹ️  | ✅  | ⬜️     | ✅     | ⬜️  | ⬜️     |
+| Actable Predictive ℹ️  | ✅  | ⬜️     | ✅     | ⬜️  | ⬜️     |
+| Actions Pipedrive ℹ️   | ✅  | ⬜️     | ✅     | ⬜️  | ⬜️     |
+| ActiveCampaign         | ✅  | ✅     | ✅     | ⬜️  | ⬜️     |
+
+## Inside `<details>`
+
+<details open>
+<summary>View data</summary>
+
+| #   | First          | Last     | Handle   |
+| --- | -------------- | -------- | -------- |
+| 1   | Mark           | Otto     | @mdo     |
+| 2   | Jacob          | Thornton | @fat     |
+| 3   | Larry the Bird |          | @twitter |
+
+</details>

packages/starlight/style/markdown.css

@@ -100,17 +100,37 @@
 	padding-inline-start: 1rem;
 }
 
+/* Table styling */
 .sl-markdown-content table:not(:where(.not-content *)) {
 	display: block;
 	overflow: auto;
 	border-collapse: collapse;
 }
-.sl-markdown-content tr:nth-child(2n):not(:where(.not-content *)) {
-	background-color: var(--sl-color-gray-7, var(--sl-color-gray-6));
-}
 .sl-markdown-content :is(th, td):not(:where(.not-content *)) {
-	border: 1px solid var(--sl-color-hairline-light);
-	padding: 0.375rem 0.8125rem;
+	border-bottom: 1px solid;
+	padding: 0.5rem 1rem;
+	/* Align text to the top of the row in multiline tables. */
+	vertical-align: baseline;
+}
+.sl-markdown-content th:not(:where(.not-content *)) {
+	color: var(--sl-color-white);
+	font-weight: 600;
+}
+.sl-markdown-content td:not(:where(.not-content *)) {
+	border-color: var(--sl-color-gray-5);
+}
+/* Align headings to the start of the line unless set by the `align` attribute. */
+.sl-markdown-content th:not([align]):not(:where(.not-content *)) {
+	text-align: start;
+}
+/* Table styles inside asides */
+.sl-markdown-content .starlight-aside td:not(:where(.not-content *)) {
+	border-color: var(--sl-color-gray-4);
+}
+@supports (border-color: color-mix(in hsl, var(--sl-color-asides-text-accent) 30%, transparent)) {
+	.sl-markdown-content .starlight-aside td:not(:where(.not-content *)) {
+		border-color: color-mix(in hsl, var(--sl-color-asides-text-accent) 30%, transparent);
+	}
 }
 
 .sl-markdown-content hr:not(:where(.not-content *)) {