feature(docs): added CLI docs page + updated button and input theming docs

Author: nikolovlazar

configs/styled-system.sidebar.json

@@ -36,6 +36,10 @@
               "title": "Chakra Factory",
               "path": "/docs/styled-system/chakra-factory"
             },
+            {
+              "title": "CLI",
+              "path": "/docs/styled-system/cli"
+            },
             {
               "title": "Global Styles",
               "path": "/docs/styled-system/global-styles"
@@ -54,7 +58,6 @@
             }
           ]
         },
-
         {
           "title": "Theming",
           "path": "/docs/theming",
@@ -81,4 +84,4 @@
       ]
     }
   ]
-}
+}

content/docs/components/button/theming.mdx

@@ -82,16 +82,9 @@ export const buttonTheme = defineStyleConfig({
 <Button size="xl">...</Button>
 ```
 
-Every time you're adding anything new to the theme, you'd need to run the cli
-command to get proper autocomplete in your IDE. Here's how you can do that:
-
-```bash
-# run it once:
-npx chakra-cli tokens path/to/theme.ts
-
-# or run it in watch mode:
-npx chakra-cli tokens path/to/theme.ts --watch
-```
+Every time you're adding anything new to the theme, you'd need to run the CLI
+command to get proper autocomplete in your IDE. You can learn more about the CLI
+tool [here](/docs/styled-system/cli).
 
 ## Adding a custom variant
 

content/docs/components/input/theming.mdx

@@ -278,16 +278,9 @@ export const inputTheme = defineMultiStyleConfig({ sizes })
 <Input size="xl" ... />
 ```
 
-Every time you're adding anything new to the theme, you'd need to run the cli
-command to get proper autocomplete in your IDE. Here's how you can do that:
-
-```bash
-# run it once:
-npx chakra-cli tokens path/to/theme.ts
-
-# or run it in watch mode:
-npx chakra-cli tokens path/to/theme.ts --watch
-```
+Every time you're adding anything new to the theme, you'd need to run the CLI
+command to get proper autocomplete in your IDE. You can learn more about the CLI
+tool [here](/docs/styled-system/cli).
 
 ## Adding a custom variant
 

content/docs/styled-system/cli.mdx

@@ -0,0 +1,77 @@
+---
+title: 'CLI'
+package: '@chakra-ui/cli'
+description: Using the CLI command to generate theme typings
+category: 'features'
+---
+
+Chakra UI also comes with a CLI tool that you can use to generate typings for
+your custom theme tokens, like colors, semantic tokens, etc... The CLI scans
+your theme configuration and generates typings for your custom tokens in the
+`node_modules/@chakra-ui/styled-system/dist/theming.types.d.ts` file.
+
+> **Troubleshoot:** If the theme typings don't show up immediately, try
+> restarting your TypeScript server
+> (`Cmd + Shift + P > "TypeScript: Restart TS server"` if you're using VSCode).
+
+## Installation
+
+In order to use the CLI, you need to install it as a dev dependency in your
+project:
+
+```bash
+npm install --save-dev @chakra-ui/cli
+#or
+yarn add --dev @chakra-ui/cli
+```
+
+To make it more convenient, it's also a good idea to create an npm script that
+triggers it:
+
+```json
+// package.json
+{
+  ...
+  "scripts": {
+    ...
+    "theme": "chakra-cli tokens path/to/theme.ts",
+    "theme:watch": "chakra-cli tokens path/to/theme.ts --watch",
+  },
+  ...
+}
+```
+
+Don't forget to replace `path/to/theme.ts` with your theme file location.
+
+## Usage
+
+To generate typings for your theme, run the `theme` script:
+
+```bash
+npm run theme
+# or
+yarn theme
+```
+
+If you'd like to continuously generate theme typings as you're editing your
+theme, run the `theme:watch` script:
+
+```bash
+npm run theme:watch
+# or
+yarn theme:watch
+```
+
+A successfull execution should output something like this:
+
+```sh
+$ chakra-cli tokens src/theme/index.ts
+
+Chakra UI CLI v2.1.8 by Chakra UI
+Generate theme typings for autocomplete
+
+
+ℹ Generating chakra theme typings
+✔ Done
+✨  Done in 0.83s.
+```