New style and theme features — what's changed?

New style and theme features
The style and theme features of Composer Pro have received a major overhaul.
A lot of work was put into having a more intuitive experience for our users, as well as brand new features that'll put you on a new level with the styling and theming of your apps!
Below you'll find a breakdown of the most exciting and important changes.
Style classes
Components now 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.
Style classes for a Button component
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.
a Text component with XXL bottom gap
Component gap also works the same whether in a vertical or horizontal layout.
two buttons with an XXL gap between them
How to adjust component spacing with gaps
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.
How to create a horizontal layout
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.
menu opens from the top right of a style class
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.
component style editor enables creating new style classes and gives access to individual style properties
How to create a new style class
(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).
the new theme editor with theme switching accessible from bottom right
How to change the 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.
Components with the default background selected
Note how components automatically adjust to the chosen dark background
How to use Smart colors
We hope you enjoy using AppGyver even more with these new features!