style: Add simple styles for rose/table

addons/rose/addon/styles/rose/components/table/_index.scss

@@ -1,17 +1 @@
-@use '../../variables/sizing';
-@use '../../utilities/type';
-
-.rose-table {
-  @include type.type(s, normal);
-  width: 100%;
-
-  .rose-table-header {
-    background-color: var(--ui-gray-subtler-5);
-    text-align: left;
-  }
-
-  .rose-table-cell {
-    border: sizing.rems(xxxxs) solid var(--ui-gray-subtler-3);
-    padding: sizing.rems(xs) sizing.rems(xxs);
-  }
-}
+@import 'table';

addons/rose/addon/styles/rose/components/table/_table.scss

@@ -0,0 +1,34 @@
+@use '../../variables/sizing';
+@use '../../utilities/type';
+@use '../../variables/typography';
+
+.rose-table {
+  @include type.type(s, normal);
+  width: 100%;
+
+  .rose-table-row {
+    border: sizing.rems(xxxxs) solid var(--ui-gray-subtler-3);
+    border-left: none;
+    border-right: none;
+    text-align: left;
+
+    .rose-table-cell, .rose-table-header-cell {
+      vertical-align: middle;
+      padding: 0 sizing.rems(s);
+    }
+  }
+
+  .rose-table-header {
+    color: var(--ui-gray-starker-2);
+
+    .rose-table-cell, .rose-table-header-cell {
+      padding: sizing.rems(xs) sizing.rems(s);
+    }
+  }
+
+  .rose-table-body, .rose-table-footer {
+    .rose-table-cell, .rose-table-header-cell {
+      padding: sizing.rems(s) sizing.rems(s);
+    }
+  }
+}

addons/rose/addon/templates/components/rose/table.hbs

@@ -12,6 +12,6 @@
       classNames='rose-table-body')
     footer=(component 'rose/table/section'
       tagName='tfoot'
-      classNames='rose-table-foot')
+      classNames='rose-table-footer')
   )}}
 </table>