There are multiple ways to add colour to elements in Blocs, you can either use static colours which are applied via a custom CSS class or you can use global swatches. The benefit of using a global swatch is, if a global swatches colour value is updated at some point in the future, all Blocs and Brics with that swatch assigned will be automatically updated to reflect the new colour throughout your entire project.
Assign a Global Swatch
To assign a global swatch to any Bloc or Bric, simply right click the selected object and from the contextual menu select the colour option, this will open the global Swatch Manager window. From this window you can select the swatch you wish to assign to the currently selected object. It’s also possible to access the global Swatch Manager by clicking on the colour well located in the sidebar options under the appearance tab or by using the keyboard shortcut ⌘+8.
Add a New Global Swatch
To add a new global swatch, click the + symbol located in the top right of the global Swatch Manager window.
Edit Global Swatch
To edit any global swatch, first select it and then click on the master colour well located in the top left corner of the global Swatch Manager window or alternatively Right Click a swatch and select Edit from the contextual menu. This will open the native Mac colour picker allowing you to edit the swatches properties. When you make changes to a global swatch, all objects that have that swatch assigned will update throughout your entire project.
Set Swatch Name
By default, all new global swatches are unnamed. To give a global swatch a custom name simply left click the name label on the Swatch Manager window and then use your keyboard to enter a name of your choice.
Please note. Names given to global swatches are not referenced in the exported code of your website, they are for visual reference only within the design environment.
Delete Global Swatch
To delete a global swatch, click the – symbol located in the top right of the global Swatch Manager window to open the delete popup menu. From here you can choose to delete the currently selected swatch or to delete all unused swatches in the project.
Alternatively, you can also Right Click a swatch tile and select Delete from the contextual menu.
Unlink Global Swatch
To unlink a swatch from any object, click the small cross located inside the colour well in the sidebar options.
Import / Export Colours
Blocs supports importing and exporting colours that use the .clr file extension. To import or export Global Colour Swatches, navigate to the circular menu button, that is positioned to the left of the remove button. Clicking this button will present you with a menu that contains both the import and export Global Swatch options.
Generate Colour Variants
It’s possible to quickly create a darker or lighter variant of any colour in the Swatch Manager. To generate a colour variant, right click any swatch to reveal the context menu and then select the type of colour variant you would like to add.
