feat(styles): add table

styles/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ippon-ui/styles",
-  "version": "0.0.5",
+  "version": "0.0.6",
   "description": "Ippon UI Pattern Library",
   "repository": {
     "type": "git",

styles/src/molecule/_molecule.scss

@@ -1,2 +1,4 @@
 @use 'import-file/import-file';
+@use 'table/table';
+@use 'tabs/tabs';
 @use 'toggle/toggle';

styles/src/molecule/molecule.pug

@@ -12,9 +12,11 @@ block content
       h1#molecules.tikui-title-main Molecules
     .tikui-vertical-spacing--line
       include /documentation/atomic-design/quote/molecule
-    .tikui-vertical-spacing--line
-      include:componentDoc(height=60) tabs/tabs.md
     .tikui-vertical-spacing--line
       include:componentDoc(height=370) import-file/import-file.md
+    .tikui-vertical-spacing--line
+      include:componentDoc(height=190) table/table.md
+    .tikui-vertical-spacing--line
+      include:componentDoc(height=60) tabs/tabs.md
     .tikui-vertical-spacing--line
       include:componentDoc(height=280) toggle/toggle.md

styles/src/molecule/table/_table.scss

@@ -0,0 +1,46 @@
+@use '../../quark/typography';
+
+.ippon-table {
+  --_border: 1px solid var(--ippon-color-neutral-border);
+
+  box-sizing: border-box;
+  border: var(--_border);
+  border-radius: var(--ippon-radius-l);
+  width: 100%;
+  overflow: hidden;
+  border-collapse: separate;
+  border-spacing: 0;
+
+  &--head {
+    background-color: var(--ippon-color-neutral-surface-secondary);
+    color: var(--ippon-color-neutral-text-icon-tertiary);
+
+    @include typography.body-medium-bold;
+  }
+
+  &--body {
+    background-color: var(--ippon-color-neutral-surface-primary);
+    color: var(--ippon-color-neutral-text-icon-primary);
+
+    @include typography.body-medium;
+  }
+
+  &--header,
+  &--cell {
+    box-sizing: border-box;
+    padding: var(--ippon-size-8) var(--ippon-size-12);
+    text-align: left;
+  }
+
+  &--header {
+    border-bottom: var(--_border);
+  }
+
+  &--row:last-child &--cell {
+    border-bottom: 0;
+  }
+
+  &--cell {
+    border-bottom: var(--_border);
+  }
+}

styles/src/molecule/table/table.code.pug

@@ -0,0 +1,25 @@
+include table.mixin.pug
+
++ippon-table
+  +ippon-table--head
+    +ippon-table--row
+      +ippon-table--header Column A
+      +ippon-table--header Column B
+      +ippon-table--header Column C
+      +ippon-table--header Column D
+  +ippon-table--body
+    +ippon-table--row
+      +ippon-table--cell Cell A1
+      +ippon-table--cell Cell B1
+      +ippon-table--cell Cell C1
+      +ippon-table--cell Cell D1
+    +ippon-table--row
+      +ippon-table--cell Cell A2
+      +ippon-table--cell Cell B2
+      +ippon-table--cell Cell C2
+      +ippon-table--cell Cell D2
+    +ippon-table--row
+      +ippon-table--cell Cell A3
+      +ippon-table--cell Cell B3
+      +ippon-table--cell Cell C3
+      +ippon-table--cell Cell D3

styles/src/molecule/table/table.md

@@ -0,0 +1 @@
+## Table

styles/src/molecule/table/table.mixin.pug

@@ -0,0 +1,23 @@
+mixin ippon-table--head
+  thead.ippon-table--head
+    block
+
+mixin ippon-table--body
+  tbody.ippon-table--body
+    block
+
+mixin ippon-table--row
+  tr.ippon-table--row
+    block
+
+mixin ippon-table--header
+  th.ippon-table--header
+    block
+
+mixin ippon-table--cell
+  td.ippon-table--cell
+    block
+
+mixin ippon-table
+  table.ippon-table
+    block

styles/src/molecule/table/table.render.pug

@@ -0,0 +1,4 @@
+extends /layout
+
+block body
+  include table.code.pug