Style

Components have style classes. These can be used to quickly change between different style options for a component. By default the theme contains a range of semantic style classes such as "Primary", "Secondary" and "Danger".

A style class defines values for all the style properties of the component, so switching to a different style class will completely change the way your component looks.

There is a number of semantic style classes that are required to be present in every theme, but you can also create new ones yourself, and of course overwrite the default values to make your app look your own.

The exception is the properties under the new Layout tab, which have to do with how the component is positioned on the page (or for a Container, how its child components are laid out), as these can be different for every component.

Component spacing with gaps

Component gap is a new concept that replaces margins. With component gaps the spacing between components is defined as the 'gap' between them. This brings a much more intuitive workflow for component spacing, while still allowing you to customize everything when desired.

Component gap also works the same whether in a vertical or horizontal layout.

Layout options

All the layout options are still available, although the panels have gone through a redo to make them easier and more intuitive to use.

Component style editor

The component style editor has received an overhaul. It can be accessed by choosing "edit" from a style class.

Here you can edit the individual style properties and also create new style classes for your to customize further.

For composite components, the full Style Editor is opened. In the Style Editor, you can only affect each component's Style and Layout tab properties. Changes made here are saved to the component instance, but just like with primitives, you can overwrite the style class to make the changes apply everywhere.

(To access the old Isolation Mode (now renamed Template Editor), there is an icon at the bottom of the properties bar.)

Themes

We also have a completely new theme editor. The headline changes are the semantic smart color palettes, which you can edit and customize in the theme tab, in addition we also have switchable themes with 2 themes available right now (Universal theme and SAP Fiori theme).

Smart colors

The semantic colors in AppGyver themes are smart. This means that when for example choose a darker background color for a page or a component, the components within will automatically adjust to match it based on the smart content color chosen for them.

We hope you enjoy using AppGyver even more with these new features!

Styles Migration Guide

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.

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
• 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.

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

• Choose one of the available values

Optionally you can also:

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