docs: correct and reformat the chart style property tables

The tables listed eight properties no rule reads any more, omitted
eleven that exist, and gave --lumo-* variables as default values in a
release whose default theme is Aura. They were also the last tables
under articles/components/ still using the Default Value column that
every other styling page dropped for Supported by.

Switch to the standard format, which removes the stale defaults along
with the need to maintain any of them, and correct the membership. The
per-theme differences move into prose above the tables, where they don't
have to be repeated per row.

Keep the vaadin-chart {...} selector and say why it isn't html {...}:
Lumo declares most of these properties on the chart element, so a value
inherited from html never applies. Verified in the browser against Aura,
Lumo and no theme, along with every property listed and every one
removed.

Part of vaadin/web-components#12700.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>

Author: DiegoCardoso

articles/components/charts/styling/styling.adoc

@@ -12,7 +12,9 @@ order: 50
 == Style Properties
 The following style properties can be used in CSS stylesheets to customize the appearance of this component.
 
-To apply values to these properties globally in your application UI, place them in a CSS block using the `vaadin-chart {...}` selector.
+Apply them in a CSS block using the `vaadin-chart {...}` selector, or a CSS class name on the chart.
+Unlike other components, they can't be applied from an `html {...}` block.
+The Lumo theme sets most of them on the chart element, and an inherited value doesn't override that.
 ifdef::flow,lit[]
 See <<{articles}/styling/styling-components#component-style-properties,Component Style Properties>> for more information on style properties.
 endif::[]
@@ -23,192 +25,205 @@ In Flow, these properties have no effect until styled mode is enabled with `conf
 See <<{articles}/components/charts/styling/#css.styling.mode,CSS Styling Mode for Flow>>.
 In Lit and React, styled mode is enabled by default.
 
+The chart's own styles read these properties, so they work with the Aura theme, with Lumo, and with neither.
+The themes differ in what they set by default.
+Aura makes the plot background transparent and restyles the range selector buttons.
+Lumo gives most of the properties a `--lumo-*` value, and is the only theme with chart
+<<{articles}/components/charts/styling/#theme-variants,variants>>.
+
+// Theme defaults live in aura/src/components/charts.css and
+// vaadin-lumo-styles/src/components/chart.css in the web-components repository.
+
 === Common Properties
 
-[cols="1,2,2"]
+[cols="1,3,1"]
 |===
-| Feature | Property | Default Value
+| Feature | Property | Supported by
 
 |Background
 |`--vaadin-charts-background`
-|`--lumo-base-color`
+|Aura, Lumo
+
+|Surface the chart draws against
+|`--vaadin-charts-surface`
+|Aura, Lumo
+
+|Font size
+|`--vaadin-charts-font-size`
+|Aura, Lumo
 
 |Axis line
 |`--vaadin-charts-axis-line`
-|`--lumo-contrast-5pct`
+|Aura, Lumo
+
+|X-axis line width
+|`--vaadin-charts-xaxis-line-width`
+|Aura, Lumo
 
 |Grid line
 |`--vaadin-charts-grid-line`
-|`--lumo-contrast-20pct`
+|Aura, Lumo
 
-|X-axis line width
-|`--vaadin-charts-xaxis-line-width`
-|`0`
+|Minor grid line
+|`--vaadin-charts-minor-grid-line`
+|Aura, Lumo
+
+|Point border
+|`--vaadin-charts-point-border`
+|Aura, Lumo
+
+|Contrast
+|`--vaadin-charts-contrast`
+|Aura, Lumo
+
+|Candlestick line
+|`--vaadin-charts-candlestick-line`
+|Aura, Lumo
 
 |===
 
 === Data Series Colors
 
-[cols="1,2,2"]
+[cols="1,3,1"]
 |===
-| Feature | Property | Default Value
+| Feature | Property | Supported by
 
 |Charts color 0
 |`--vaadin-charts-color-0`
-|`#5ac2f7`
+|Aura, Lumo
 
 |Charts color 1
 |`--vaadin-charts-color-1`
-|`#1676f3`
+|Aura, Lumo
 
 |Charts color 2
 |`--vaadin-charts-color-2`
-|`#ff7d94`
+|Aura, Lumo
 
 |Charts color 3
 |`--vaadin-charts-color-3`
-|`#c5164e`
+|Aura, Lumo
 
 |Charts color 4
 |`--vaadin-charts-color-4`
-|`#15c15d`
+|Aura, Lumo
 
 |Charts color 5
 |`--vaadin-charts-color-5`
-|`#0e8151`
+|Aura, Lumo
 
 |Charts color 6
 |`--vaadin-charts-color-6`
-|`#c18ed2`
+|Aura, Lumo
 
 |Charts color 7
 |`--vaadin-charts-color-7`
-|`#9233b3`
+|Aura, Lumo
 
 |Charts color 8
 |`--vaadin-charts-color-8`
-|`#fda253`
+|Aura, Lumo
 
 |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`
+|Aura, Lumo
 
 |===
 
 === Text Colors
 
-[cols="1,2,2"]
+[cols="1,3,1"]
 |===
-| Feature | Property | Default Value
+| Feature | Property | Supported by
+
+|Label
+|`--vaadin-charts-label`
+|Aura, Lumo
 
 |Chart title
 |`--vaadin-charts-title-label`
-|`--lumo-header-text-color`
+|Aura, Lumo
 
 |Axis title
 |`--vaadin-charts-axis-title`
-|`--lumo-secondary-text-color`
+|Aura, Lumo
 
 |Axis label
 |`--vaadin-charts-axis-label`
-|`--lumo-secondary-text-color`
+|Aura, Lumo
 
 |Data label
 |`--vaadin-charts-data-label`
-|`--lumo-body-text-color`
+|Aura, Lumo
 
 |Secondary label
 |`--vaadin-charts-secondary-label`
-|`--lumo-secondary-text-color`
+|Aura, Lumo
 
 |Disabled label
 |`--vaadin-charts-disabled-label`
-|`--lumo-disabled-text-color`
-
-|===
-
-=== Other Chart Colors
-
-[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`
+|Aura, Lumo
 
 |===
 
 === Button
-Style properties for range selector buttons.
+Style properties for range selector buttons and inputs.
 
-[cols="1,2,2"]
+[cols="1,3,1"]
 |===
-| Feature | Property | Default Value
+| Feature | Property | Supported by
 
 |Button label
 |`--vaadin-charts-button-label`
-|`--lumo-primary-text-color`
+|Aura, Lumo
 
 |Button background
 |`--vaadin-charts-button-background`
-|`--lumo-contrast-5pct`
+|Aura, Lumo
 
 |Button hover background
 |`--vaadin-charts-button-hover-background`
-|`--lumo-primary-color-10pct`
+|Aura, Lumo
 
 |Button active label
 |`--vaadin-charts-button-active-label`
-|`--lumo-primary-contrast-color`
+|Aura, Lumo
 
 |Button active background
 |`--vaadin-charts-button-active-background`
-|`--lumo-primary-color`
+|Aura, Lumo
+
+|Button disabled label
+|`--vaadin-charts-button-disabled-label`
+|Aura, Lumo
+
+|Button border radius
+|`--vaadin-charts-button-border-radius`
+|Aura, Lumo
+
+|Range input background
+|`--vaadin-charts-range-input-background`
+|Aura, Lumo
+
+|Range input hover background
+|`--vaadin-charts-range-input-background-hover`
+|Aura, Lumo
 
 |===
 
 === Tooltips
 Tooltips within a chart.
 
-[cols="1,2,2"]
+[cols="1,3,1"]
 |===
-| Feature | Property | Default Value
+| Feature | Property | Supported by
 
 |Tooltip background
 |`--vaadin-charts-tooltip-background`
-|`--lumo-base-color`
-
-|Tooltip border
-|`--vaadin-charts-tooltip-border-color`
-|`inherit`
+|Aura, Lumo
 
-|Tooltip background opacity
-|`--vaadin-charts-tooltip-background-opacity`
-|`1`
+|Tooltip shadow
+|`--vaadin-charts-tooltip-shadow`
+|Aura, Lumo
 
 |===