Semantic Color Sync

It’s easy for developers and designers to know exactly what color to use when your colors have semantic names. Primary600? That name doesn't mean much. PrimaryButtonLabel? That's clear as can be. This plugin makes it simple to maintain a collection of semantically named colors that derive their color from your base palette. Not only does this allow you to increase clarity of usage, it also lays the foundation necessary for theming within your apps. For more details on why you should implement your colors this way, read this blog post: https://dev.to/ynab/a-semantic-color-system-the-theory-hk7 Using Semantic Color Sync is simple. First, create your base palette. For each base palette color, add a consistent prefix, such as “.palette/” Next, create a series of semantically named colors. In the description for each semantically named color, add the base palette color it derives from (including the prefix). For example: “.palette/primary600” Next, when you decide to change your primary hue from blue to bright pink (good choice, btw), the Semantic Color Sync plugin will automatically search through every semantically named color and update their color to match the updates made in your base palette. No need to update things by hand... Ugh. Just tweak your base palette and run this plugin to propagate the changes throughout all of your semantically named colors! And again, if you’re curious why this is useful, this blog post has it all laid out: https://dev.to/ynab/a-semantic-color-system-the-theory-hk7