Currently when deleting a token, all its styles are removed from all instances with that token applied. E.g. if I had a token that changed the background color to red, and that was applied to 10 different instances, deleting that token would remove the red background color from all those instances.
There is also no way of knowing which instances have that token applied. The result is we end up not deleting tokens in fear of unintentionally breaking anything, and over time our projects get bloated with unnecessary tokens.
Here are some ideas that we could implement to solve this problem:
- Deleting a token applies its styles to the local styles of the element. E.g. if a token changes the background color to red, then deleting it will migrate that style to the local styles. The exception to this rule is if the token style is overridden, in which case the style will not migrate to the local styles.
- Changing the wording of the "Delete Confirmation" dialog to inform us of how many instances have that token applied. Something like:
Delete "token name," which is used in 3 instances?
2.5. We could even add the paths to the instances where the tokens are applied in the Delete Confirmation dialog:
Delete "token name," which is used in 3 instances?
page name>instance
page name>parent component>instance
page name>parent component>child component>instance
