We’re excited to introduce completely re-invented concept of the Context Menu or better to say Context Menu v2. Initial version served us and our users really well, but with recent new features in the Copilot, initial version was limited and could not support all things were present in Copilot like custom tokens.
Just like in the main application, we have incorporated the same organizational units here, called Collections (icons on the left). Groups are represented in an accordion fashion, and tokens are presented in button form.
In order to provide the best experience, we have implemented suggestion filtering. So instead showing everything we’ll try to find exactly values which you may want to use for example if you do right click on color input, we’re going to suggest colors, if you want to edit gap, margin, padding we’ll suggest spacing variables. So while we have added bunch more data in one-click fashion via context menu, it will be even more intuitive to use than previous v1 because it won’t just show everything.
Every color that is handled via Headspin will be available via context menu. This includes color palettes, but also color tokens.
Many users, including ourselves, like to use custom CSS from time to time. Writing out all of our variables can sometimes be frustrating, as you also need to remember naming conventions and other details like that. With the new version of the context menu, you will have the option to simply right-click and change any text there as well.
Color palettes that support transparent variants will have shift key symbol indicating that by pressing shift it will show transparent shades.
Furthermore, we have taken an additional step by incorporating a context-aware transparent shading technique. The challenge with transparent colors is that they rely on the background and how they blend with it. To address this issue, we have integrated a dynamic site background calculation technique to blend them accurately, providing you with the best possible preview when selecting your shades.
As you work in the Copilot app all changes will be reflected to every opened fronted tab and editor tab. So any changes done in main application will be instantly reflected:
While all of these alone take effort to make, we strongly believe in pushing boundaries how tools could be made. For example CSS variables are dynamic by nature and their value could be redefined (examples of this are dark/light mode, theming, local scoping). We’ve implemented mechanism to find their value at the moment when you apply them so they are fully context aware and will give 100% accurate preview of the values.
We took it a step further by incorporating a context-aware transparent shading technique. The issue with transparent colors is that they depend on the background and how they blend with it. We have implemented a dynamic site background calculation technique to blend them accurately, ensuring you have the best possible preview when choosing your shades.