Global Styles: Allow saving, importing, exporting, copying from another theme without switching to it

[jasmussen]

In Global Styles > Browse styles, it should be possible to import, export, and save styles. The interface should accommodate all these flows:

1. Allow saving user variations for each bundled style (i.e. customized “dark” variation) (same as Global Styles: Managing style variations #38333)
2. Load style variations from a file
3. Provide access to styles from other themes without switching to them (related to Global Styles: Allow access to style variations from any theme #45452)
4. Provide an implicit warning about losing style customizations (related to Warn that customisations will be lost on style variation switch #45210, Custom colors are lost when styles are changed #48407, Style Variations: Add warning when custom styles will be lost #40561)
5. Allow exporting, deleting styles

The following mockups take a stab at the above, and may in some cases replace them. Here's importing a file:

• Import file exists in ellipsis menu
• Plus exists to create a style from scratch (separate future feature)

Styles from other themes can be surfaced:

• The "Theme styles" section acts as a ToolsPanel, showing by default the active theme styles, letting you toggle on styles from other installed themes.

Saving customizations:

• Activating a style from a theme doesn't automatically save it as a custom style.
• But making any customizations to the style makes it show up under "Custom styles", with a blue dot. If you save using Multi Entity saving, or using the dropdown, the blue dot disappears.
• The ellipsis under custom styles allow saving, deleting, exporting.

As a starting point, styles imported or copied from other themes retain their stylenames from those sources. But in the future, we could explore a create from scratch + rename flow, such as this:

---

Issue updated Nov 3.

Initial proposal

This issue has a great deal of overlap with #38333, but takes a slightly different approach in that it is meant to include a flow for importing and exporting from files. The goal is to use the same interface to accomplish three separate flows:

1. Allow saving user variations for each bundled style (i.e. customized “dark” variation)
2. Load style variations from a file (import)
3. Copy global styles from another theme without switching to that theme (import)
4. Export, to enable items 2 and 3

Incidentally, these flows may also solve #45210, and depending on feedback, we may merge this issue into 38333, or vice versa.

In the first case, a user has picked a style variation that's bundled with a theme, but has made no other customizations to it:

• Chosen style shows as active in the list of bundled theme styles
• An ellipsis menu allows importing, exporting, and saving a style

If customizations are made to a style, or if a style is imported:

• Customized style shows up in "Unsaved styles" section, clearly delineated as separate from the them bundled styles
• Ellipsis menu shows uption to save or delete
• If saved, the style will appear in a new section, called "Custom styles"
• If further customizations are made, the "Unsaved styles" section appears again

This is a first iteration, let me know your thoughts.

Details

[jameskoster]

This looks like a good first iteration!

Should it be possible to export a single variation? I'm curious what that would look like. Similarly should it be possible to delete custom styles? I can see that section becoming a bit unwieldy otherwise.

Do we definitely need a separate 'Custom styles' section? I wonder if we could do something similar to templates, where customised theme files are marked in the UI, and it is possible to 'clear customisations'.

In a similar line of thinking, instead of an 'unsaved styles' section, could we just mark the currently selected style in a way to indicate its unsaved state?

Not something to implement here, but I mention it in case it inspires any relevant thoughts: in the future it might be nice to have a "New style" option which is essentially a blank slate. It may also be something you can trigger manually after customising an existing variation... essentially a "Save as..." option.

[jasmussen]

Should it be possible to export a single variation? I'm curious what that would look like. Similarly should it be possible to delete custom styles? I can see that section becoming a bit unwieldy otherwise.

There's a delete button in the last mockup. Each action is meant to apply to the currently active/selected style. But perhaps the context isn't clear enough? Maybe we need ellipses on each style then? 🤔

Do we definitely need a separate 'Custom styles' section? I wonder if we could do something similar to templates, where customised theme files are marked in the UI, and it is possible to 'clear customisations'.

Might work, yes! Except ...

In a similar line of thinking, instead of an 'unsaved styles' section, could we just mark the currently selected style in a way to indicate its unsaved state?

There's a throughline here. By having separate Custom and Unsaved Styles sections, you'd never lose your work by switching to another, which is currently the case.

I like your idea of taking inspiration from how it works in template management, though, seems like there could be a solution there.

[jameskoster]

But perhaps the context isn't clear enough?

Ah! That wasn't obvious to me. Since the ellipsis is next to the "Theme styles" heading, I expected the actions would be applied to all.

There's a throughline here. By having separate Custom and Unsaved Styles sections, you'd never lose your work by switching to another, which is currently the case.

Of course, good point. But I think the main reason that's an issue currently is because the UI doesn't make it clear when your changes will be lost. There might be other ways around that, I'll mock something up quickly to test.

[jameskoster]

Here's what I was thinking:

The main trade-off is that you cannot switch between a theme style, and a customised version of that same theme style, without reverting it. I'm not sure it's worth consolidating all the options into a single group after all...

[jasmussen]

The other tradeoff is the added noise of the style name, which is already integrated into the focused style. I wonder if the ellipsis can't be integrated as well? It would be additional focus stops, two per item, but it might be worth it?

I still think there's some value in having unsaved styles show up in a brand new category, for a couple of reasons:

• In many cases you'll just pick a style and be happy.
• In other cases when you do choose to customize a style, this fact is such a big deal that IMO it deserves separation

Mainly though, by making it a separate style, it can be "implicitly saved". Kind of like a draft in Figma. It wouldn't disappear just because you selected another style, you could always go back to it.

But perhaps "Unsaved styles" and "Custom styles" could be combined into a single category, rather than being two? Let me know what you think and I can take a stab.

[jameskoster]

But perhaps "Unsaved styles" and "Custom styles" could be combined into a single category, rather than being two? Let me know what you think and I can take a stab.

Could be worth a try, with a detail to signify unsaved changes.

[jasmussen]

Alright, here's a new iteration based on your work, and back towards that of Channing in #38333 (comment), namely a horizontal ellipsis to balance utility with compression. User has no customizations:

User has customizations, and saves a style:

[jameskoster]

Nice. The ellipsis looks a little awkward but I don't have a better idea right now.

For the custom styles what is the blue dot highlighting?

Including 'Save style' is interesting. Contextual saving isn't a feature we have anywhere else but it might be nice to begin thinking about that. On a similar note, how do you feel about providing a 'Discard unsaved changes' action? I think that might be useful too.

[scruffian]

I had a slightly different but connected idea in #45452

[jasmussen]

Excellent feedback, thank you all. Here's an iteration based on your thoughts, but which encompasses the idea of importing styles as outlined in 45452. Mockup:

• "Custom Styles" becomes a permanent fixture, even if you have none. This affords a plus button to import.
• Any theme with style variations that you have installed, will surface its style variations in the modal that opens. Pick and choose what to import.
• All imported styles will show up in "Custom styles".

You can also import from file, shown here importing "tt2-style-mint.json":

• The option to import from style sits in an ellipsis dropdown and opens an upload modal.
• Imported styles are appended after other styles in the "Custom styles" section.

Saving customizations:

• If you customize a theme style and save changes, a new style will appear in "Custom styles".
• If you customize it further, unsaved changes are denoted with a dot.
• The ellipsis menu contains options to save or discard changes, or to duplicate or "download" (née "export") a style, as well as delete it.

What do you think?