feat: new xl tick- button rnd- table

docs/docs/button.md

@@ -25,5 +25,10 @@ sidebar_label: Button
       <div class="lil-btn-round lil-text-font-500 lil-mx-4">L</div>
       <div class="lil-btn-round lil-text-font-500">R</div>
     </div>
+
+    <div class="lil-flex lil-pt-5">
+      <div class="lil-btn-round-white lil-text-font-500 lil-mx-4">L</div>
+      <div class="lil-btn-round-white lil-text-font-500">R</div>
+    </div>
 </>
 ```

docs/docs/table.md

@@ -0,0 +1,28 @@
+---
+id: table
+title: Table
+sidebar_label: Table
+---
+
+#### Rounded Corner table
+```html live
+<>
+<table class="lil-table-round lil-border-spacing-0 lil-border-separate">
+  <tr>
+    <th>Firstname</th>
+    <th>Lastname</th>
+    <th>Age</th>
+  </tr>
+  <tr>
+    <td>Jill</td>
+    <td>Smith</td>
+    <td>50</td>
+  </tr>
+  <tr>
+    <td>Eve</td>
+    <td>Jackson</td>
+    <td>94</td>
+  </tr>
+</table>
+</>
+```

docs/docs/tickmark.md

@@ -19,6 +19,7 @@ sidebar_label: Tick Mark
             <div class="lil-tick lil-border-white"></div>
         </div>
 
+        <div class="lil-tick-xl"></div>
     </div>
 </>
 ```

docs/sidebars.js

@@ -37,6 +37,11 @@ module.exports = {
         items: ["promise-h", "promise-v"],
       },
       "reinforcement",
+      {
+        type: "category",
+        label: "Table",
+        items: ["table"]
+      },
       {
         type: "category",
         label: "Tabs",

src/components/Button/button.css

@@ -28,7 +28,14 @@
   @apply lil-w-16 lil-h-16 lil-rounded-full lil-bg-grey-150 lil-cursor-pointer lil-items-center lil-justify-center lil-flex lil-text-s-24;
 }
 
+.lil-btn-round-white {
+  @apply lil-w-16 lil-h-16 lil-rounded-full lil-bg-white lil-cursor-pointer lil-items-center lil-border-sm lil-border-font-500 lil-justify-center lil-flex lil-text-s-24;
+}
+
+.lil-btn-round-white:hover,
+.lil-btn-round-white:focus,
 .lil-btn-round:hover,
 .lil-btn-round:focus {
-  @apply lil-bg-blue-350 lil-text-white lil-outline-none;
+  @apply lil-bg-blue-350 lil-text-white lil-outline-none lil-border-none;
 }
+

src/components/Common/common.css

@@ -11,6 +11,13 @@ select {
     @apply lil-rounded-lg lil-p-3;
 }
 
+/*
+* - border-spacing not supported in tailwind
+*/
+.lil-border-spacing-0 {
+    border-spacing: 0;
+}
+
 @screen xl {
     .lil-container {
         @apply lil-w-full;

src/components/Icons/tick.css

@@ -7,3 +7,7 @@
     top: -2px;
     @apply lil-relative lil-w-1 lil-h-2 lil-border-b-sm lil-border-r-sm lil-border-font-200 lil-transform lil-rotate-45 lil-inline-block;
 }
+
+.lil-tick-xl{
+    @apply lil-relative lil-w-2 lil-h-4 lil-border-b-md lil-border-r-md lil-border-green-200 lil-transform lil-rotate-45 lil-inline-block
+}

src/components/Table/table.css

@@ -0,0 +1,18 @@
+/*
+* to make rounded corners by assigning border-radius for each corner cell
+*/
+.lil-table-round tr:first-child th:first-child {
+    @apply lil-rounded-tl-xl;
+}
+
+.lil-table-round tr:first-child th:last-child {
+    @apply lil-rounded-tr-xl;
+}
+
+.lil-table-round tr:last-child td:first-child {
+    @apply lil-rounded-bl-xl;
+}
+
+.lil-table-round tr:last-child td:last-child {
+    @apply lil-rounded-br-xl;
+}

src/index.css

@@ -14,6 +14,7 @@
 @import "./components/Promise/promise.css";
 @import "./components/Reinforcement/reinforcement.css";
 @import "./components/SideNav/sidenav.css";
+@import "./components/Table/table.css";
 @import "./components/Tabs/tabs.css";
 @import "./components/Tabs/lineTab.css";
 @import "./components/Tabs/verticalPromiseTabs.css";