Add new styling configurations (#257)

* Add new styling configurations

* Adjust description for sidebar

Author: handotdev

settings/global.mdx

@@ -16,7 +16,7 @@ settings. Learn more about the [properties](#properties) or from an
   Name of your company or project. Used for the global title.
 </ResponseField>
 
-<ResponseField name="logo" type="string or object">
+<ResponseField name="logo" type="string or Logo">
   Path to logo image or object with path to "light" and "dark" mode logo images,
   and where the logo links to. SVG format is recommended. It does not pixelate
   and the file size is generally smaller.
@@ -66,15 +66,29 @@ settings. Learn more about the [properties](#properties) or from an
 </ResponseField>
 
 <ResponseField name="theme" type={'"venus" | "quill" | "prism"'}>
-  A preset theme configuration that changes the layout of your docs. Examples:
+  A preset theme configuration that changes the look and feel of the project. A theme is a set of default styling configurations.
+  
+  Examples:
   [Venus](https://starter-venus.mintlify.app),
   [Quill](https://starter-quill.mintlify.app),
   [Prism](https://starter-prism.mintlify.app)
 </ResponseField>
 
+<ResponseField name="layout" type={'"topnav" | "sidenav" | "solidSidenav"'} default="topnav">
+  The global layout style of the documentation.
+</ResponseField>
+
+<ResponseField name="background" type="Background">
+  Set a decorative background.
+  <Expandable title="Background">
+    <ResponseField name="styling" type={'"gradient" | "grid" | "windows"'}>
+      The style of the decorative background.
+    </ResponseField>
+  </Expandable>
+</ResponseField>
+
 <ResponseField name="backgroundImage" type="string">
-  A background image to be displayed behind every page. See example with
-  [Infisical](https://infisical.com/docs) and [FRPC](https://frpc.io).
+  Set a custom background image to be displayed behind every page.
 </ResponseField>
 
 <ResponseField name="modeToggle" type="ModeToggle">
@@ -88,26 +102,52 @@ settings. Learn more about the [properties](#properties) or from an
       Set to true to hide the dark/light mode toggle. You can combine `isHidden` with `default` to force your docs to only use light or dark mode. For example:
 
       <CodeGroup>
-      ```json Only Dark Mode
-      "modeToggle": {
-        "default": "dark",
-        "isHidden": true
-      }
-      ```
-
-      ```json Only Light Mode
-      "modeToggle": {
-        "default": "light",
-        "isHidden": true
-      }
-      ```
+
+```json Only Dark Mode
+"modeToggle": {
+  "default": "dark",
+  "isHidden": true
+}
+```
+
+```json Only Light Mode
+"modeToggle": {
+  "default": "light",
+  "isHidden": true
+}
+```
+
       </CodeGroup>
+    </ResponseField>
+  </Expandable>
+</ResponseField>
 
+<ResponseField name="sidebar" type="Sidebar">
+  Customize the styling of components within the sidebar.
+  <Expandable title="Sidebar">
+    <ResponseField name="items" type={'"container" | "card" | "border" | "undecorated"'} default="container">
+      The styling of the navigation item.
     </ResponseField>
+  </Expandable>
+</ResponseField>
 
+<ResponseField name="topbar" type="Topbar">
+  Styling configurations for the topbar.
+  <Expandable title="Topbar">
+    <ResponseField name="styling" type={'"default" | "gradient"'} default="default">
+      The styling of the navigation item.
+    </ResponseField>
   </Expandable>
 </ResponseField>
 
+<ResponseField name="search" type={'"side" | "top"'}>
+  The location of the search bar entry.
+</ResponseField>
+
+<ResponseField name="rounded" type={'"default" | "sharp"'}>
+  The style of the rounded edges.
+</ResponseField>
+
 ### Structure
 
 <ResponseField name="navigation" type="Navigation[]" required>
@@ -159,7 +199,12 @@ settings. Learn more about the [properties](#properties) or from an
     <ResponseField name="name" type="string">
       Text inside the button. Only required if type is a link.
     </ResponseField>
-
+    <ResponseField name="style" type={'"pill" | "roundedRectangle"'}>
+      The style of the button.
+    </ResponseField>
+    <ResponseField name="arrow" type="boolean">
+      Whether to display the arrow
+    </ResponseField>
   </Expandable>
 </ResponseField>
 
@@ -202,10 +247,10 @@ settings. Learn more about the [properties](#properties) or from an
   </Expandable>
 </ResponseField>
 
-<ResponseField name="topAnchor" type="Object">
+<ResponseField name="topAnchor" type="Anchor">
   Override the default configurations for the top-most anchor. Note: if you have
   tabs configured, this does not apply.
-  <Expandable title="Object">
+  <Expandable title="Anchor">
     <ResponseField name="name" default="Documentation" type="string">
       The name of the top-most anchor
     </ResponseField>
@@ -254,12 +299,12 @@ Example:
   An object of social media accounts where the key:property pair represents the social media platform and the account url.
 
   Example: 
-  ```json
-  {
-    "x": "https://x.com/mintlify",
-    "website": "https://mintlify.com"
-  }
-  ```
+```json
+{
+  "x": "https://x.com/mintlify",
+  "website": "https://mintlify.com"
+}
+```
   <Expandable title="FooterSocials">
     <ResponseField name="[key]" type="string">
     One of the following values `website`, `facebook`, `x`, `youtube`, `discord`, `slack`, `github`, `linkedin`, `instagram`, `hacker-news`
@@ -378,15 +423,15 @@ Example:
 
   Examples:
   <CodeGroup>
-    ```json Absolute
-    "openapi": "https://example.com/openapi.json"
-    ```
-    ```json Relative
-    "openapi": "/openapi.json"
-    ```
-    ```json Multiple
-    "openapi": ["https://example.com/openapi1.json", "/openapi2.json", "/openapi3.json"]
-    ```
+```json Absolute
+"openapi": "https://example.com/openapi.json"
+```
+```json Relative
+"openapi": "/openapi.json"
+```
+```json Multiple
+"openapi": ["https://example.com/openapi1.json", "/openapi2.json", "/openapi3.json"]
+```
   </CodeGroup>
 
 </ResponseField>