When designing a complex application, you will often want to maintain a consistent set of colors, spacing, font sizes, and more across all components and screens. Themes in Shipcode give you the ability to create reusable design variables and styles that can be used when styling components and then change their values on the fly, ensuring consistency and efficiency across your entire project.

Themes Panel & Collections

The Themes Panel is accessible by clicking the palette icon on the Left Sidebar when in the Layouts or Components tab. Variables are expressed in Shipcode as Collections, which are different sets of design values.

Variables

Variables are single key/value pairs (color, number, or string) that define reusable design values. They are the fundamental building blocks of your theme.

• Creating Collections:
• 1. Open the Themes Panel from the Left Sidebar.
  2. Click the plus (+) button in the "Collections" section.
  3. Give your Collection a name using the input box on the top left of the modal.

• Adding Variables to Collections: Variables can be one of three types:
• 1. Color: A hexadecimal value (e.g., #efefef) that can be used anywhere colors are referenced, such as backgrounds and borders.
  2. Number: A value for numeric style properties such as font size and padding.
  3. String: A value for string properties such as font family or text alignment.

When starting with an empty collection, click on the "Color," "Number," or "String" buttons to create a variable of the specified type. Once your collection has one or more variables, you can add additional variables by clicking the "Create Variable" button on the bottom right.

After clicking the variable type, a new row will be added to the list of variables.

1. To give the variable a name, click within the name field to reveal a text input. Type in the name and then click outside of the input to save your changes.
2. To give the variable its value, click within the value field to reveal an input box. If the variable type is "color," the Shipcode color will be displayed. Provide a value and then click outside of the field to save your changes.

Note: The system relies on string matching for all settings besides color. When creating string variables, the value must precisely match the property value's expected naming (e.g., 'DM Sans' for font-family, not 'dmsans').

• Duplicating Variables: To duplicate a variable, right-click and select Duplicate, or use Cmd+D (Mac) / Ctrl+D (Windows). This creates a copy of the variable with the same value.
• Deleting Variables from Collections: To delete a variable, right-click on the variable name or value and then click "Delete."
• Editing Collections:
• 1. From the Themes Panel, hover over the collection name to reveal the menu icon.
  2. Click on the menu (3 dot) icon to display the context menu.
  3. Click "Edit."
  4. The Collections Modal will be displayed. You can change the name of the collection or the names or values of the variables within it. Any changes you make to the variables will be reflected across your project where those variables are applied.
• Deleting Collections:
• 1. From the Themes Panel, hover over the collection name to reveal the menu icon.
  2. Click on the menu icon to display the context menu.
  3. Click "Delete."
• Managing Categories: Categories are groups of variables organized by slash-separated naming (e.g., Colors/Primary). You can perform the following operations on an entire category at once:
• • Rename: Renames the category and updates all variable names within it.
  • Duplicate: Creates copies of all variables in the category with a "(copy)" suffix.
  • Delete: Removes all variables in the category permanently.

To access these operations, hover over the category name in the Collection Editor to reveal the context menu.

• Variables and Versioning: Design Variable changes are captured by Shipcode's version system. Every change to a collection, variable name, or value is tracked.
  
  When you roll back to a previous version, all variable states are restored to exactly how they were at that point — including collection names, variable names, values, and types.
  
  For more information on creating and managing versions, refer to the Publishing tutorial.
• Using Theme Variables:
• 1. Select your desired component on the Canvas.
  2. Open the Appearance Panel by clicking the paintbrush icon in the Right Sidebar.
  3. Hover over the desired property (e.g., Background Color) to reveal the Attach Data icon (+).
  4. Click on the Attach Data icon to reveal the Select Data Panel.
  5. Click on the "Theme Variables" tab.
  6. Using the dropdown, select the desired Collection.
  7. Select the variable you wish to use for the current property.
  8. The Canvas will now display the selected property using the provided variable's value.

Styles

Styles are reusable bundles of responsive text properties that you can create, name, and apply to text elements across your entire project. This feature ensures design consistency and allows you to make global typographic updates from a single location. Before you get started – there is currently no functionality to delete a style once it's created. Be mindful of this when building your style library.

• Creating Styles:
• 1. In the Left Sidebar, click the palette icon to open the Themes Panel.
  2. Navigate to the Styles tab.
  3. Click the + icon next to the "Text Styles" label to open a modal for new style creation.
  4. Give it a name: Provide a clear, descriptive name (e.g., "H2 Heavier").
  5. Set core properties: Use the dropdowns and input fields to define the font family, font style, font size, line height, and letter spacing.
  6. Configure breakpoints: Use the breakpoint selectors at the top of the modal to set different values for different device sizes.

• Applying Styles:
• 1. Select a Text element on your Canvas.
  2. In the Right Sidebar, open the Appearance Panel.
  3. At the top of the typography editor, click the four-dot icon to open a menu of all your project's text styles.
  4. Select a style from the list to apply it. The typography properties will collapse, and a pill badge with the style's name will appear.

📍📍📍 Note 📍📍📍

Other typography properties (like text alignment or text transform) that are not part of the text style will act as overrides for that specific element.

• Editing Styles:
• 1. In the Themes Panel, hover over the style you wish to edit and click the settings icon or the three-dot icon to access the context menu.
  2. Select "Edit" to open the editing modal.
  3. Make your desired changes to the font properties or breakpoints.
  4. Click the "Update Style" button. The changes will automatically apply to every element using that style.
• Swapping Styles:
• 1. Select a Text element that has a style applied.
  2. In the Appearance Panel's typography editor, click the pill badge that displays the current style's name. This will reopen the styles menu.
  3. Select a new style from the list. The component will instantly update to the new style's properties, while any non-style overrides remain intact.
• Detaching Styles:
• 1. Select a Text element that has a style applied.
  2. In the Appearance Panel's typography editor, click the "Detach" link next to the style's pill badge.
  3. The text element will disconnect from the text style system. All font properties will remain as they were, but they can now be edited individually, and the element will no longer receive updates from the style.