From f0190d23772fea6d9b06777675c00231511640e9 Mon Sep 17 00:00:00 2001
From: Ivanka Todorova <i.todorova@dineout.bg>
Date: Sun, 9 Jan 2022 19:13:39 +0200
Subject: [PATCH] feat: update documentation (resolve #5)

---
 README.md       | 144 +++++++++++++++++++++++++++++++++++++++++++++++-
 docs/index.html |  30 +++++-----
 docs/style.css  |  44 +++++++--------
 src/main.js     |  22 ++++----
 4 files changed, 187 insertions(+), 53 deletions(-)

diff --git a/README.md b/README.md
index c5f6708..bbfae43 100644
--- a/README.md
+++ b/README.md
@@ -13,10 +13,10 @@
 
 TailwindCSS powered UI kit following simply superb.'s design system.
 
+[➡️ Demo available here](https://simplysuperb-dev.github.io/)
 
-## Available Styles
-
-You can find all currently available styles at https://simplysuperb-dev.github.io/ui-kit/
+## Why
+I am building few applications (iOS / Android / Mobile), which share common visual elements, so I am using this kit for another package containing React components and wanted to wrap common tailwindcss utilities as components.
 
 ## Installation
 
@@ -37,6 +37,144 @@ module.exports = {
 }
 ```
 
+## Usage
+
+### Colors
+
+All defined colors are used for generating classes for styling: `.list`, `.link` and `.btn` aswell. Refer to the [source code](https://github.com/simplysuperb-dev/ui-kit/tree/main/src/components) of each of those components for their further usage.
+
+List of colors: 
+
+- **transparent**: transparent
+- **white**: #FFFFFF
+- **graphite**: #2e2e2e
+- **grey**: #aaaaaa
+- **green**: #98b88b
+- **green-secondary**: #8ba780
+- **porcelain**: #f1f3f4
+- **blue**: #8b8fb8
+- **blue-secondary**: #5d64a5
+- **orange**: #dba475
+- **orange-secondary**: #d09562
+- **yellow**: #FFC634
+- **red**: #cd5f5f
+- **red-secondary**: #bf2a2a
+
+### Typography
+
+**Fonts**
+- `.font-serif`: Merriweather
+- `.font-sans`: Merriweather Sans
+
+**Font Sizes**
+- `.text-h1` / `.text-h2` / `.text-h3` / `.text-h4` / `.text-h5` / `.text-h6`: heading styles that should be used in combination with `.font-serif`
+- `.text-subtitle` / `.text-caption` / `.text-overline`: used for adding emphasis
+- `.text-base`: resetting the font size
+- `.text-button`: used on `.btn` components
+
+### Basic Components
+**`.list`**
+```html
+  <ul class="list list-red">
+    <li>home</li>
+    <li>about</li>
+    <li>
+        social
+        <ol class="list list-orange">
+            <li>instagram</li>
+            <li>facebook</li>
+            <li>linkedin</li>
+        </ul>
+    </li>
+</ul>
+```
+
+**`.link`**
+```html
+<a href="javascript: false" class="link link-green">Green link</a>
+```
+
+**`.btn`**
+
+```html
+<!-- Solid -->
+ <button class="btn btn-solid btn-green">Default Green</button>
+
+<!-- Outline -->
+<button class="btn btn-outline btn-green">Default Green</button>
+
+<!-- Link -->
+<button class="btn btn-link btn-green">Default Green</button>
+ ```
+
+ ### Form components
+
+Form components must be wrapped inside a `.form-element` div and by adding `has-error` class to that div they will be styled properly to indicate any validation errors.
+
+Additionally you might use `.form-label` for styling `<label>` elements in forms.
+
+ #### `.input`
+
+ ```html
+ <div class="form-element">
+    <label for="textInput" class="form-label">label</label>
+    <input type="text" id="textInput" placeholder="my text input..." class="form-input">
+</div>
+```
+
+ #### `.select`
+ ```html
+<div class="form-element">
+    <label for="select" class="form-label">select</label>
+    <select class="form-select" id="select">
+        <option>Select an option</option>
+        <option>Milk</option>
+        <option>Bread</option>
+        <option>Butter</option>
+        <option>Beef</option>
+    </select>
+</div>
+```
+
+ #### `.textarea`
+ ```html
+<div class="form-element ">
+    <label for="textarea" class="form-label">
+        Textarea
+    </label>
+    <textarea class="form-textarea" name="textarea" id="textarea" placeholder="my amazing textarea..."></textarea>
+</div>
+```
+ #### `.radio`
+ ```html
+<div class="form-element">
+    <span class="form-label">Are you amazing?</span>
+    <div class="flex">
+        <div class="inline-flex items-center">
+            <input type="radio" id="yesRadio" name="amazing" class="form-radio">
+            <label for="yesRadio">Yes</label>
+        </div>
+        <div class="inline-flex items-center ml-6">
+            <input type="radio" id="heckYesRadio" name="amazing" class="form-radio">
+            <label for="heckYesRadio">Heck, Yes!</label>
+        </div>
+    </div>
+</div>
+```
+ #### `.checkbox`
+ ```html
+<div class="form-element flex-row">
+    <div class="inline-flex items-center">
+        <input type="checkbox" id="checkbox" name="checkbox" class="form-checkbox">
+        <label for="checkbox">Yes, I accept the terms I never read</label>
+    </div>
+</div>
+```
+
+### Utilities
+
+### `.ui-outline`
+Beautifully styled outline that can be applied on `:hover`, `:focus` or `:active` states.
 
 ## Modifying
 
diff --git a/docs/index.html b/docs/index.html
index 075c758..22e6200 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -198,55 +198,55 @@ <h2 class="text-green font-serif mb-5 desktop:text-h3 text-h4">
 
             <div class="flex flex-wrap mb-2">
                 <div class="p-2">
-                    <button href="javascript: false" class="btn btn-solid btn-green">Default Green</button>
+                    <button class="btn btn-solid btn-green">Default Green</button>
                 </div>
                 <div class="p-2">
-                    <button href="javascript: false" class="btn btn-solid btn-blue">Default Blue</button>
+                    <button class="btn btn-solid btn-blue">Default Blue</button>
                 </div>
                 <div class="p-2">
-                    <button href="javascript: false" class="btn btn-solid btn-orange">Default Orange</button>
+                    <button class="btn btn-solid btn-orange">Default Orange</button>
                 </div>
                 <div class="p-2">
-                    <button href="javascript: false" class="btn btn-solid btn-yellow">Default Yellow</button>
+                    <button class="btn btn-solid btn-yellow">Default Yellow</button>
                 </div>
                 <div class="p-2">
-                    <button href="javascript: false" class="btn btn-solid btn-red">Default Red</button>
+                    <button class="btn btn-solid btn-red">Default Red</button>
                 </div>
             </div>
 
             <div class="flex flex-wrap mb-2">
                 <div class="p-2">
-                    <button href="javascript: false" class="btn btn-outline btn-green">Default Green</button>
+                    <button class="btn btn-outline btn-green">Default Green</button>
                 </div>
                 <div class="p-2">
-                    <button href="javascript: false" class="btn btn-outline btn-blue">Default Blue</button>
+                    <button class="btn btn-outline btn-blue">Default Blue</button>
                 </div>
                 <div class="p-2">
-                    <button href="javascript: false" class="btn btn-outline btn-orange">Default Orange</button>
+                    <button class="btn btn-outline btn-orange">Default Orange</button>
                 </div>
                 <div class="p-2">
-                    <button href="javascript: false" class="btn btn-outline btn-yellow">Default Yellow</button>
+                    <button class="btn btn-outline btn-yellow">Default Yellow</button>
                 </div>
                 <div class="p-2">
-                    <button href="javascript: false" class="btn btn-outline btn-red">Default Red</button>
+                    <button class="btn btn-outline btn-red">Default Red</button>
                 </div>
             </div>
 
             <div class="flex flex-wrap mb-2">
                 <div class="p-2">
-                    <button href="javascript: false" class="btn btn-link btn-green">Default Green</button>
+                    <button class="btn btn-link btn-green">Default Green</button>
                 </div>
                 <div class="p-2">
-                    <button href="javascript: false" class="btn btn-link btn-blue">Default Blue</button>
+                    <button class="btn btn-link btn-blue">Default Blue</button>
                 </div>
                 <div class="p-2">
-                    <button href="javascript: false" class="btn btn-link btn-orange">Default Orange</button>
+                    <button class="btn btn-link btn-orange">Default Orange</button>
                 </div>
                 <div class="p-2">
-                    <button href="javascript: false" class="btn btn-link btn-yellow">Default Yellow</button>
+                    <button class="btn btn-link btn-yellow">Default Yellow</button>
                 </div>
                 <div class="p-2">
-                    <button href="javascript: false" class="btn btn-link btn-red">Default Red</button>
+                    <button class="btn btn-link btn-red">Default Red</button>
                 </div>
             </div>
         </section>
diff --git a/docs/style.css b/docs/style.css
index d1107d7..85f493c 100644
--- a/docs/style.css
+++ b/docs/style.css
@@ -838,8 +838,8 @@ ol.list {
 }
 
 .btn {
-  font-size: 16px;
-  line-height: 22px;
+  font-size: 1.143rem;
+  line-height: 1.571rem;
   padding-left: 1rem;
   padding-right: 1rem;
   padding-top: 0.5rem;
@@ -850,10 +850,6 @@ ol.list {
 }
 
 .btn:hover, .btn:active, .btn:focus {
-  outline-color: rgba(152, 184, 139, 0.5);
-  outline-style: dotted;
-  outline-width: 1px;
-  outline-offset: 2px;
   background-color: transparent;
   border-width: 2px;
   border-color: transparent;
@@ -1349,38 +1345,38 @@ ol.list {
 }
 
 .text-h3 {
-  font-size: 48px;
-  line-height: 60px;
+  font-size: 3.429rem;
+  line-height: 4.286rem;
 }
 
 .text-base {
-  font-size: 14px;
-  line-height: 24px;
+  font-size: 1rem;
+  line-height: 1.714rem;
 }
 
 .text-h4 {
-  font-size: 34px;
-  line-height: 42px;
+  font-size: 2.429rem;
+  line-height: 3rem;
 }
 
 .text-h6 {
-  font-size: 24px;
-  line-height: 32px;
+  font-size: 1.714rem;
+  line-height: 2.286rem;
 }
 
 .text-h1 {
-  font-size: 96px;
-  line-height: 120px;
+  font-size: 5.857rem;
+  line-height: 7.571rem;
 }
 
 .text-h2 {
-  font-size: 60px;
-  line-height: 75px;
+  font-size: 4.286rem;
+  line-height: 5.357rem;
 }
 
 .text-h5 {
-  font-size: 24px;
-  line-height: 32px;
+  font-size: 1.714rem;
+  line-height: 2.286rem;
 }
 
 .font-thin {
@@ -1429,12 +1425,12 @@ ol.list {
   }
 
   .desktop\:text-h2 {
-    font-size: 60px;
-    line-height: 75px;
+    font-size: 4.286rem;
+    line-height: 5.357rem;
   }
 
   .desktop\:text-h3 {
-    font-size: 48px;
-    line-height: 60px;
+    font-size: 3.429rem;
+    line-height: 4.286rem;
   }
 }
\ No newline at end of file
diff --git a/src/main.js b/src/main.js
index 961190a..89bb7ac 100644
--- a/src/main.js
+++ b/src/main.js
@@ -63,17 +63,17 @@ module.exports = plugin(function ({ addUtilities, addComponents, theme, e }) {
             desktop: '960px',
         },
         fontSize: {
-            overline: ['10px', '14px'],
-            caption: ['12px', '18px'],
-            base: ['14px', '24px'],
-            subtitle: ['16px', '22px'],
-            button: ['16px', '22px'],
-            h1: ['96px', '120px'],
-            h2: ['60px', '75px'],
-            h3: ['48px', '60px'],
-            h4: ['34px', '42px'],
-            h5: ['24px', '32px'],
-            h6: ['24px', '32px'],
+            overline: ['0.625rem', '0.875rem'],
+            caption: ['0.75rem', '1.125rem'],
+            base: ['1rem', '1.714rem'],
+            subtitle: ['1.143rem', '1.571rem'],
+            button: ['1.143rem', '1.571rem'],
+            h1: ['5.857rem', '7.571rem'],
+            h2: ['4.286rem', '5.357rem'],
+            h3: ['3.429rem', '4.286rem'],
+            h4: ['2.429rem', '3rem'],
+            h5: ['1.714rem', '2.286rem'],
+            h6: ['1.714rem', '2.286rem'],
         },
     }
 })
\ No newline at end of file