feat(core): add styles for vanilla tables

#1

packages/core/src/_tokens.scss

@@ -56,13 +56,15 @@ $msp-colors: (
   "--msp-color-bg-primary": #{getColor("teal")},
   "--msp-color-bg-secondary": #{getColor("mauve")},
   "--msp-color-bg-danger": #{getColor("red")},
-  "--msp-color-bg-disabled": #{getColor("red")},
+  "--msp-color-bg-disabled": #{color.scale(getColor("text"), $alpha: -10%)},
   "--msp-color-bg-input": #{getColor("text")},
   "--msp-color-bg-checkbox": #{getColor("teal")},
   "--msp-color-bg-range": #{getColor("surface1")},
   "--msp-color-bg-btn": #{getColor("teal")},
+  "--msp-color-bg-table": #{getColor("base")},
 
   "--msp-color-text": #{getColor("text")},
+  "--msp-color-text-transparent": #{color.scale(getColor("text"), $alpha: -50%)},
   "--msp-color-text-surface": #{getColor("text")},
   "--msp-color-text-link": #{getColor("teal")},
   "--msp-color-text-accent": #{getColor("base")},
@@ -78,6 +80,7 @@ $msp-colors: (
   "--msp-color-text-checkbox": #{getColor("surface1")},
   "--msp-color-text-range": #{getColor("teal")},
   "--msp-color-text-btn": #{getColor("base")},
+  "--msp-color-text-table": #{getColor("text")},
 
   "--msp-color-shadow": #{getColor("crust")},
   "--msp-color-transparent": transparent,
@@ -95,7 +98,7 @@ $msp-colors: (
 
   // ── Borders ─────────────────────────────────────────────────────────────
   --msp-border-width: 1px;
-  --msp-border-color: var(--msp-color-bg-transparent);
+  --msp-border-color: var(--msp-color-text-transparent);
   --msp-border-style: solid;
   --msp-border-radius: 0.2rem;
 }

packages/core/src/components/table.scss

@@ -0,0 +1,37 @@
+table {
+  caption-side: bottom;
+  border-collapse: collapse;
+
+  width: 100%;
+
+  tbody,
+  td,
+  tfoot,
+  th,
+  thead,
+  tr {
+    border-color: inherit;
+    border-style: solid;
+    border-width: 0;
+  }
+
+  thead {
+    vertical-align: bottom;
+    th {
+      text-align: start;
+    }
+  }
+
+  & > :not(caption) > * > * {
+    padding: var(--msp-spacing-2);
+    color: var(--msp-color-table-text);
+    background-color: var(--msp-color-bg-table);
+    border-bottom-width: var(--msp-border-width);
+    border-color: var(--msp-color-text-transparent);
+    box-shadow: inset 0 0 0 9999px
+      var(
+        --bs-table-bg-state,
+        var(--bs-table-bg-type, var(--bs-table-accent-bg))
+      );
+  }
+}

packages/core/src/style.scss

@@ -5,6 +5,7 @@
 @use "./mixins";
 
 @use "./components/form";
+@use "./components/table";
 
 // SASS variables are imported without namespace, but try to always use native
 // CSS variables when possible so they can be overrwritten by custom styles

packages/website/src/main.ts

@@ -2,11 +2,15 @@ import "mini-strap-core";
 import render from "./render";
 
 import layout from "./templates/form.html";
+import table from "./templates/table.html";
 
 document.querySelector<HTMLDivElement>("#app")!.innerHTML = `
   <main class="msp-container">
     <section>
       ${render(layout, { name: "ale" })}
     </section>
+    <section class="msp-mb-3">
+      ${render(table, { name: "ale" })}
+    </section>
   </main>
 `;

packages/website/src/templates/table.html

@@ -0,0 +1,29 @@
+<table class="table">
+  <thead>
+    <tr>
+      <th scope="col" class="msp-text-center">#</th>
+      <th scope="col">First</th>
+      <th scope="col">Last</th>
+      <th scope="col">Handle</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <th scope="row">1</th>
+      <td>Mark</td>
+      <td>Otto</td>
+      <td>@mdo</td>
+    </tr>
+    <tr>
+      <th scope="row">2</th>
+      <td>Jacob</td>
+      <td>Thornton</td>
+      <td>@fat</td>
+    </tr>
+    <tr>
+      <th scope="row">3</th>
+      <td colspan="2">Larry the Bird</td>
+      <td>@twitter</td>
+    </tr>
+  </tbody>
+</table>