chore: make table a component

src/scss/_drawing.scss

@@ -9,6 +9,8 @@
 
 @import 'components/cards';
 
+@import 'components/tables';
+
 @import 'components/previews';
 
 .flex-that {

src/scss/_typography.scss

@@ -289,37 +289,3 @@ mark {
 	width: 100%;
 	display: block;
 }
-
-/* Table elements */
-
-@mixin table-color($text-color) {
-  th {
-    color: $text-color;
-  }
-}
-
-table {
-  border-collapse: collapse;
-}
-
-table, th, td {
-  border: 0;
-  padding:0px;
-  margin:0px;
-}
-
-th, td {
-  vertical-align:center;
-  padding-top: 0.325em;
-  padding-bottom: 0.325em;
-}
-
-th  {
-  font-weight: $fontweight_hyper;
-}
-
-.table {
-    @each $name, $color in list-colors() {
-        &-#{$name} { @include table-color(get-color($name)); }
-    }
-}

src/scss/components/_tables.scss

@@ -0,0 +1,35 @@
+/* TABLE
+ * Style tables
+*/
+
+@mixin table-color($text-color) {
+  th {
+    color: $text-color;
+  }
+}
+
+table {
+  border-collapse: collapse;
+}
+
+table, th, td {
+  border: 0;
+  padding:0px;
+  margin:0px;
+}
+
+th, td {
+  vertical-align:center;
+  padding-top: 0.325em;
+  padding-bottom: 0.325em;
+}
+
+th  {
+  font-weight: $fontweight_hyper;
+}
+
+.table {
+    @each $name, $color in list-colors() {
+        &-#{$name} { @include table-color(get-color($name)); }
+    }
+}