docs: move dialog style variant to styling page, add props (#4861)

Author: web-padawan

articles/components/dialog/index.adoc

@@ -118,36 +118,6 @@ endif::[]
 --
 
 
-=== Padding
-
-The content area's built-in padding can be removed by applying the `no-padding` theme variant.
-
-[.example]
---
-
-ifdef::lit[]
-[source,html]
-----
-include::{root}/frontend/demo/component/dialog/dialog-no-padding.ts[render,tags=*,indent=0,group=Lit]
-----
-endif::[]
-
-ifdef::flow[]
-[source,java]
-----
-include::{root}/src/main/java/com/vaadin/demo/component/dialog/DialogNoPadding.java[render,tags=snippet,indent=0,group=Flow]
-----
-endif::[]
-
-ifdef::react[]
-[source,tsx]
-----
-include::{root}/frontend/demo/component/dialog/react/dialog-no-padding.tsx[render,tags=snippet,indent=0,group=React]
-----
-endif::[]
---
-
-
 == Modality
 
 A modal dialog blocks the user from interacting with the rest of the user interface while the dialog is open. A non-modal dialog, however, doesn't block interaction. Dialogs are modal by default.
@@ -202,10 +172,10 @@ Dialog is not modal in server side by default. In some use cases you may want to
 
 [source,java]
 ----
-        Dialog dialog = new Dialog();
-        dialog.setModality(ModalityMode.STRICT);
-        // Dialog needs to be added to layout
-        add(dialog);
+Dialog dialog = new Dialog();
+dialog.setModality(ModalityMode.STRICT);
+// Dialog needs to be added to layout
+add(dialog);
 ----
 
 

articles/components/dialog/styling.adoc

@@ -9,6 +9,107 @@ order: 50
 = Dialog Styling
 :toclevels: 2
 
+
+== Style Variants
+
+The following variants are supported:
+
+[cols="1,3,1"]
+|===
+| Variant | Description | Supported by
+
+|`no-padding`
+|Used to remove the content area's built-in padding
+|Aura, Lumo
+
+|===
+
+[.example]
+--
+
+ifdef::lit[]
+[source,html]
+----
+include::{root}/frontend/demo/component/dialog/dialog-no-padding.ts[render,tags=*,indent=0,group=Lit]
+----
+endif::[]
+
+ifdef::flow[]
+[source,java]
+----
+include::{root}/src/main/java/com/vaadin/demo/component/dialog/DialogNoPadding.java[render,tags=snippet,indent=0,group=Flow]
+----
+endif::[]
+
+ifdef::react[]
+[source,tsx]
+----
+include::{root}/frontend/demo/component/dialog/react/dialog-no-padding.tsx[render,tags=snippet,indent=0,group=React]
+----
+endif::[]
+--
+
+include::../_styling-section-theming-props.adoc[tag=style-properties]
+
+[cols="1,3,1"]
+|===
+| Feature | Property | Supported by
+
+|Background
+|`--vaadin-dialog-background`
+|Aura
+
+|Backdrop background
+|`--vaadin-overlay-backdrop-background`
+|Aura
+
+|Border color
+|`--vaadin-dialog-border-color`
+|Aura
+
+|Border width
+|`--vaadin-dialog-border-width`
+|Aura
+
+|Border radius
+|`--vaadin-dialog-border-radius`
+|Aura
+
+|Box shadow
+|`--vaadin-dialog-shadow`
+|Aura
+
+|Max width
+|`--vaadin-dialog-max-width`
+|Aura
+
+|Min width
+|`--vaadin-dialog-min-width`
+|Aura
+
+|Padding
+|`--vaadin-dialog-padding`
+|Aura
+
+|Title color
+|`--vaadin-dialog-title-color`
+|Aura
+
+|Title font size
+|`--vaadin-dialog-title-font-size`
+|Aura
+
+|Title font weight
+|`--vaadin-dialog-title-font-weight`
+|Aura
+
+|Title line height
+|`--vaadin-dialog-title-font-weight`
+|Aura
+
+|===
+
+
 include::../_styling-section-intros.adoc[tag=selectors]