docs: RTE style variants and props

articles/components/rich-text-editor/index.adoc

@@ -279,70 +279,6 @@ include::{root}/frontend/demo/component/richtexteditor/react/rich-text-editor-mi
 endif::[]
 --
 
-== Theme Variants
-
-=== Compact
-
-Apply the `compact` theme to make the toolbar more compact.
-
-[.example]
---
-
-ifdef::lit[]
-[source,html]
-----
-include::{root}/frontend/demo/component/richtexteditor/rich-text-editor-theme-compact.ts[render,tags=snippet,indent=0,group=Lit]
-----
-endif::[]
-
-ifdef::flow[]
-[source,java]
-----
-include::{root}/src/main/java/com/vaadin/demo/component/richtexteditor/RichTextEditorThemeCompact.java[render,tags=snippet,indent=0,group=Flow]
-----
-endif::[]
-
-
-ifdef::react[]
-[source,tsx]
-----
-include::{root}/frontend/demo/component/richtexteditor/react/rich-text-editor-theme-compact.tsx[render,tags=snippet,indent=0,group=React]
-----
-endif::[]
---
-
-
-=== No Border
-
-Apply the `no-border` theme variant to remove Rich Text Editor’s border. An example of this is when the component is wrapped in a container with its own borders.
-
-[.example]
---
-
-ifdef::lit[]
-[source,html]
-----
-include::{root}/frontend/demo/component/richtexteditor/rich-text-editor-theme-no-border.ts[render,tags=snippet,indent=0,group=Lit]
-----
-endif::[]
-
-ifdef::flow[]
-[source,java]
-----
-include::{root}/src/main/java/com/vaadin/demo/component/richtexteditor/RichTextEditorThemeNoBorder.java[render,tags=snippet,indent=0,group=Flow]
-----
-endif::[]
-
-
-ifdef::react[]
-[source,tsx]
-----
-include::{root}/frontend/demo/component/richtexteditor/react/rich-text-editor-theme-no-border.tsx[render,tags=snippet,indent=0,group=React]
-----
-endif::[]
---
-
-
 == Toolbar Actions
 
 

articles/components/rich-text-editor/styling.adoc

@@ -7,6 +7,165 @@ order: 50
 ---
 = Rich Text Editor Styling
 
+== Style Variants
+
+The following variants are supported:
+
+[cols="1,3,1"]
+|===
+| Variant | Description | Supported by
+
+|`compact`
+| Makes the toolbar more compact
+| Lumo
+
+|`no-border`
+| Removes the border around the editor
+| Lumo
+
+|===
+
+=== Compact
+
+Apply the `compact` style variant to make the toolbar more compact.
+
+[.example]
+--
+
+ifdef::lit[]
+[source,html]
+----
+include::{root}/frontend/demo/component/richtexteditor/rich-text-editor-theme-compact.ts[render,tags=snippet,indent=0,group=Lit]
+----
+endif::[]
+
+ifdef::flow[]
+[source,java]
+----
+include::{root}/src/main/java/com/vaadin/demo/component/richtexteditor/RichTextEditorThemeCompact.java[render,tags=snippet,indent=0,group=Flow]
+----
+endif::[]
+
+
+ifdef::react[]
+[source,tsx]
+----
+include::{root}/frontend/demo/component/richtexteditor/react/rich-text-editor-theme-compact.tsx[render,tags=snippet,indent=0,group=React]
+----
+endif::[]
+--
+
+
+=== No Border
+
+Apply the `no-border` style variant to remove Rich Text Editor’s border. An example of this is when the component is wrapped in a container with its own borders.
+
+[.example]
+--
+
+ifdef::lit[]
+[source,html]
+----
+include::{root}/frontend/demo/component/richtexteditor/rich-text-editor-theme-no-border.ts[render,tags=snippet,indent=0,group=Lit]
+----
+endif::[]
+
+ifdef::flow[]
+[source,java]
+----
+include::{root}/src/main/java/com/vaadin/demo/component/richtexteditor/RichTextEditorThemeNoBorder.java[render,tags=snippet,indent=0,group=Flow]
+----
+endif::[]
+
+
+ifdef::react[]
+[source,tsx]
+----
+include::{root}/frontend/demo/component/richtexteditor/react/rich-text-editor-theme-no-border.tsx[render,tags=snippet,indent=0,group=React]
+----
+endif::[]
+--
+
+include::../_styling-section-theming-props.adoc[tag=style-properties]
+
+=== Common Properties
+
+[cols="3,1"]
+|===
+| Property | Supported by
+
+| `--vaadin-rich-text-editor-background`
+| Aura, Lumo
+
+| `--vaadin-rich-text-editor-content-color`
+| Aura, Lumo
+
+| `--vaadin-rich-text-editor-content-font-size`
+| Aura, Lumo
+
+| `--vaadin-rich-text-editor-content-line-height`
+| Aura, Lumo
+
+| `--vaadin-rich-text-editor-content-padding`
+| Aura, Lumo
+
+| `--vaadin-rich-text-editor-toolbar-background`
+| Aura, Lumo
+
+| `--vaadin-rich-text-editor-toolbar-gap`
+| Aura, Lumo
+
+| `--vaadin-rich-text-editor-toolbar-padding`
+| Aura, Lumo
+
+| `--vaadin-rich-text-editor-toolbar-button-background`
+| Aura, Lumo
+
+| `--vaadin-rich-text-editor-toolbar-button-border-color`
+| Aura, Lumo
+
+| `--vaadin-rich-text-editor-toolbar-button-border-radius`
+| Aura, Lumo
+
+| `--vaadin-rich-text-editor-toolbar-button-border-width`
+| Aura, Lumo
+
+| `--vaadin-rich-text-editor-toolbar-button-padding`
+| Aura, Lumo
+
+| `--vaadin-rich-text-editor-toolbar-button-text-color`
+| Aura, Lumo
+
+|===
+
+=== Overlay Properties
+
+[cols="3,1"]
+|===
+| CSS Property | Supported by
+
+| `--vaadin-rich-text-editor-overlay-gap`
+| Aura
+
+| `--vaadin-rich-text-editor-overlay-padding`
+| Aura
+
+| `--vaadin-rich-text-editor-overlay-color-option-border-color`
+| Aura
+
+| `--vaadin-rich-text-editor-overlay-color-option-border-radius`
+| Aura
+
+| `--vaadin-rich-text-editor-overlay-color-option-border-width`
+| Aura
+
+| `--vaadin-rich-text-editor-overlay-color-option-height`
+| Aura
+
+| `--vaadin-rich-text-editor-overlay-color-option-width`
+| Aura
+|===
+
 include::../_styling-section-intros.adoc[tag=selectors]