Configuration

All the following changes will be driven by the same configuration, called Spacing, that will affect internal paddings, distance between elements and font-sizes.
In order to provide backward compatibility, we need to ensure that pre-existing charts will not be affected by all this, this is why the current style will stay the same and will be provided by Small option of this new settings, while new metrics that are explained in this issue will represent the Large option.

Margins

Breakpoints XS and smaller
Padding: 16px;

Breakpoint S and M
Padding: 24px;

Breakpoint L
Padding: 32px;

Breakpoint XL
Padding: 40px;

Breakpoint XXL
Padding: 48px;

Spacing

- Between Title and subtitle: 8px
- Between Primary metric and secondary metric: 4px
- Between Progress bar and text: this margin should identical to the padding-left of the panel, therefore adaptive according to breakpoint

Font weight

Primary Metric
Large size = Small size * 1.5

Secondary Metric
Large size = Small size * 1.75

Important note: These multipliers should factor also the margin expressed in previous paragraph, so the one between Primary and Secondary (when primary is at the bottom) and the Margin between Primary and Title (when primary is at the top).

This way it will be automatic on other breakpoints as well.

API inclusion

@markov00

We should remember to include the spacing property in the Metric API schema src/platform/packages/shared/kbn-lens-embeddable-utils/config_builder/schema/charts/metric.ts , and add the required transformation from/to the SavedObject schema.