diff --git a/docusaurus/helper/ColorCard.js b/docusaurus/helper/ColorCard.js
index b17f559..a95d67b 100644
--- a/docusaurus/helper/ColorCard.js
+++ b/docusaurus/helper/ColorCard.js
@@ -15,7 +15,7 @@ const Container = styled.div`
 `
 
 const Color = styled.div`
-  background: ${props => props.hex};
+  background: ${(props) => props.hex};
   height: 150px;
   border-radius: 10px 10px 0px 0px;
 `
@@ -33,16 +33,16 @@ const Description = styled.div`
 
 const ColorCard = ({ colorName, hex, rgb, ...props }) => {
   return (
-    <Container {...props} >
+    <Container {...props}>
       <Color hex={hex} />
       <Description>
         <h3>{colorName}</h3>
         <div style={{ display: "flex", flexDirection: "row" }}>
-          <div style={{ flex: "1"}}>
+          <div style={{ flex: "1" }}>
             <h6 className="title">Hex</h6>
             <p>{hex}</p>
           </div>
-          <div style={{ flex: "1"}}>
+          <div style={{ flex: "1" }}>
             <h6 className="title">RGB</h6>
             <p>{rgb}</p>
           </div>
diff --git a/docusaurus/src/theme/DocItem/index.js b/docusaurus/src/theme/DocItem/index.js
index fc4edd9..9193b1f 100644
--- a/docusaurus/src/theme/DocItem/index.js
+++ b/docusaurus/src/theme/DocItem/index.js
@@ -5,37 +5,36 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import React from 'react';
+import React from 'react'
 
-import Head from '@docusaurus/Head';
-import isInternalUrl from '@docusaurus/isInternalUrl';
-import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
-import useBaseUrl from '@docusaurus/useBaseUrl';
-import DocPaginator from '@theme/DocPaginator';
-import useTOCHighlight from '@theme/hooks/useTOCHighlight';
+import Head from '@docusaurus/Head'
+import isInternalUrl from '@docusaurus/isInternalUrl'
+import useDocusaurusContext from '@docusaurus/useDocusaurusContext'
+import useBaseUrl from '@docusaurus/useBaseUrl'
+import DocPaginator from '@theme/DocPaginator'
+import useTOCHighlight from '@theme/hooks/useTOCHighlight'
 
-import classnames from 'classnames';
-import styles from './styles.module.css';
+import classnames from 'classnames'
+import styles from './styles.module.css'
 
-const LINK_CLASS_NAME = 'contents__link';
-const ACTIVE_LINK_CLASS_NAME = 'contents__link--active';
-const TOP_OFFSET = 100;
+const LINK_CLASS_NAME = 'contents__link'
+const ACTIVE_LINK_CLASS_NAME = 'contents__link--active'
+const TOP_OFFSET = 100
 
-function DocTOC({headings}) {
-  useTOCHighlight(LINK_CLASS_NAME, ACTIVE_LINK_CLASS_NAME, TOP_OFFSET);
+function DocTOC({ headings }) {
+  useTOCHighlight(LINK_CLASS_NAME, ACTIVE_LINK_CLASS_NAME, TOP_OFFSET)
   return (
     <div className="col col--3">
       <div className={styles.tableOfContents}>
         <Headings headings={headings} />
       </div>
     </div>
-  );
+  )
 }
 
-/* eslint-disable jsx-a11y/control-has-associated-label */
-function Headings({headings, isChild}) {
+function Headings({ headings, isChild }) {
   if (!headings.length) {
-    return null;
+    return null
   }
   return (
     <ul className={isChild ? '' : 'contents contents__left-border'}>
@@ -44,20 +43,21 @@ function Headings({headings, isChild}) {
           <a
             href={`#${heading.id}`}
             className={LINK_CLASS_NAME + `${isChild ? ' link__child' : ' link__parent'}`}
-            dangerouslySetInnerHTML={{__html: heading.value}}
+            dangerouslySetInnerHTML={{ __html: heading.value }}
           />
           <Headings isChild headings={heading.children} />
         </li>
       ))}
     </ul>
-  );
+  )
 }
 
+/* eslint-disable camelcase */
 function DocItem(props) {
-  const {siteConfig = {}} = useDocusaurusContext();
-  const {url: siteUrl, title: siteTitle} = siteConfig;
-  const {content: DocContent} = props;
-  const {metadata} = DocContent;
+  const { siteConfig = {} } = useDocusaurusContext()
+  const { url: siteUrl, title: siteTitle } = siteConfig
+  const { content: DocContent } = props
+  const { metadata } = DocContent
   const {
     description,
     title,
@@ -66,7 +66,7 @@ function DocItem(props) {
     lastUpdatedAt,
     lastUpdatedBy,
     sidebar_label
-  } = metadata;
+  } = metadata
   const {
     frontMatter: {
       image: metaImage,
@@ -74,15 +74,15 @@ function DocItem(props) {
       hide_title: hideTitle,
       hide_table_of_contents: hideTableOfContents,
     },
-  } = DocContent;
+  } = DocContent
 
-  let label = title.split("/")[0].toUpperCase();
-  let docsTitle = sidebar_label || title;
+  const label = title.split("/")[0].toUpperCase()
+  const docsTitle = sidebar_label || title
 
-  const metaTitle = docsTitle ? `${docsTitle} | ${siteTitle}` : siteTitle;
-  let metaImageUrl = siteUrl + useBaseUrl(metaImage);
+  const metaTitle = docsTitle ? `${docsTitle} | ${siteTitle}` : siteTitle
+  let metaImageUrl = siteUrl + useBaseUrl(metaImage)
   if (!isInternalUrl(metaImage)) {
-    metaImageUrl = metaImage;
+    metaImageUrl = metaImage
   }
 
   return (
@@ -201,7 +201,7 @@ function DocItem(props) {
         </div>
       </div>
     </>
-  );
+  )
 }
 
-export default DocItem;
+export default DocItem
diff --git a/docusaurus/src/theme/Layout/index.js b/docusaurus/src/theme/Layout/index.js
index 62c93c0..9e0b26c 100644
--- a/docusaurus/src/theme/Layout/index.js
+++ b/docusaurus/src/theme/Layout/index.js
@@ -5,28 +5,28 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import React from 'react';
-import Head from '@docusaurus/Head';
-import isInternalUrl from '@docusaurus/isInternalUrl';
-import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
-import useBaseUrl from '@docusaurus/useBaseUrl';
+import React from 'react'
+import Head from '@docusaurus/Head'
+import isInternalUrl from '@docusaurus/isInternalUrl'
+import useDocusaurusContext from '@docusaurus/useDocusaurusContext'
+import useBaseUrl from '@docusaurus/useBaseUrl'
 
-import ThemeProvider from '@theme/ThemeProvider';
-import TabGroupChoiceProvider from '@theme/TabGroupChoiceProvider';
-import AnnouncementBar from '@theme/AnnouncementBar';
-import Navbar from '@theme/Navbar';
-import Footer from '@theme/Footer';
+import ThemeProvider from '@theme/ThemeProvider'
+import TabGroupChoiceProvider from '@theme/TabGroupChoiceProvider'
+import AnnouncementBar from '@theme/AnnouncementBar'
+import Navbar from '@theme/Navbar'
+import Footer from '@theme/Footer'
 
-import './styles.css';
+import './styles.css'
 
 function Layout(props) {
-  const {siteConfig = {}} = useDocusaurusContext();
+  const { siteConfig = {} } = useDocusaurusContext()
   const {
     favicon,
     title: siteTitle,
-    themeConfig: {image: defaultImage},
+    themeConfig: { image: defaultImage },
     url: siteUrl,
-  } = siteConfig;
+  } = siteConfig
   const {
     children,
     title,
@@ -36,16 +36,16 @@ function Layout(props) {
     keywords,
     permalink,
     version,
-  } = props;
-  const metaTitle = title ? `${title} | ${siteTitle}` : siteTitle;
+  } = props
+  const metaTitle = title ? `${title} | ${siteTitle}` : siteTitle
 
-  const metaImage = image || defaultImage;
-  let metaImageUrl = siteUrl + useBaseUrl(metaImage);
+  const metaImage = image || defaultImage
+  let metaImageUrl = siteUrl + useBaseUrl(metaImage)
   if (!isInternalUrl(metaImage)) {
-    metaImageUrl = metaImage;
+    metaImageUrl = metaImage
   }
 
-  const faviconUrl = useBaseUrl(favicon);
+  const faviconUrl = useBaseUrl(favicon)
 
   return (
     <ThemeProvider>
@@ -83,7 +83,7 @@ function Layout(props) {
         {!noFooter && <Footer />}
       </TabGroupChoiceProvider>
     </ThemeProvider>
-  );
+  )
 }
 
-export default Layout;
+export default Layout