How to copy Theme element from one app to another

I have a theme in one app and I would like to copy only one element (not entire theme) for ex, Radio button element from theme. I am unable to copy and paste this element to my new app. When I try copy and paste, getting an error “Invalidate clipboard data”. I remember, we had this functionality in 17.15 version but it’s no longer working in 18 version. My both apps are in 18+ version.

Can someone please suggest?

Thanks,
Narendra

So i can’t seem to copy and paste a specific variant as i get the same error as you. I’ll flag this to our engineering team!

The below is a workaround that I wouldn’t recommend as there may be some downstream effects due to the variant having a UUID, but what you can do is download the theme from both apps which will come down as a JSON file. You can then look through that JSON file and look for the schema of the specific variant that you would like to copy over. this would look something like the below snippet. You can then take this and copy it over into the right section of your original theme.json.

Again, I wouldn’t recommend this and you should probably recreate the variant in the app itself

{
      "$schema": "/element/theme/control/button.json",
      "name": "default-copy",
      "states": {
        "default": {
          "font": {
            "size": {
              "next": {
                "safe": true,
                "$schema": "/element/expression/binding/name-binding.json",
                "binding": "fontSizeMedium"
              },
              "safe": true,
              "$schema": "/element/expression/binding/variable-binding.json",
              "binding": "theme"
            },
            "color": {
              "next": {
                "safe": true,
                "$schema": "/element/expression/binding/name-binding.json",
                "binding": "backgroundPrimary"
              },
              "safe": true,
              "$schema": "/element/expression/binding/variable-binding.json",
              "binding": "theme"
            },
            "family": {
              "next": {
                "safe": true,
                "$schema": "/element/expression/binding/name-binding.json",
                "binding": "brandPrimaryFont"
              },
              "safe": true,
              "$schema": "/element/expression/binding/variable-binding.json",
              "binding": "theme"
            },
            "$schema": "/element/theme/trait/font.json"
          },
          "border": {
            "top": {
              "safe": true,
              "value": true,
              "$schema": "/element/expression/binding/constant-binding.json"
            },
            "left": {
              "safe": true,
              "value": true,
              "$schema": "/element/expression/binding/constant-binding.json"
            },
            "color": {
              "next": {
                "safe": true,
                "$schema": "/element/expression/binding/name-binding.json",
                "binding": "brandPrimary"
              },
              "safe": true,
              "$schema": "/element/expression/binding/variable-binding.json",
              "binding": "theme"
            },
            "right": {
              "safe": true,
              "value": true,
              "$schema": "/element/expression/binding/constant-binding.json"
            },
            "style": "solid",
            "width": {
              "next": {
                "safe": true,
                "$schema": "/element/expression/binding/name-binding.json",
                "binding": "borderSizeSmall"
              },
              "safe": true,
              "$schema": "/element/expression/binding/variable-binding.json",
              "binding": "theme"
            },
            "bottom": {
              "safe": true,
              "value": true,
              "$schema": "/element/expression/binding/constant-binding.json"
            },
            "$schema": "/element/theme/trait/border.json"
          },
          "$schema": "/element/theme/trait-group/standard.json",
          "padding": {
            "top": {
              "next": {
                "safe": true,
                "$schema": "/element/expression/binding/name-binding.json",
                "binding": "spacingMedium"
              },
              "safe": true,
              "$schema": "/element/expression/binding/variable-binding.json",
              "binding": "theme"
            },
            "left": {
              "next": {
                "safe": true,
                "$schema": "/element/expression/binding/name-binding.json",
                "binding": "spacingLarge"
              },
              "safe": true,
              "$schema": "/element/expression/binding/variable-binding.json",
              "binding": "theme"
            },
            "right": {
              "next": {
                "safe": true,
                "$schema": "/element/expression/binding/name-binding.json",
                "binding": "spacingLarge"
              },
              "safe": true,
              "$schema": "/element/expression/binding/variable-binding.json",
              "binding": "theme"
            },
            "bottom": {
              "next": {
                "safe": true,
                "$schema": "/element/expression/binding/name-binding.json",
                "binding": "spacingMedium"
              },
              "safe": true,
              "$schema": "/element/expression/binding/variable-binding.json",
              "binding": "theme"
            },
            "$schema": "/element/theme/trait/padding.json",
            "linkValues": "none"
          },
          "background": {
            "color": {
              "value": "#cb4444",
              "$schema": "/element/expression/binding/constant-binding.json",
              "safe": true
            },
            "$schema": "/element/theme/trait/background.json"
          },
          "dimensions": {
            "width": {
              "safe": true,
              "value": "100%",
              "$schema": "/element/expression/binding/constant-binding.json"
            },
            "$schema": "/element/theme/trait/dimensions.json",
            "linkValues": "none",
            "linkMaxValues": "none",
            "linkMinValues": "none"
          },
          "borderRadius": {
            "radius": {
              "next": {
                "safe": true,
                "$schema": "/element/expression/binding/name-binding.json",
                "binding": "roundedCornerMedium"
              },
              "safe": true,
              "$schema": "/element/expression/binding/variable-binding.json",
              "binding": "theme"
            },
            "$schema": "/element/theme/trait/border-radius.json",
            "topLeftRadius": {
              "safe": true,
              "value": true,
              "$schema": "/element/expression/binding/constant-binding.json"
            },
            "topRightRadius": {
              "safe": true,
              "value": true,
              "$schema": "/element/expression/binding/constant-binding.json"
            },
            "bottomLeftRadius": {
              "safe": true,
              "value": true,
              "$schema": "/element/expression/binding/constant-binding.json"
            },
            "bottomRightRadius": {
              "safe": true,
              "value": true,
              "$schema": "/element/expression/binding/constant-binding.json"
            }
          }
        },
        "pressed": {
          "border": {
            "top": {
              "safe": true,
              "value": true,
              "$schema": "/element/expression/binding/constant-binding.json"
            },
            "left": {
              "safe": true,
              "value": true,
              "$schema": "/element/expression/binding/constant-binding.json"
            },
            "color": {
              "next": {
                "safe": true,
                "$schema": "/element/expression/binding/name-binding.json",
                "binding": "brandPrimaryTint1"
              },
              "safe": true,
              "$schema": "/element/expression/binding/variable-binding.json",
              "binding": "theme"
            },
            "right": {
              "safe": true,
              "value": true,
              "$schema": "/element/expression/binding/constant-binding.json"
            },
            "style": "solid",
            "width": {
              "next": {
                "safe": true,
                "$schema": "/element/expression/binding/name-binding.json",
                "binding": "borderSizeSmall"
              },
              "safe": true,
              "$schema": "/element/expression/binding/variable-binding.json",
              "binding": "theme"
            },
            "bottom": {
              "safe": true,
              "value": true,
              "$schema": "/element/expression/binding/constant-binding.json"
            },
            "$schema": "/element/theme/trait/border.json"
          },
          "$schema": "/element/theme/trait-group/standard.json",
          "background": {
            "color": {
              "next": {
                "safe": true,
                "$schema": "/element/expression/binding/name-binding.json",
                "binding": "brandPrimaryTint1"
              },
              "safe": true,
              "$schema": "/element/expression/binding/variable-binding.json",
              "binding": "theme"
            },
            "$schema": "/element/theme/trait/background.json"
          }
        },
        "disabled": {
          "border": {
            "top": {
              "safe": true,
              "value": true,
              "$schema": "/element/expression/binding/constant-binding.json"
            },
            "left": {
              "safe": true,
              "value": true,
              "$schema": "/element/expression/binding/constant-binding.json"
            },
            "color": {
              "next": {
                "safe": true,
                "$schema": "/element/expression/binding/name-binding.json",
                "binding": "brandPrimaryTint1"
              },
              "safe": true,
              "$schema": "/element/expression/binding/variable-binding.json",
              "binding": "theme"
            },
            "right": {
              "safe": true,
              "value": true,
              "$schema": "/element/expression/binding/constant-binding.json"
            },
            "style": "solid",
            "width": {
              "next": {
                "safe": true,
                "$schema": "/element/expression/binding/name-binding.json",
                "binding": "borderSizeSmall"
              },
              "safe": true,
              "$schema": "/element/expression/binding/variable-binding.json",
              "binding": "theme"
            },
            "bottom": {
              "safe": true,
              "value": true,
              "$schema": "/element/expression/binding/constant-binding.json"
            },
            "$schema": "/element/theme/trait/border.json"
          },
          "$schema": "/element/theme/trait-group/standard.json",
          "background": {
            "color": {
              "next": {
                "safe": true,
                "$schema": "/element/expression/binding/name-binding.json",
                "binding": "brandPrimaryTint1"
              },
              "safe": true,
              "$schema": "/element/expression/binding/variable-binding.json",
              "binding": "theme"
            },
            "$schema": "/element/theme/trait/background.json"
          }
        },
        "focused": { "$schema": "/element/theme/trait-group/standard.json" }
      },
      "transitions": { "$schema": "/element/theme/trait/transitions.json" },
      "id": "c70822ee-2c6f-4bec-9f11-7311b8ea86d7"
    }
1 Like

Thanks Ismaen! I hope Engineering team will fix this problem asap.

Hi @Narendra, i did some digging with the team and we were not able to get this feature to work in 17.15. At the moment, the only way to get variants over from one app to the next is to import/export the themes.

If i get any updates from the team on this feature request, i will update the thread, but at the moment I don’t have a timeline for this one.