Style variables

Style variables in Mosaic serve as a centralized style management toolkit. They store frequently used styles such as colors, fonts, spacing, radius, and sizes. By using style variables, you can achieve consistent design across your entire website and easily update multiple elements simultaneously. This is especially useful when working on large sites where design consistency is essential.

These variables are accessible from the Top panel’s settings in any Editor, where you can manage them via the Style variables right-side panel.

Collections

Collections are used to organize style variables into related groups. Collections can hold all style variables of the type or types you choose, ensuring better customization and accessibility.

By default, the following collections are available:

• Color
• Font
• Radius
• Spacing
• Size

Color

Color variables store hex or RGB-based colors and support Light and Dark modes by default. These variables are ideal for managing themes and palettes.

Font

You can easily shape the typography of your web pages by creating a list of fonts. Making changes to these fonts later will dynamically update them wherever they are selected. Fonts can be sourced from Google fonts and Custom fonts.

Google fonts

Select from the Google Fonts library. It has the following settings:

• Name: Give your font a clear and memorable name for easy identification.
• Provider: Choose Google if you’re selecting from the Google Fonts library.
• Font family: Browse and pick from the extensive list of Google Fonts.
• Font variants: Select the desired font weights.
• Fallback fonts: Specify alternative font families in case your chosen Google font encounters loading issues.
• Usage (Optional): Decide where the font will be applied, such as headings, body text, or specific UI elements.
• CSS custom property (Optional): Define a custom property if you want to easily reuse the font.

Custom fonts

Upload and apply custom fonts using the @font-face code. Make sure the font-family name matches across the Font family field and the @font-face code. It has the following settings:

• Name: Give a name that helps identify your font.
• Provider: Select Custom here to load your own font.
• Font family: The font family name of your font.
• Font faces: It requires a small piece of code, commonly known as the font-face code, to load your chosen font.
• Fallback fonts: Specify an alternative font family in case your chosen font faces loading issues.
• Usage (Optional): Decide where the font will be applied, such as headings, body text, or specific UI elements.
• CSS custom property (Optional): Define a custom property if you want to easily reuse the font.

Radius

Radius variables are used to control corner rounding. Accepts whole numbers or decimals.

Spacing

Spacing variables are used for margins, paddings, and gaps. Accepts whole numbers or decimals.

Size

Size variables define width, height, or other dimension-related properties. Accepts whole numbers or decimals.

Manage collections

Collections can be edited or created by clicking the Edit collections button in the dropdown.

The options available include:

• Add collection: Click the + button to create a new collection. This will open a panel where you can define settings for the new collection.

• Delete collection: Use the trash icon in the collection dropdown to remove any of them.

• Collection name: Modify the name of an existing collection.
• Manage modes: Add, edit, or remove modes associated with collections. Most collections have a default mode. You can create new modes or edit existing ones, which will open a popup for customization, where you can name it and provide an icon for it.

• Manage skins: Add, edit, or remove skins linked to your theme. Each skin can have a name and an icon, the same way modes can.
• Preferred types: Specify which variable types are prioritized when choosing style variables for properties in the Style tab.

Groups

Groups provide further organization within collections, allowing you to categorize style variables (e.g.: background, text, and border colors). This structure helps keep your design decisions clear and manageable.

Manage groups

• Creating groups: Click the folder icon to create groups. The new group will appear at the bottom of your style variables list. Drag and drop to rearrange it.

• Editing/deleting groups: Use the three-dot menu next to a group name to rename or delete it.

Manage variable list

Style variables can be added, edited, or removed via the Style variables panel.

• Adding style variables: Use the appropriate collection or group to create new style variables using the + button for each.

• Editing style variables: Click on a style variable to modify it in their popup window. Any changes will update globally wherever the style variable is used.

• Removing style variables: Hover over a style variable to reveal the trash icon, then click to delete.

• Reordering style variables: Drag and drop style variables to change their order.

Update in the Style tab

Updating style variables directly from the Style tab is quick and straightforward. When you hover over a property that supports style variables, a style variable icon will appear next to the property name.

Clicking on this icon opens a popup window where you can see and choose from available style variables.

Additionally, hovering over a style variable in this popup window will display the specific settings applied to that variable.

Select/create variables

When the popup window opens, you’ll first see style variables from your preferred collection type. You can switch between collections by clicking on the type name.

To add a new style variable, simply click the + button.

If you want to organize style variables into groups or reorder them by dragging and dropping them, you’ll need to open the Style variables panel by clicking the cog icon.

For Color variables, you can switch between two viewing modes by clicking the middle icon in the top right corner:

• A simple view displaying only the colors.
• A detailed view that shows both colors and their names, making it easier to identify the right one.

Edit variables

To edit a style variable’s name or value, hover over the variable and click the pencil icon.

This opens the same popup you see in the Style variables panel when selecting a style variable, allowing you to easily adjust its details. Any changes made here are applied globally, so every element linked to that variable will update instantly across your entire site.

Variables in interactions

Interactions can use style variables for properties like:

• Size
• Radius
• Spacing
• Color

Interactions also support Variable modes, which allow elements to change their appearance based on the active mode.

FAQ