Copilot v2.0.0-beta1

Before everything, we wanted to make everything the same, but improved. All advanced options are hidden by default as we want to keep easy interface by default and enable additional things only if user needs.

Download

Beta 1 could be downloaded here:

DOWNLOAD COPILOT 2.0.0 BETA 1

Commitments

Behind everything let’s explain what we’re committed to do.

First of all plugin should not break sites by update, and new configuration CSS is updated only when you are present and click Save.

All existing sites should have seamless migration to new things when they hit save, so for each new thing we need to write down migration logic to map out old and new system.

Not forcing – at v1.0.0 we did not have tokens panel, so some Breakdance connection (connection = override and takeover control in CSS) were hard-coded. Since addition of Tokens, we have fully migrated all the settings to Tokens and made discrete migrations, and with v2.0.0 all of these should be migrated. That required as to model things few times, and fine-tune Tokens data structure. Now all overrides are exposed in the Tokens>Breakdance and you have full control what you want to have connected, what you want to remove and handle with Breakdance global settings.

Bringing enterprise flows to page builders (pro)

Beta 1 is the first step to rollout options which are mostly reserved for enterprise system like Contrast-first workflow with colors and the best thing is that all the site will have option to do that, you could build like you have done until now and somewhat in future you could just activate these and take advantage.

Next phase till stable will be contrast relational rules which will be enable to have color contrast relations with healing if it fails minimal contrast in easiest flow of its kind.

Luminance grading

Bringing luminance based normalization of all the color palettes mean that you will have exactly the same contrast relation across all palettes. To make this easier we have made integration that brings US Web Design System inspired luminance intervals and point system. To pass AA you need 50+ point difference so making contrast we converted from complex math to base math of slide until it is background +50.

Color analysis

If you want to learn more about colors, we have special tool to see luminance, OKLCH values and temperature.

Playground (pro)

Based on user feedback we have made settings preview template to see changes in real time and quickly setup base project configuration. You could play and tune various configuration while template will reflect and preview how these are playing together.

Context menu (right click)

Besides fixing issues, we have implemented every single request that users had related to how this could work.

Improved smart suggestions

We’ve improved our mappings to make even more smart suggestions (smart suggestions = we suggest colors if you right click on colors, spacing if you right click on spacing). Now we should pick almost all fields no matter how they are nested.

Improved color groups

We’ve made label system to suggest you which shades are you using.

Improved nested dropdown

Dropdowns are tricky to track as context menu needs to be inside, if we place outside it would close dropdown and right-click would not work. To combat this we used mounting menu inside dropdown and made algorithmic CSS to target Breakdance dropdown only if menu is mounted. We’ve learned lesson from having problem with color picker, now we only modify if dropdown exists to prevent any issues. If right click is mounted (opened) than we adjust dropdown to make bigger so you could see out right click and we make our menu smaller. All this is made in algorithmic CSS manner to make it less intrusive.

Better overview in Theme panel

We’ve made special color overview group so you could have all colors at glance there. Now you could see and configure colors without need to go to color panel, color panel will be for advanced color stuff.

Site color control

Now we have special Site color group to control site colors from Theme panel. Also we have added option to control selection and make alternative selection styles.

Configuration API

Simple API which enables endless integration. We’re opening configuration capabilities to build own UI on top of the Copilot. You could create own UI for clients, or create UI for automated site creation. All crucial controls exposed with simple API, use Copilot under the hood, have live CSS reload so user could see changes while picking options, you could learn more about configuration API here with docs and examples.