@synergy-design-system/mcp 0.1.0 → 1.0.0

package/metadata/static/styles/syn-table.md

@@ -0,0 +1,201 @@
+## Default
+
+It is possible to achieve different table stylings (default, with border, alternating, ...)
+either via multiple classes on the table, td and th elements or as a convenient alternative
+as auto styling class, which is applied on a table element. These auto styling classes will
+style the td and th elements correctly, without the need to apply further classes.
+Note: The auto styling table classes work for simple table layouts. For more complex ones or advanced use cases, the table cell classes should be used.
+
+```html
+<table class="syn-table--default">
+  <thead>
+    <tr>
+      <th>Header content</th>
+      <th>Header content</th>
+      <th>Header content</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td>Cell content</td>
+      <td>Cell content</td>
+      <td>Cell content</td>
+    </tr>
+    <tr>
+      <td>Cell content</td>
+      <td>Cell content</td>
+      <td>Cell content</td>
+    </tr>
+    <tr>
+      <td>Cell content</td>
+      <td>Cell content</td>
+      <td>Cell content</td>
+    </tr>
+    <tr>
+      <td>Cell content</td>
+      <td>Cell content</td>
+      <td>Cell content</td>
+    </tr>
+  </tbody>
+</table>
+```
+
+---
+
+## Atomic Table
+
+Create table styles using multiple classes attached to table, td and th elements.
+
+```html
+<table class="syn-table">
+  <thead>
+    <tr>
+      <th class="syn-table-cell--header">Header content</th>
+      <th class="syn-table-cell--header">Header content</th>
+      <th class="syn-table-cell--header">Header content</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td class="syn-table-cell">Cell content</td>
+      <td class="syn-table-cell">Cell content</td>
+      <td class="syn-table-cell">Cell content</td>
+    </tr>
+    <tr>
+      <td class="syn-table-cell">Cell content</td>
+      <td class="syn-table-cell">Cell content</td>
+      <td class="syn-table-cell">Cell content</td>
+    </tr>
+    <tr>
+      <td class="syn-table-cell">Cell content</td>
+      <td class="syn-table-cell">Cell content</td>
+      <td class="syn-table-cell">Cell content</td>
+    </tr>
+    <tr>
+      <td class="syn-table-cell">Cell content</td>
+      <td class="syn-table-cell">Cell content</td>
+      <td class="syn-table-cell">Cell content</td>
+    </tr>
+  </tbody>
+</table>
+```
+
+---
+
+## Auto Default Table
+
+Use default table style with the auto styling class syn-table--default.
+
+```html
+<table class="syn-table--default">
+  <thead>
+    <tr>
+      <th>Header content</th>
+      <th>Header content</th>
+      <th>Header content</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td>Cell content</td>
+      <td>Cell content</td>
+      <td>Cell content</td>
+    </tr>
+    <tr>
+      <td>Cell content</td>
+      <td>Cell content</td>
+      <td>Cell content</td>
+    </tr>
+    <tr>
+      <td>Cell content</td>
+      <td>Cell content</td>
+      <td>Cell content</td>
+    </tr>
+    <tr>
+      <td>Cell content</td>
+      <td>Cell content</td>
+      <td>Cell content</td>
+    </tr>
+  </tbody>
+</table>
+```
+
+---
+
+## Auto Alternating Table
+
+Use alternating table style with the auto styling class syn-table--alternating.
+
+```html
+<table class="syn-table--alternating">
+  <thead>
+    <tr>
+      <th>Header content</th>
+      <th>Header content</th>
+      <th>Header content</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td>Cell content</td>
+      <td>Cell content</td>
+      <td>Cell content</td>
+    </tr>
+    <tr>
+      <td>Cell content</td>
+      <td>Cell content</td>
+      <td>Cell content</td>
+    </tr>
+    <tr>
+      <td>Cell content</td>
+      <td>Cell content</td>
+      <td>Cell content</td>
+    </tr>
+    <tr>
+      <td>Cell content</td>
+      <td>Cell content</td>
+      <td>Cell content</td>
+    </tr>
+  </tbody>
+</table>
+```
+
+---
+
+## Auto Border Table
+
+Use border table style with the auto styling class syn-table--border.
+
+```html
+<table class="syn-table--border">
+  <thead>
+    <tr>
+      <th>Header content</th>
+      <th>Header content</th>
+      <th>Header content</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td>Cell content</td>
+      <td>Cell content</td>
+      <td>Cell content</td>
+    </tr>
+    <tr>
+      <td>Cell content</td>
+      <td>Cell content</td>
+      <td>Cell content</td>
+    </tr>
+    <tr>
+      <td>Cell content</td>
+      <td>Cell content</td>
+      <td>Cell content</td>
+    </tr>
+    <tr>
+      <td>Cell content</td>
+      <td>Cell content</td>
+      <td>Cell content</td>
+    </tr>
+  </tbody>
+</table>
+```

package/metadata/static/styles/syn-weight.md

@@ -0,0 +1,5 @@
+## Default
+
+```html
+<span class="syn-weight--normal"> This is a default body text </span>
+```