Feature Request: Allow addition of multiple color variants at once in the mirrorful editor

[arneesh]

Problem

Currently, if I add a new color to the theme, I have to add it's variants one by one using the mirrorful editor which is a tedious process.

Proposed Solution

Could a feature be added in the editor that allows the user to add multiple variants at once by passing the variants as key-value pairs in a javascript object?

{ 
      "50": "#c8bbf0",
      "100": "#b4a3ea",
      "200": "#a08ae4",
      "300": "#8b71de",
      "400": "#7758d9",
      "500": "#633fd3",
      "600": "#532dc6",
      "700": "#4828ad",
      "800": "#3e2294",
      "900": "#331c7b"
}

[alexdanilowicz]

Thanks for making the issue, I've been thinking about variants being auto-generated for the exact reason you describe... will do some thinking. Let me know if you have any other thoughts because I totally agree with you!

[arneesh]

Ah, yes agreed. Auto-generated variants seem like a great idea. I guess both of these things can be added.

Once a user chooses a color:

• Show the user a suggestion of auto-generated variants. Something like "suggested variants".
• And then there can be an option for inputting your own variants. (for people who already have a basic design system in place and want to migrate to mirrorful)

Design-wise it can be simple for an initial phase - a radio button based block selector, where:

• "Suggested Variants" option is pre-selected and it shows the list of selected variants

  • #A4EA7A [the color square]
  • #DAF7C9 [the color square]

• When it is toggled to "Input custom variants"
  Then we could give them a block where they paste their js object (or some other format) to insert multiple variants at once.

[prichter]

Could I make an alternate suggestion? If we had a pop-up menu for each variant box and the add variant box, you could perform tasks such as delete, set as base, or add default variants in one click without necessarily having to go through the modal, and have an edit option allowing access to the modal. The modal could then handle entry of multiple values in a list of desired... Thoughts?

[Teddarific]

The UI needs to be updated for this one —

I think this will be an awesome addition, but let me take a stab at it in Figma before we touch any code!

[prichter]

https://www.loom.com/share/76ab642b459f4189acc21d2561ae71d7
Would something like this meet the need? There is a menu option for manually adding key/value pairs (not yet implemented)...

[alexdanilowicz]

Will leave to @Teddarific to chime in. I like your Loom Paul!

[alexdanilowicz]

I would say this issue is still open, but we did move one step closer in: #189 by adding a check box to "automatically generate variants" in PR #189 .

[alexdanilowicz]

Closed because we're moving to a model where you don't edit variants.