Styles Migration Guide
  • 09 May 2022
  • 1 Minute to read
  • Dark
    Light
  • PDF

Styles Migration Guide

  • Dark
    Light
  • PDF

 

This article contains deprecated/outdated material.

To take full advantage of the new Universal Theme System in your existing projects, there are a few steps you should take to migrate your view components and styles.

1. Install all updates from the marketplace.

You'll be prompted to do this when opening your project.

2. Add style classes to components

  • Existing components will be set in a "no style class" state
  • Change components to use style classes to leverage the theme system

Component style

3. Migrate legacy margins to the gap system

  • Existing margins should be converted to use the gap system
  • Make note of the margin values, as they won't be preserved after pressing the "migrate" button

Layout migration

  • Where as margins defined space around the component, the gap system defines space between components. Use gaps and padding together where needed to rebuild your layout.

New layout

4. Layout: legacy "stretch" align value in use

  • Choose one of the available values
    Legacy stretch

Optionally you can also:

  1. Change component foreground colors to smart color bindings
  2. Change background colors to smart background colors

Text color binding

Change background color to one of the smart background colors


Was this article helpful?