docs: Grid Pro Aura style variants and props

articles/components/grid-pro/index.adoc

@@ -20,7 +20,7 @@ include::{articles}/_commercial-banner.adoc[opts=optional]
 Grid Pro is an extension of the Grid component that provides inline editing with full keyboard navigation.
 // end::description[]
 
-[.example]
+[.example,themes="lumo,aura"]
 --
 
 ifdef::lit[]
@@ -285,89 +285,6 @@ endif::[]
 --
 
 
-== Distinguish Editable from Read-Only
-
-Editable cells are indicated with a hover effect, by default. You can also distinguish them by highlighting either editable or read-only cells. This is good for grids containing both types of cells.
-
-
-=== Highlight Editable
-
-Editable cells can be highlighted by applying the `highlight-editable-cells` theme variant.
-
-[.example]
---
-ifdef::lit[]
-[source,typescript]
-----
-include::{root}/frontend/demo/component/gridpro/grid-pro-highlight-editable-cells.ts[render,tags=snippet,indent=0,group=Lit]
-----
-endif::[]
-
-ifdef::flow[]
-[source,java]
-----
-include::{root}/src/main/java/com/vaadin/demo/component/gridpro/GridProThemeHighlightEditableCells.java[render,tags=snippet,indent=0,group=Flow]
-----
-endif::[]
-
-ifdef::react[]
-[source,tsx]
-----
-include::{root}/frontend/demo/component/gridpro/react/grid-pro-highlight-editable-cells.tsx[render,tags=snippet,indent=0,group=React]
-----
-endif::[]
---
-
-You can also apply custom styling to editable cells by targeting the `editable-cell` part in CSS. The following example shows how to apply custom styling to all Grid Pro elements that have the `editable-custom-effect` class name:
-
-[.example]
---
-[source,css]
-----
-/* Add this to your global CSS, for example in: */
-/* frontend/theme/[my-theme]/styles.css */
-
-vaadin-grid-pro.editable-custom-effect::part(editable-cell):hover,
-vaadin-grid-pro.editable-custom-effect::part(editable-cell focused-cell) {
-  background: var(--lumo-contrast-10pct);
-}
-
-vaadin-grid-pro.editable-custom-effect::part(editable-cell) {
-  background: var(--lumo-contrast-5pct);
-}
-----
---
-
-
-=== Highlight Read-Only
-
-Read-only cells can be highlighted by applying the `highlight-read-only-cells` theme variant.
-
-[.example]
---
-ifdef::lit[]
-[source,typescript]
-----
-include::{root}/frontend/demo/component/gridpro/grid-pro-highlight-read-only-cells.ts[render,tags=snippet,indent=0,group=Lit]
-----
-endif::[]
-
-ifdef::flow[]
-[source,java]
-----
-include::{root}/src/main/java/com/vaadin/demo/component/gridpro/GridProThemeHighlightReadOnlyCells.java[render,tags=snippet,indent=0,group=Flow]
-----
-endif::[]
-
-ifdef::react[]
-[source,tsx]
-----
-include::{root}/frontend/demo/component/gridpro/react/grid-pro-highlight-read-only-cells.tsx[render,tags=snippet,indent=0,group=React]
-----
-endif::[]
---
-
-
 == Best Practices
 
 === Inline vs. Non-Inline Editing

articles/components/grid-pro/styling.adoc

@@ -7,6 +7,117 @@ order: 50
 ---
 = Grid Pro Styling
 
+== Style Variants
+
+Grid Pro supports the following style variants:
+
+[cols="1,3,1"]
+|===
+| Variant | Description | Supported by
+
+|`highlight-editable-cells`
+|Highlights editable cells with a background color
+|Aura, Lumo
+
+|`highlight-read-only-cells`
+|Highlights read-only cells with a background color
+|Aura, Lumo
+
+|===
+
+In addition, Grid Pro also supports all <<../grid/styling#style-variants,Grid Style Variants>>.
+
+=== Highlight Editable
+
+Editable cells are indicated with a hover effect, by default. They can be highlighted by applying the `highlight-editable-cells` style variant.
+
+[.example]
+--
+ifdef::lit[]
+[source,typescript]
+----
+include::{root}/frontend/demo/component/gridpro/grid-pro-highlight-editable-cells.ts[render,tags=snippet,indent=0,group=Lit]
+----
+endif::[]
+
+ifdef::flow[]
+[source,java]
+----
+include::{root}/src/main/java/com/vaadin/demo/component/gridpro/GridProThemeHighlightEditableCells.java[render,tags=snippet,indent=0,group=Flow]
+----
+endif::[]
+
+ifdef::react[]
+[source,tsx]
+----
+include::{root}/frontend/demo/component/gridpro/react/grid-pro-highlight-editable-cells.tsx[render,tags=snippet,indent=0,group=React]
+----
+endif::[]
+--
+
+You can also apply custom styling to editable cells by targeting the `editable-cell` part in CSS. The following example shows how to apply custom styling to all Grid Pro elements that have the `editable-custom-effect` class name:
+
+[.example]
+--
+[source,css]
+----
+/* Add this to your global CSS, for example in: */
+/* frontend/theme/[my-theme]/styles.css */
+
+vaadin-grid-pro.editable-custom-effect::part(editable-cell):hover,
+vaadin-grid-pro.editable-custom-effect::part(editable-cell focused-cell) {
+  background: var(--lumo-contrast-10pct);
+}
+
+vaadin-grid-pro.editable-custom-effect::part(editable-cell) {
+  background: var(--lumo-contrast-5pct);
+}
+----
+--
+
+
+=== Highlight Read-Only
+
+Read-only cells can be highlighted by applying the `highlight-read-only-cells` style variant.
+
+[.example]
+--
+ifdef::lit[]
+[source,typescript]
+----
+include::{root}/frontend/demo/component/gridpro/grid-pro-highlight-read-only-cells.ts[render,tags=snippet,indent=0,group=Lit]
+----
+endif::[]
+
+ifdef::flow[]
+[source,java]
+----
+include::{root}/src/main/java/com/vaadin/demo/component/gridpro/GridProThemeHighlightReadOnlyCells.java[render,tags=snippet,indent=0,group=Flow]
+----
+endif::[]
+
+ifdef::react[]
+[source,tsx]
+----
+include::{root}/frontend/demo/component/gridpro/react/grid-pro-highlight-read-only-cells.tsx[render,tags=snippet,indent=0,group=React]
+----
+endif::[]
+--
+
+include::../_styling-section-theming-props.adoc[tag=style-properties]
+
+[cols="3,1"]
+|===
+| Property | Supported by
+
+|`--vaadin-grid-pro-editable-cell-background-color`
+|Aura
+
+|===
+
+In addition, Grid Pro also supports all <<../grid/styling#style-properties,Grid Style Properties>>.
+
+
 include::../_styling-section-intros.adoc[tag=selectors]