Skip to content

Commit 4fa8589

Browse files
vaadin-botjuuso-vaadinjounirolfsmedspeholmst
authored
Add styling properties to Avatar and Charts docs (#4285) (#4520)
* Add color properties to Avatar styling documentation * Update Charts Styling docs * Add style properties to Charts docs * Create styling * Additions to Charts docs * Additions to Charts docs * Update styling.adoc * Fix path * Update articles/components/avatar/styling.adoc * Update articles/components/charts/styling/styling.adoc --------- Co-authored-by: juuso-vaadin <juuso.kantonen@vaadin.com> Co-authored-by: Jouni Koivuviita <jouni@vaadin.com> Co-authored-by: Rolf Smeds <rolf@vaadin.com> Co-authored-by: Petter Holmström <petter@vaadin.com>
1 parent f8ee906 commit 4fa8589

File tree

4 files changed

+267
-3
lines changed

4 files changed

+267
-3
lines changed

‎articles/components/avatar/styling.adoc‎

Lines changed: 59 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,8 +7,66 @@ order: 50
77
---
88
= Styling
99

10-
include::../_styling-section-intros.adoc[tag=selectors]
10+
include::../_styling-section-theming-props.adoc[tag=style-properties]
11+
12+
=== Common Properties
13+
14+
[cols="1,2,2"]
15+
|===
16+
| Feature | Property | Default Value
17+
18+
|Avatar size
19+
|`--vaadin-avatar-size`
20+
|`var(--lumo-size-m)`
21+
22+
|Avatar Group overlap
23+
|`--vaadin-avatar-group-overlap`
24+
|`8px`
25+
26+
|Avatar Group overlap border
27+
|`--vaadin-avatar-group-overlap-border`
28+
|`2px`
29+
30+
|===
31+
32+
=== User Color Properties
33+
34+
[cols="1,2,2"]
35+
|===
36+
| Feature | Property | Default Value
37+
38+
|User color 0
39+
|`--vaadin-user-color-0`
40+
|`#df0b92`
1141

42+
|User color 1
43+
|`--vaadin-user-color-1`
44+
|`#650acc`
45+
46+
|User color 2
47+
|`--vaadin-user-color-2`
48+
|`#097faa`
49+
50+
|User color 3
51+
|`--vaadin-user-color-3`
52+
|`#ad6200`
53+
54+
|User color 4
55+
|`--vaadin-user-color-4`
56+
|`#bf16f3`
57+
58+
|User color 5
59+
|`--vaadin-user-color-5`
60+
|`#084391`
61+
62+
|User color 6
63+
|`--vaadin-user-color-6`
64+
|`#078836`
65+
66+
|===
67+
68+
69+
include::../_styling-section-intros.adoc[tag=selectors]
1270

1371
=== Avatar
1472

‎articles/components/charts/styling/charts_theme_variants.png‎

9.18 KB
Loading

articles/components/charts/css-styling.adoc renamed to articles/components/charts/styling/index.adoc

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,11 @@
11
---
2+
tab-title: CSS Styling
3+
layout: tabbed-page
24
title: Chart Styling
35
page-title: How to customize Vaadin charts with CSS
46
description: How to style a chart with CSS in your project.
57
meta-description: Learn how to style Vaadin Charts using CSS. Customize colors, fonts, and layouts to align with your application design.
6-
order: 6
8+
order: 5
79
---
810

911

@@ -24,7 +26,9 @@ The following theme variants are available for Charts:
2426
* Monotone variant with colors varying in brightness (`theme="monotone"` / `ChartVariant.LUMO_MONOTONE` / `MATERIAL_MONOTONE`)
2527
* Classic variant with colors matching those in older versions (`theme="classic"` / `ChartVariant.LUMO_CLASSIC` / `MATERIAL_CLASSIC`)
2628

27-
See a <<{articles}/components/charts#,demo of the variants>>.
29+
image::charts_theme_variants.png[]
30+
31+
See a <<{articles}/components/charts#,live demo of the variants>>.
2832

2933

3034
== Java Styling API in Flow

‎articles/components/charts/styling/styling.adoc‎

Lines changed: 202 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,202 @@
1+
---
2+
title: Style Properties
3+
page-title: Vaadin Charts style properties
4+
description: Styling API reference for the Vaadin Charts.
5+
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.
6+
order: 50
7+
---
8+
9+
10+
= Styling
11+
12+
include::../../_styling-section-theming-props.adoc[tag=style-properties]
13+
14+
=== Common Properties
15+
16+
[cols="1,2,2"]
17+
|===
18+
| Feature | Property | Default Value
19+
20+
|Background
21+
|`--vaadin-charts-background`
22+
|`--lumo-base-color`
23+
24+
|Axis line
25+
|`--vaadin-charts-axis-line`
26+
|`--lumo-contrast-5pct`
27+
28+
|Grid line
29+
|`--vaadin-charts-grid-line`
30+
|`--lumo-contrast-20pct`
31+
32+
|X-axis line width
33+
|`--vaadin-charts-xaxis-line-width`
34+
|`0`
35+
36+
|===
37+
38+
=== Data Series Colors
39+
40+
[cols="1,2,2"]
41+
|===
42+
| Feature | Property | Default Value
43+
44+
|Charts color 0
45+
|`--vaadin-charts-color-0`
46+
|`#5ac2f7`
47+
48+
|Charts color 1
49+
|`--vaadin-charts-color-1`
50+
|`#1676f3`
51+
52+
|Charts color 2
53+
|`--vaadin-charts-color-2`
54+
|`#ff7d94`
55+
56+
|Charts color 3
57+
|`--vaadin-charts-color-3`
58+
|`#c5164e`
59+
60+
|Charts color 4
61+
|`--vaadin-charts-color-4`
62+
|`#15c15d`
63+
64+
|Charts color 5
65+
|`--vaadin-charts-color-5`
66+
|`#0e8151`
67+
68+
|Charts color 6
69+
|`--vaadin-charts-color-6`
70+
|`#c18ed2`
71+
72+
|Charts color 7
73+
|`--vaadin-charts-color-7`
74+
|`#9233b3`
75+
76+
|Charts color 8
77+
|`--vaadin-charts-color-8`
78+
|`#fda253`
79+
80+
|Charts color 9
81+
|`--vaadin-charts-color-9`
82+
|`#e24932`
83+
84+
|Color for positive values
85+
|`--vaadin-charts-color-positive`
86+
|`--vaadin-charts-color-4`
87+
88+
|Color for negative values
89+
|`--vaadin-charts-color-negative`
90+
|`--vaadin-charts-color-9`
91+
92+
|===
93+
94+
=== Text Colors
95+
96+
[cols="1,2,2"]
97+
|===
98+
| Feature | Property | Default Value
99+
100+
|Chart title
101+
|`--vaadin-charts-title-label`
102+
|`--lumo-header-text-color`
103+
104+
|Axis title
105+
|`--vaadin-charts-axis-title`
106+
|`--lumo-secondary-text-color`
107+
108+
|Axis label
109+
|`--vaadin-charts-axis-label`
110+
|`--lumo-secondary-text-color`
111+
112+
|Data label
113+
|`--vaadin-charts-data-label`
114+
|`--lumo-body-text-color`
115+
116+
|Secondary label
117+
|`--vaadin-charts-secondary-label`
118+
|`--lumo-secondary-text-color`
119+
120+
|Disabled label
121+
|`--vaadin-charts-disabled-label`
122+
|`--lumo-disabled-text-color`
123+
124+
|===
125+
126+
=== Other Chart Colors
127+
128+
[cols="1,2,2"]
129+
|===
130+
| Feature | Property | Default Value
131+
132+
|Contrast
133+
|`--vaadin-charts-contrast`
134+
|`--lumo-contrast`
135+
136+
|Contrast 5%
137+
|`--vaadin-charts-contrast-5pct`
138+
|`--lumo-contrast-5pct`
139+
140+
|Contrast 10%
141+
|`--vaadin-charts-contrast-10pct`
142+
|`--lumo-contrast-10pct`
143+
144+
|Contrast 20%
145+
|`--vaadin-charts-contrast-20pct`
146+
|`--lumo-contrast-20pct`
147+
148+
|Contrast 60%
149+
|`--vaadin-charts-contrast-60pct`
150+
|`--lumo-contrast-60pct`
151+
152+
|===
153+
154+
=== Button
155+
Style properties for range selector buttons.
156+
157+
[cols="1,2,2"]
158+
|===
159+
| Feature | Property | Default Value
160+
161+
|Button label
162+
|`--vaadin-charts-button-label`
163+
|`--lumo-primary-text-color`
164+
165+
|Button background
166+
|`--vaadin-charts-button-background`
167+
|`--lumo-contrast-5pct`
168+
169+
|Button hover background
170+
|`--vaadin-charts-button-hover-background`
171+
|`--lumo-primary-color-10pct`
172+
173+
|Button active label
174+
|`--vaadin-charts-button-active-label`
175+
|`--lumo-primary-contrast-color`
176+
177+
|Button active background
178+
|`--vaadin-charts-button-active-background`
179+
|`--lumo-primary-color`
180+
181+
|===
182+
183+
=== Tooltips
184+
Tooltips within a chart.
185+
186+
[cols="1,2,2"]
187+
|===
188+
| Feature | Property | Default Value
189+
190+
|Tooltip background
191+
|`--vaadin-charts-tooltip-background`
192+
|`--lumo-base-color`
193+
194+
|Tooltip border
195+
|`--vaadin-charts-tooltip-border-color`
196+
|`inherit`
197+
198+
|Tooltip background opacity
199+
|`--vaadin-charts-tooltip-background-opacity`
200+
|`1`
201+
202+
|===

0 commit comments

Comments
 (0)