Themes and styles for Constellation applications
Following brand guidelines is important for any organization. With App Studio, developers can easily apply colors, font styles, and other styling aspects of the Constellation design system to match their organizational branding.
You configure themes in App Studio by clicking Settings > Themes in the navigation pane. You can modify the default theme provided for new applications or click Add to create your own customized theme.
Constellation applications come with several ready-to-use themes: Pegasus, Aries, Self-Service and Bootes theme. To customize them, you must first save them under a new name.
Accessibility is also essential for high-quality apps, and the Themes landing page in App Studio provides developers with the configurations that they need to meet accessibility requirements by, for example, flagging color combinations that fail Web Content Accessibility Guidelines (WCAG) guidelines.
The following image shows a message that is displayed when an accessibility requirement for theming is not met:
The following topic contains information that is important for your understanding of defining themes and for passing the System Architect certification exam: Defining themes.
The Enterprise layer
Use an Enterprise layer, also called a Center of Excellence (COE) layer, to implement your design system. Inheriting UI elements from the Enterprise layer increases both the maintainability of the product and enables easier updates to specific UI elements. As a best practice, use out-of-the-box components and reduce customization to create a Enterprise layer with reusable components. In the Enterprise layer, you can implement all the elements of your design system, such as themes, web fonts, icons, and design templates.
Depending on the depth of your design system, you can decide whether to use the default Enterprise layer or build your own layer.
Define branding and themes at the Enterprise level, and then share them across multiple applications in the application portfolio.
ヒント： Themes do not support inheritance. As a best practice, use a theme to define a high-level set of design tokens to be shared among multiple applications. If a theme requires specialization for a specific application, save and update a copy of the Enterprise layer theme into a higher Ruleset.
The following figure shows an example of the use of the Enterprise layer across systems. Each project reuses predefined components from the Enterprise layer. Those components can be used across distinct Channels:
Design tokens
The consistency of an application across platforms is critical. For example, the primary button styling on mobile should match with the primary button styling on desktop. To achieve consistency across platforms, quality design systems often employ design tokens, a strategy for designing and storing component styling aspects in one place so that the system can automatically generate platform-specific styling. The components in the Constellation library all make use of design tokens.
For advanced use cases and more granular styling of specific Constellation components, developers can modify the default values of each component's design tokens.
補足： For more information on design tokens, see Design tokens.
Check your knowledge with the following interaction:
このトピックは、下記のモジュールにも含まれています。
トレーニングを実施中に問題が発生した場合は、Pega Academy Support FAQsをご確認ください。