From fe6a2493849d9f08df9b3a4dd8ba3d958170e1f6 Mon Sep 17 00:00:00 2001
From: Himanshu Gupta <himanshu12.gupta@ril.com>
Date: Mon, 19 Feb 2024 03:20:24 +0530
Subject: [PATCH] fix(customization in readme.md): added Customization section
 in readme.md

---
 README.md                    | 15 +++++++++++----
 __appset/configFontFamily.js | 10 +++++-----
 __appset/configFontSize.js   | 32 ++++++++++++++++----------------
 __appset/configFontWeight.js | 12 ++++++------
 __appset/configInput.js      | 24 ++++++++++++------------
 5 files changed, 50 insertions(+), 43 deletions(-)

diff --git a/README.md b/README.md
index a6e6ba7..827bb07 100644
--- a/README.md
+++ b/README.md
@@ -34,6 +34,7 @@ FE-Theme is a styled-component based comprehensive library of accessible, reusab
 1. 🚀 [Features](#features)
 2. 📦 [Installation](#installation)
 3. 💻 [Usage](#usage)
+4. ⚙️  [Customization](#customization)
 4. 📚 [Online Editor Templates](#online-editor-templates)
 5. 📝 [Contributing](#contributing)
 6. ✨ [Contributors](#contributors)
@@ -91,9 +92,16 @@ import Button from 'fe-theme/Button';
 ```
 
 &nbsp;&nbsp;Wow, the configuration is quite simple, but wait... button design is different in your application. 
-&nbsp;&nbsp;No worry, follow step 3, 4.
+&nbsp;&nbsp;No worry, Checkout Customization.
 
-#### 3. Create your own theme
+
+## Customization
+
+#### 1. Create your own theme
+
+==> You can generate config files for all the component automatically using command line [Check Commands](./.github/COMMAND.md).
+
+==> You can also generate it Manually, follow steps given below.
 
 &nbsp;&nbsp; **a)** Create an empty folder called ```fe-theme-config``` in your application at any location.
 
@@ -134,9 +142,8 @@ export default {
 };
 
 ```
-Yeah, We have created config files Mannually but You can also generate config files automatically using command line [Check Commands](./.github/COMMAND.md)
 
-#### 4. Pass the newly created theme file in init function
+#### 2. Pass the newly created theme file in init function
 
 ```js
 import { ThemeProvider } from 'styled-components';
diff --git a/__appset/configFontFamily.js b/__appset/configFontFamily.js
index 6c4064f..041fdc8 100644
--- a/__appset/configFontFamily.js
+++ b/__appset/configFontFamily.js
@@ -1,7 +1,7 @@
 const FontFamily = {
-  "roboto": "Roboto",
-  "averta": "Averta",
-  "sans": "Open Sans,sans-serif"
-}
+  roboto: 'Roboto',
+  averta: 'Averta',
+  sans: 'Open Sans,sans-serif',
+};
 
-export default FontFamily
+export default FontFamily;
diff --git a/__appset/configFontSize.js b/__appset/configFontSize.js
index 4528ee3..690762c 100644
--- a/__appset/configFontSize.js
+++ b/__appset/configFontSize.js
@@ -1,18 +1,18 @@
 const FontSize = {
-  "xxxxxl": "48px",
-  "xxxxl": "32px",
-  "xxxl": "28px",
-  "xxl": "24px",
-  "xl": "20px",
-  "l": "18px",
-  "m": "16px",
-  "md": "15px",
-  "s": "14px",
-  "sm": "13px",
-  "xs": "12px",
-  "xxs": "11px",
-  "xxxs": "10px",
-  "xxxxs": "8px"
-}
+  xxxxxl: '48px',
+  xxxxl: '32px',
+  xxxl: '28px',
+  xxl: '24px',
+  xl: '20px',
+  l: '18px',
+  m: '16px',
+  md: '15px',
+  s: '14px',
+  sm: '13px',
+  xs: '12px',
+  xxs: '11px',
+  xxxs: '10px',
+  xxxxs: '8px',
+};
 
-export default FontSize
+export default FontSize;
diff --git a/__appset/configFontWeight.js b/__appset/configFontWeight.js
index 9100f94..4e0ed00 100644
--- a/__appset/configFontWeight.js
+++ b/__appset/configFontWeight.js
@@ -1,8 +1,8 @@
 const FontWeight = {
-  "normal": "400",
-  "medium": "500",
-  "semibold": "600",
-  "bold": "700"
-}
+  normal: '400',
+  medium: '500',
+  semibold: '600',
+  bold: '700',
+};
 
-export default FontWeight
+export default FontWeight;
diff --git a/__appset/configInput.js b/__appset/configInput.js
index ef259f0..0c72f30 100644
--- a/__appset/configInput.js
+++ b/__appset/configInput.js
@@ -1,17 +1,17 @@
 const Input = {
-  "borderRadius": "4px",
-  "primary": {
-    "borderColor": "white"
+  borderRadius: '4px',
+  primary: {
+    borderColor: 'white',
   },
-  "secondary": {
-    "borderColor": "white"
+  secondary: {
+    borderColor: 'white',
   },
-  "tertiary": {
-    "borderColor": "white"
+  tertiary: {
+    borderColor: 'white',
   },
-  "quaternary": {
-    "borderColor": "white"
-  }
-}
+  quaternary: {
+    borderColor: 'white',
+  },
+};
 
-export default Input
+export default Input;