diff --git a/articles/components/avatar/styling.adoc b/articles/components/avatar/styling.adoc index d124e31211..18078da08e 100644 --- a/articles/components/avatar/styling.adoc +++ b/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 diff --git a/articles/components/charts/styling/charts_theme_variants.png b/articles/components/charts/styling/charts_theme_variants.png new file mode 100644 index 0000000000..fbaf090cf0 Binary files /dev/null and b/articles/components/charts/styling/charts_theme_variants.png differ diff --git a/articles/components/charts/css-styling.adoc b/articles/components/charts/styling/index.adoc similarity index 96% rename from articles/components/charts/css-styling.adoc rename to articles/components/charts/styling/index.adoc index c4885f67a1..0e6d1601c4 100644 --- a/articles/components/charts/css-styling.adoc +++ b/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 diff --git a/articles/components/charts/styling/styling.adoc b/articles/components/charts/styling/styling.adoc new file mode 100644 index 0000000000..bcfd34d438 --- /dev/null +++ b/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` + +|===