In this blog I will briefly explain the structure of the theming base parameters and give you a tip how you can explore this structure using the UI theme designer.
Most of the parameters are color values, but you will also find dimensions and font parameters in the theming base content. Many, though not all, are available for theming. This means you can modify them within a custom theme in the UI theme designer. However, some parameters are protected and cannot be customized.
You can find the theming base content here: SAP Theming Base Content
There are three types of parameters:
Internal Reference Parameters: They build the theme palette and are the DNA of a theme. The parameters are usually not directly referenced in the CSS style classes but used throughout the theme to define other parameters. Internal reference parameters are protected and cannot be modified in the UI theme designer.Main Parameters: These are high-level parameters which characterize a theme and are connected to several component parameters. Most of them are available for theming. They have the biggest impact when you create a theme and allow quick themeability of SAP applications.Component Parameters: These parameters define the design of individual UI components for example the shell, an application page, buttons, inputs any many more. Component parameters generally have less impact on other parameters than the main parameters.
How to find parameters in the UI theme designer?
In the UI theme designer you find different levels of theming:
Quick theming offers the main parameters.Detailed theming provides the parameters for the most important components in a form-based layout.Expert theming lists all parameters available for theming and includes a set of tools to assist you in finding specific parameters.
How to find parameters for a component in expert theming?
Select expert theming.Open the tag view.Select the component, e.g. Button.
How to find dependent parameters?
Open expert theming.Search for the parameter.
How to see if a parameter is calculated from other parameters?
Select expert theming.Search for the parameter.Examine the value. In expert theming you find the Less function for a parameter.
Wrap up
In this blog you got an overview of the theming base content structure and learned how to explore the structure in the UI theme designer.
Further information
Theming Base Content GitHub RepositoryParameter ExplorerSAP Fiori for Web: ThemingSAP Fiori for Web: Design Tokens
In this blog I will briefly explain the structure of the theming base parameters and give you a tip how you can explore this structure using the UI theme designer.Most of the parameters are color values, but you will also find dimensions and font parameters in the theming base content. Many, though not all, are available for theming. This means you can modify them within a custom theme in the UI theme designer. However, some parameters are protected and cannot be customized.You can find the theming base content here: SAP Theming Base ContentThere are three types of parameters:Internal Reference Parameters: They build the theme palette and are the DNA of a theme. The parameters are usually not directly referenced in the CSS style classes but used throughout the theme to define other parameters. Internal reference parameters are protected and cannot be modified in the UI theme designer.Main Parameters: These are high-level parameters which characterize a theme and are connected to several component parameters. Most of them are available for theming. They have the biggest impact when you create a theme and allow quick themeability of SAP applications.Component Parameters: These parameters define the design of individual UI components for example the shell, an application page, buttons, inputs any many more. Component parameters generally have less impact on other parameters than the main parameters.How to find parameters in the UI theme designer?In the UI theme designer you find different levels of theming:Quick theming offers the main parameters.Detailed theming provides the parameters for the most important components in a form-based layout.Expert theming lists all parameters available for theming and includes a set of tools to assist you in finding specific parameters.How to find parameters for a component in expert theming?Select expert theming.Open the tag view.Select the component, e.g. Button.How to find dependent parameters?Open expert theming.Search for the parameter.How to see if a parameter is calculated from other parameters?Select expert theming.Search for the parameter.Examine the value. In expert theming you find the Less function for a parameter.Wrap upIn this blog you got an overview of the theming base content structure and learned how to explore the structure in the UI theme designer.Further informationTheming Base Content GitHub RepositoryParameter ExplorerSAP Fiori for Web: ThemingSAP Fiori for Web: Design Tokens Read More Technology Blogs by SAP articles
#SAP
#SAPTechnologyblog
