Site Logo: update placeholder to wireframe

[gwwar]

Let's update the site logo placeholder to a wireframe (or similar) with a droppable area. The upload button for the media library should be visible on the toolbar.

The idea here is to make it easier to visualize what a site logo may look like. This is especially helpful when using a site-logo in a pattern when the site logo isn't set yet.

Current Placeholder

An example ideal pattern to display

[jasmussen]

Here's an idea for the site logo placeholder:

[mtias]

Nice! Can we try on that first version with the same drawing we use for the icon but larger so it coincides with the outline? We'd need to redraw it. We should also see how it looks when the style is set to squared.

[jasmussen]

Can we try on that first version with the same drawing we use for the icon but larger so it coincides with the outline?

Do you mean like this?

If we can get the vectors just right, it could work, even as square:

One of the things I like about the icon, though, is the 1.5px stroke, which feels like it departs a little bit from the placeholder material into illustration territory:

Here's a square version of the dashed line plus icon, just for completeness sake:

[jasmussen]

This one doesn't work, but to cauterize the idea:

[mtias]

Yes, that's what I had in mind. We don't need to do a 1.5 stroke for there. The dotted one could work as well, I think we can try either.

[pablohoneyhoney]

Lovely. Any could work! Perhaps the tooltip is too long with too many instructions? And do we need two commas? Would a simple Add a site logo work reinforced with the upload icon and the state change?

[jasmussen]

Cool, let's try the decorative version with a minimal tooltip and go from there. Thanks!

[gwwar]

As a heads up @jasmussen I was playing around a bit and I think we'll need a different SVG asset for the wireframe. If we don't have a fixed size in mind, we can use the vector-effect="non-scaling-stroke" to not distort the stroke size. However siteLogo's path is drawn in a way that it creates a fill, so when a fill is not set the stroke appears to be quite thick.

Changes here might be as simple as decomposing this to a circle and a line or path element.

With Fill	Without Fill

[jasmussen]

Nice, non-scaling-stroke looks great, let's definitely explore that one.

I imagine since we'll need to accommodate various border radii, we'll want to combine the horizontal mountain silhouette as an SVG stroke, with a border. Here's an SVG you can use:

<svg width="60" height="60" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="m61 32.622-13.555-9.137-15.888 9.859a5 5 0 0 1-5.386-.073l-9.095-5.989L1 37.5" stroke="#1E1E1E" stroke-linejoin="round" />
</svg>

Some of those vectors might need some tweaking, which are probably best done in context.

[jasmussen]

I've started work on a PR that's mostly a proof of concept in #35397. It's promising and the remaining todos are fixable, but I'd love to pair with someone on the remaining bits.