feat(docs): upgrade docs

Author: MichaelGitArt

Diff for: docs/src/docs/components/g-dialog.md

@@ -10,16 +10,116 @@ z-index of the component is 200. So be careful. Don't make z-index of the header
 
 ## Props
 
-| Name | Type | Default | Description |
-|:---|:---|:---|:---|
-| content-class | `string` | `''` | Applies to the div that wraps the main slot |
-| depressed | `boolean` | `false` | Disables default box-shadow |
-| height | `string`, `number` | `'auto'` | Sets height for the dialog |
-| max-width | `string,` `number` | `'none'` | Sets max-width for the dialog |
-| model-value | `boolean` | `false` | v-model props to activate and deactivate the dialog |
-| persistent | `boolean` | `false` | Makes clicking outside of the element will not deactivate the dialog |
-| scrollable | `boolean` | `false` |  |
-| width | `string,` `number` | `'auto'` | Sets width for the dialog |
+| Name | Type | Default |
+|:---|:---|:---|
+| [background](#background) | `boolean` `string` | `true` |
+| [border-radius](#border-radius) | `boolean` `number` `string` | `true` |
+| [content-class](#content-class) | `string` | `''` |
+| [depressed](#depressed) | `boolean` | `false` |
+| [height](#height) |  `string` `number` | `'auto'` |
+| [max-width](#max-width) | `string` `number` | `'none'` |
+| [model-value](#model-value) | `boolean` | `false` |
+| [persistent](#persistent) | `boolean` | `false` |
+| [scrollable](#scrollable) | `boolean` | `false` |
+| [width](#width) | `string` `number` | `'auto'` |
+
+
+### `background`
+- **Type:** `Boolean | String`
+
+- **Default:** `true`
+
+- **Details:** <br/>
+  Sets background to the dialog content
+
+---
+
+### `border-radius`
+- **Type:** `Boolean | Number | String`
+
+- **Default:** `true`
+
+- **Details:** <br/>
+  Sets border-radius to the dialog content
+
+---
+
+### `content-class`
+- **Type:** `String`
+
+- **Details:** <br/>
+Applies the class to the content (div that wraps the main slot)
+
+---
+
+
+### `depressed`
+- **Type:** `Boolean`
+
+- **Default:** `false`
+
+- **Details:** <br/>
+Disables default box-shadow
+
+---
+
+### `height`
+- **Type:** `String | Number`
+
+- **Default:** `'auto'`
+
+- **Details:** <br/>
+Sets height for the dialog
+
+---
+
+### `max-width`
+- **Type:** `String | Number`
+
+- **Default:** `'none'`
+
+- **Details:** <br/>
+Sets max-width for the dialog
+
+---
+
+### `model-value`
+- **Type:** `Boolean`
+
+- **Default:** `false`
+
+- **Details:** <br/>
+v-model props to activate and deactivate the dialog
+
+---
+
+### `persistent`
+- **Type:** `Boolean`
+
+- **Default:** `false`
+
+- **Details:** <br/>
+Makes clicking outside of the element will not deactivate the dialog
+
+---
+
+### `scrollable`
+- **Type:** `Boolean`
+
+- **Default:** `false`
+
+<!-- - **Details:** <br/> -->
+
+---
+### `width`
+- **Type:** `String | Number`
+
+- **Default:** `'auto'`
+
+- **Details:** <br/>
+Sets width for the dialog
+
+---
 
 ## Slots
 
@@ -32,4 +132,49 @@ z-index of the component is 200. So be careful. Don't make z-index of the header
 
 | Name | Payload | Description |
 |:---|:---|:---|
-| `update:modelValue` | `boolean` | runs with `false` after clicking outside
+| `update:modelValue` | `boolean` | runs with `false` after clicking outside
+
+## CSS Vars Customization
+
+To change some styling (background, border-radius) for single dialog, you can pass props.
+Or use CSS variables to do it globally. Put the vars into your global css file or into App.vue `<style>`
+
+```css
+:root {
+  --g-dialog-content-bg: #eff1f3;
+  --g-dialog-content-border-radius: 8px;
+}
+```
+
+**List of possible variables:**
+
+### content-bg
+- **Name:** `--g-dialog-content-bg`
+
+- **Default:** `#fff`
+
+- **Details:** <br/>
+  Sets default `background` for the dialog content
+
+- **Usage:**
+
+  ```css
+  --g-dialog-content-bg: #282c34;
+  ```
+
+---
+
+### content-border-radius
+- **Name:** `--g-dialog-border-radius`
+
+- **Default:** `4px`
+
+- **Details:**<br/>
+  Sets default `border-radius` for the dialog content
+
+- **Usage:**
+
+  ```css
+  --g-dialog-border-radius: 0;
+  ```
+---

Diff for: docs/src/docs/guide/plugin-usage.md

@@ -104,8 +104,7 @@ export default {
   To close the dialog (DialogComponent.vue) you need inside emit the event `update:modelValue` with `false` inside. Take a look at the [example](#example) below
   :::
 
-
-
+---
 
 ### `removeDialog(index)` 
 
@@ -117,6 +116,8 @@ export default {
 - **Details:** <br/>
   The method removes item from [dialogs](#dialogs) by index. Useful if you decide to write your own [GDialogRoot](/docs/components/g-dialog-root)
 
+---
+
 ### `dialogs` 
 - **Type:** `Array`
 
@@ -134,6 +135,8 @@ export default {
   }
   ```
 
+---
+
 ## Example
 
 First create your Dialog component that will be launched from method. Name it InfoDialog.vue