Design tools: show "computed" style values

[creativecoder]

What problem does this address?

• Design tools sometimes show relative values that make it unclear what the precise setting is (font weight, for example)
• Design tools (Typography, spacing, etc) often have style values, even when the control is in a default or unset state (https://github.com/WordPress/gutenberg/issues/43082), making it unclear from the tool where the value is coming from, or what it is.
• For example, the Font Family setting of "Default" doesn't show what font is being used, and there's no other way to know in the UI.

What font is this using?

What is your proposed solution?

Display a "computed" value for each relevant design tool setting. This would have multiple benefits:

• Clearer that a value is present, even when the tool is unset
• Can show the source of the value, like when there's a theme value that's working as a default (similar to https://github.com/WordPress/gutenberg/issues/49278)
• Can show the precise value, like when a font weight is "thin", show the actual font weight number (e.g. 200)

[creativecoder]

cc @vcanales

[jasmussen]

Is this similar to #37752? It seems to be the same, but I may be missing nuance.

[creativecoder]

Is this similar to https://github.com/WordPress/gutenberg/issues/37752? It seems to be the same, but I may be missing nuance.

Yes, I think this issue is very similar:

• 37752 seems to describe changing what values the existing controls show

• While this issue suggests adding a way to see what the actual values are, which could be separate from the existing controls

So I think they're slightly different solutions to the same problem. Happy to combine issues if that makes tracking easier.

[jasmussen]

I'd be tempted to consolidate, and move any good info from this issue to the other (or vice versa depending on what might get the most development traction). The main thing is to avoid having two ways to display computed values, just the one across.