New defaults for colorbar.title.font and legend.title.font to depend on colorbar.tickfont and legend.font and increase their sizes

[archmoj]

Closes #5595.

1. Instead of using legend.font, the layout.font used to be applied as the default for legend.title.font.
   This PR fixes that.

2. Instead of using colorbar.tickfont, the layout.font used to be applied as the default for colorbar.title.font.
   This PR fixes that too.

3. The legend.title.font.size would be defaulted to be around 20% greater than the legend.font.

4. The colorbar.title.font.size would be defaulted to be around 20% greater than the colorbar.tickfont.

5. The gap between legend.title and items is increased when legend.title.side is set to left.

@plotly/plotly_js

[nicolaskruchten]

Will you do the vertical-centering in another PR or in this one?

I notice that none of the mocks have just the normal default behaviour of "a short three word legend title on a single line with no styling" so it's hard to see in the baseline diffs what the final outcome is

[archmoj]

Will you do the vertical-centering in another PR or in this one?

We could add that feature if this left default is not good enough.

[archmoj]

I notice that none of the mocks have just the normal default behaviour of "a short three word legend title on a single line with no styling" so it's hard to see in the baseline diffs what the final outcome is

Good call. I should add/adjust mocks to show the default.

[nicolaskruchten]

We should at least add the ability to do middle left and have that be the default.

Perhaps it's not a great default when the horizontal legend is multiple lines? we can set it to default to left if the legend is taller than some cutoff maybe? cc @alexcjohnson ?

[nicolaskruchten]

Or maybe the right heuristic is to redefine "left" to mean "the centerline of the title bounding box is colinear with the centerline of the top-most legend item" ?

[nicolaskruchten]

OK so right now just changing the font size gives much better vertical alignment, mostly by accident: the baselines of the text are aligned.

Some additional things to do here:

1. make the font size of the legend title the same as the xaxis.title (it's not exactly the same atm?)
2. make the font size change for both legend orientations
3. make the font size change for colorbar titles also

[archmoj]

Here the colorbar.title.font.color depends on layout.font not tickfont so that with inside ticklabels getting white, it renders outside using #444.

[alexcjohnson]

What's the purpose of removing all the <b> tags in titles?

[archmoj]

Good question.
To make it easier to see what the default look like.

[alexcjohnson]

OK - we have other examples of styled text, so this is fine.

[alexcjohnson]

💃