feat: add ui for table (#81)

package.json

@@ -1,7 +1,7 @@
 {
   "name": "@eleven-labs/design-system",
   "description": "Design System for Eleven Labs",
-  "version": "0.36.0",
+  "version": "0.37.0",
   "repository": {
     "type": "git",
     "url": "https://github.com/eleven-labs/design-system.git"

src/pages/PostPage/PostPage.scss

@@ -88,5 +88,30 @@ $headings-by-compoent-variant-name: (
         transform: rotate(180deg);
       }
     }
+
+    table {
+      text-align: left;
+      width: 100%;
+
+      thead {
+        background-color: map-get-strict($token-variables, 'color', 'primary');
+        color: map-get-strict($token-variables, 'color', 'secondary');
+      }
+
+      th, td {
+        padding: map-get-strict($token-variables, 'spacing', 'xs');
+        border: 1px solid map-get-strict($token-variables, 'color', 'primary-very-dark');
+      }
+
+      tbody {
+        tr {
+          background-color: map-get-strict($token-variables, 'color', 'white');
+        }
+
+        tr + tr {
+          background-color: map-get-strict($token-variables, 'color', 'secondary-dark');
+        }
+      }
+    }
   }
 }

src/pages/PostPage/PostPage.stories.tsx

@@ -94,6 +94,24 @@ const meta: Meta<typeof PostPage> = {
           </li>
           <li>Fourth item</li>
         </ul>
+        <table>
+          <thead>
+            <tr>
+              <th>Syntax</th>
+              <th>Description</th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr>
+              <td>Header</td>
+              <td>Title</td>
+            </tr>
+            <tr>
+              <td>Paragraph</td>
+              <td>Text</td>
+            </tr>
+          </tbody>
+        </table>
       </>
     ),
     footer: PostFooterStories.args as PostPageProps['footer'],