Add styling properties to Avatar and Charts docs

articles/components/avatar/styling.adoc

@@ -7,8 +7,66 @@ order: 50
 ---
 = Styling
 
-include::../_styling-section-intros.adoc[tag=selectors]
+include::../_styling-section-theming-props.adoc[tag=style-properties]
+
+=== Common Properties
+
+[cols="1,2,2"]
+|===
+| Feature | Property | Default Value
+
+|Avatar size
+|`--vaadin-avatar-size`
+|`var(--lumo-size-m)`
+
+|Avatar Group overlap
+|`--vaadin-avatar-group-overlap`
+|`8px`
+
+|Avatar Group overlap border
+|`--vaadin-avatar-group-overlap-border`
+|`2px`
+
+|===
+
+=== Color Properties
+
+[cols="1,2,2"]
+|===
+| Feature | Property | Default Value
+
+|User color 0
+|`--vaadin-user-color-0`
+|`#df0b92`
 
+|User color 1
+|`--vaadin-user-color-1`
+|`#650acc`
+
+|User color 2
+|`--vaadin-user-color-2`
+|`#097faa`
+
+|User color 3
+|`--vaadin-user-color-3`
+|`#ad6200`
+
+|User color 4
+|`--vaadin-user-color-4`
+|`#bf16f3`
+
+|User color 5
+|`--vaadin-user-color-5`
+|`#084391`
+
+|User color 6
+|`--vaadin-user-color-6`
+|`#078836`
+
+|===
+
+
+include::../_styling-section-intros.adoc[tag=selectors]
 
 === Avatar
 

articles/components/charts/css-styling.adoc → articles/components/charts/styling/index.adoc

@@ -1,9 +1,11 @@
 ---
+tab-title: CSS Styling
+layout: tabbed-page
 title: Chart Styling
 page-title: How to customize Vaadin charts with CSS
 description: How to style a chart with CSS in your project.
 meta-description: Learn how to style Vaadin Charts using CSS. Customize colors, fonts, and layouts to align with your application design.
-order: 6
+order: 5
 ---
 
 
@@ -24,7 +26,9 @@ The following theme variants are available for Charts:
 * Monotone variant with colors varying in brightness (`theme="monotone"` / `ChartVariant.LUMO_MONOTONE` / `MATERIAL_MONOTONE`)
 * Classic variant with colors matching those in older versions (`theme="classic"` / `ChartVariant.LUMO_CLASSIC` / `MATERIAL_CLASSIC`)
 
-See a <<{articles}/components/charts#,demo of the variants>>.
+image::charts_theme_variants.png[]
+
+See a <<{articles}/components/charts#,live demo of the variants>>.
 
 
 == Java Styling API in Flow

articles/components/charts/styling/styling.adoc

@@ -0,0 +1,202 @@
+---
+title: Style Properties
+page-title: Vaadin Charts style properties
+description: Styling API reference for the Vaadin Charts.
+meta-description: Learn how to style Vaadin Charts with custom themes and CSS. Discover tips and examples to create visually appealing and functional data visualizations.
+order: 50
+---
+
+
+= Styling
+
+include::../../_styling-section-theming-props.adoc[tag=style-properties]
+
+=== Common Properties
+
+[cols="1,2,2"]
+|===
+| Feature | Property | Default Value
+
+|Background
+|`--vaadin-charts-background`
+|`--lumo-base-color`
+
+|Axis line
+|`--vaadin-charts-axis-line`
+|`--lumo-contrast-5pct`
+
+|Grid line
+|`--vaadin-charts-grid-line`
+|`--lumo-contrast-20pct`
+
+|X-axis line width
+|`--vaadin-charts-xaxis-line-width`
+|`0`
+
+|===
+
+=== Data Series Colors
+
+[cols="1,2,2"]
+|===
+| Feature | Property | Default Value
+
+|Charts color 0
+|`--vaadin-charts-color-0`
+|`#5ac2f7`
+
+|Charts color 1
+|`--vaadin-charts-color-1`
+|`#1676f3`
+
+|Charts color 2
+|`--vaadin-charts-color-2`
+|`#ff7d94`
+
+|Charts color 3
+|`--vaadin-charts-color-3`
+|`#c5164e`
+
+|Charts color 4
+|`--vaadin-charts-color-4`
+|`#15c15d`
+
+|Charts color 5
+|`--vaadin-charts-color-5`
+|`#0e8151`
+
+|Charts color 6
+|`--vaadin-charts-color-6`
+|`#c18ed2`
+
+|Charts color 7
+|`--vaadin-charts-color-7`
+|`#9233b3`
+
+|Charts color 8
+|`--vaadin-charts-color-8`
+|`#fda253`
+
+|Charts color 9
+|`--vaadin-charts-color-9`
+|`#e24932`
+
+|Color for positive values
+|`--vaadin-charts-color-positive`
+|`--vaadin-charts-color-4`
+
+|Color for negative values
+|`--vaadin-charts-color-negative`
+|`--vaadin-charts-color-9`
+
+|===
+
+=== Text Colors
+
+[cols="1,2,2"]
+|===
+| Feature | Property | Default Value
+
+|Chart title
+|`--vaadin-charts-title-label`
+|`--lumo-header-text-color`
+
+|Axis title
+|`--vaadin-charts-axis-title`
+|`--lumo-secondary-text-color`
+
+|Axis label
+|`--vaadin-charts-axis-label`
+|`--lumo-secondary-text-color`
+
+|Data label
+|`--vaadin-charts-data-label`
+|`--lumo-body-text-color`
+
+|Secondary label
+|`--vaadin-charts-secondary-label`
+|`--lumo-secondary-text-color`
+
+|Disabled label
+|`--vaadin-charts-disabled-label`
+|`--lumo-disabled-text-color`
+
+|===
+
+=== Contrasts
+
+[cols="1,2,2"]
+|===
+| Feature | Property | Default Value
+
+|Contrast
+|`--vaadin-charts-contrast`
+|`--lumo-contrast`
+
+|Contrast 5%
+|`--vaadin-charts-contrast-5pct`
+|`--lumo-contrast-5pct`
+
+|Contrast 10%
+|`--vaadin-charts-contrast-10pct`
+|`--lumo-contrast-10pct`
+
+|Contrast 20%
+|`--vaadin-charts-contrast-20pct`
+|`--lumo-contrast-20pct`
+
+|Contrast 60%
+|`--vaadin-charts-contrast-60pct`
+|`--lumo-contrast-60pct`
+
+|===
+
+=== Button
+Style properties for range selector buttons.
+
+[cols="1,2,2"]
+|===
+| Feature | Property | Default Value
+
+|Button label
+|`--vaadin-charts-button-label`
+|`--lumo-primary-text-color`
+
+|Button background
+|`--vaadin-charts-button-background`
+|`--lumo-contrast-5pct`
+
+|Button hover background
+|`--vaadin-charts-button-hover-background`
+|`--lumo-primary-color-10pct`
+
+|Button active label
+|`--vaadin-charts-button-active-label`
+|`--lumo-primary-contrast-color`
+
+|Button active background
+|`--vaadin-charts-button-active-background`
+|`--lumo-primary-color`
+
+|===
+
+=== Tooltips
+Tooltips within a chart.
+
+[cols="1,2,2"]
+|===
+| Feature | Property | Default Value
+
+|Tooltip background
+|`--vaadin-charts-tooltip-background`
+|`--lumo-base-color`
+
+|Tooltip border
+|`--vaadin-charts-tooltip-border-color`
+|`inherit`
+
+|Tooltip background opacity
+|`--vaadin-charts-tooltip-background-opacity`
+|`1`
+
+|===