docs: #325 typography class methods documented

docs/docs/Core/Typography/BasicTypographies.md

@@ -41,3 +41,13 @@ sidebar_position: 1
 <p class="font-size-56">This text has 56px of font-size</p>
 ```
 
+### Font Families
+
+Default font-family in eccentric touch is [Inter](https://fonts.google.com/specimen/Inter?query=inter), which is coming from Google Fonts.
+There are 3 variations we have added to font family types, that are `serif`, `sans-serif`, `monospace`.
+
+| Class Name | CSS Property | Font Family / Name | Use Case / Output |
+|------------|--------------|--------------------|-------------------|
+| `font-sans-serif` | font-family: 'Inter', sans-serif | [Inter](https://fonts.google.com/specimen/Inter) | <p class="font-sans-serif">Sans Serif Font</p> |
+| `font-serif`      | font-family: 'Lora', serif; | [Lora](https://fonts.google.com/specimen/Lora) | <p class="font-serif">Serif Font</p> |
+| `font-monospace` | font-family: 'Space Mono', monospace; | [Space Mono](https://fonts.google.com/specimen/Space+Mono) | <p class="font-monospace">Monospace Font</p> |

docs/docs/Core/Typography/FontStyles.md

@@ -4,3 +4,12 @@ sidebar_position: 3
 
 # Font Style
 
+| Class Name | Value | CSS Property | Use Case / Output |
+|------------|-------|--------------|-------------------|
+| `font-style-normal` | Normal | font-style: normal; | <p class="font-style-normal">Normal font styling</p> |
+| `font-style-italic` | Italic | font-style: italic; | <p class="font-style-italic">Italic font styling</p> |
+| `font-style-oblique` | Oblique | font-style: oblique; | <p class="font-style-oblique">Oblique font styling</p> |
+| `font-style-inherit` | Inherit | font-style: inherit; | <p class="font-style-inherit">Inherit font styling</p> |
+| `font-style-initial` | Initial | font-style: initial; | <p class="font-style-initial">Initial font styling</p> |
+| `font-style-revert` | Revert | font-style: revert; | <p class="font-style-revert">Revert font styling</p> |
+| `font-style-unset` | Unset | font-style: unset; | <p class="font-style-unset">Unset font styling</p> |

docs/docs/Core/Typography/FontWeights.md

@@ -4,5 +4,29 @@ sidebar_position: 2
 
 # Font Weights
 
-## Default CSS Properties
+## Value based Font Weights
 
+| Class Name | Font | CSS Property |
+|------------|------------|--------------|
+| `font-weight-100` | 100   | font-weight: 100; |
+| `font-weight-200` | 200   | font-weight: 200; |
+| `font-weight-300` | 300   | font-weight: 300; |
+| `font-weight-400` | 400   | font-weight: 400; |
+| `font-weight-500` | 500   | font-weight: 500; |
+| `font-weight-600` | 600   | font-weight: 600; |
+| `font-weight-700` | 700   | font-weight: 700; |
+| `font-weight-800` | 800   | font-weight: 800; |
+| `font-weight-900` | 900   | font-weight: 900; |
+
+## CSS Property types for font-weights
+
+| Class Name | Value | CSS Property |
+|------------|-------|--------------|
+| `font-weight-normal` | normal | font-weight: normal; |
+| `font-weight-bold` | bold | font-weight: bold; |
+| `font-weight-bolder` | bolder | font-weight: bolder; |
+| `font-weight-lighter` | lighter | font-weight: lighter; |
+| `font-weight-inherit` | inherit | font-weight: inherit; |
+| `font-weight-initial` | initial | font-weight: initial; |
+| `font-weight-revert` | revert | font-weight: revert; |
+| `font-weight-unset` | unset | font-weight: unset; |