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