1.3.0
We’re proud to announce new version of our Headspin UI Copilot plugin. Release video covers new Dynamic Theming feature with real world use-case demo.
We are stepping up the CSS fluid variables game by introducing Fluid Charts. With our initial version, we are exploring ways to illustrate fluid values so that users have a better understanding when tuning fluid settings. Our latest solution introduces Charts for data visualization. With this latest addition, you will see exactly how fluid values scale across various screen sizes.
And the best part is that Charts are integrated in every single fluid workflow inside plugin like:
We’ve done tons of tweaking to our custom color algorithm. Because of the our unique approach to colors we are unable to use equidistant color making as this would break our core color principles of the semantic color usage. In this round of polishing because of that we have created boundaries which will suggest you which starting colors are optimal for usage with our algorithm and will produce good results.
On other side we our algorithm logic is remade from ground up, we are doing three channel analysis in HSB color space and comparing that with all the colors inside Radix color system. After that we are generating color profile and blending custom palette based on profile and desired main color.
Inner working of algorithm is finding the closest color to Hue, the closest color based on Saturation and the closest Brightness. Once we have that we are calculation applying Hue rotation based rotation of the matching Hue color. And for Saturation and Brightness we use values from matching profiles.
We’re introducing unseen approach for site theming. Our unique approach to colors and architecture of the color system enabled us creating accessible color themes which could be swapped on the fly. This could be used to dynamic themes.
Imagine that you and your could style certain page based on custom field value, theme based on post category, tags and any CMS value. This could be used also from client side if you want provide them way to theme site, or you could define as static data attribute.
Best of all, it require zero coding. Works with dark and light mode. It takes one minute to setup.
Imagine scenario that you have five categories like news, sports, magazine, tech, misc and you want to theme posts based on dynamic category, and you want to support light and dark mode. You would need to be CSS mastermind to write that code, if you invent own system there is great chance that you would mess up contrast, and you would lose one day just to create this scenario. Compare that to 10 clicks one minute setup. This feature is aimed for advanced site theming, and it will pay for itself in one project.
Aside from these main improvements and new features, we have been refining nearly every aspect that users have requested updates on. We fixed bugs related to copying custom color variables on double click and improved the custom typescale dropdown by transitioning it from an HTML select field to a custom dropdown component. In-app modals will now offer better focus as we have adjusted the backdrop with a subtle glass effect.
We made small organizational tweaks, placing viewport settings inside the Fluid folder under the Project panel. Additionally, we relocated the contrast algorithm settings to the Accessibility folder within the Project panel.
The appearance of the app should be more consistent now that we have unified the button group component within Advanced Typography and Advanced Spacing, replacing the older components.
We’ve noticed that often misstep when going from local to production happens resulting in leaving http as site URL and forcing https with server configuration. This results with broken looking website until this configuration is fixed. To solve this once for all, we’ve made special check which will compare URL from site configuration and URL from page that is loaded and catch this misconfiguration. If you make this mistake, you will get big error modal inside the plugin with detailed instructions where to go and fix issue.
