Fundamental Library has recently adapted all of the components to a fresh new visual theme of SAP Fiori, Horizon. Both
Fundamental Library Styles v0.24 and
Fundamental Library for Angular v0.35 now fully support the Horizon themes.
What is Horizon?
The new modern Horizon theme is built with a focus on transforming the components into a fresh, friendly look with a new vibrant color palette that meets the Web Content Accessibility Guidelines standards. The theme is an evolution of the SAP Fiori design system, ensuring an easy and coherent experience across the web. The design changes are easily reflected on the smother and rounder corners of the components and the change of some of the icons. Check the
Fundamental Library Icon Update blog post to learn more about those changes.
Horizon comes with a family of themes:
- Morning Horizon (light version)
- Evening Horizon (dark version)
- High Contrast White (accessibility version)
- High Contrast Black (accessibility version)
How to use the Horizon themes?
Fundamental Library Styles
The developers should follow the steps below to switch their project to one of the Horizon themes.
- Make sure you have updated the Fundamental Library Styles version to 0.24
- Include the two CSS variables files:
<link href='https://unpkg.com/@sap-theming/theming-base-content/content/Base/baseLib/{themeName}/css_variables.css' rel='stylesheet'>
<link href='https://unpkg.com/fundamental-styles@{versionNumber}/dist/theming/{themeName}.css' rel='stylesheet'>
- Add one of the Horizon theme values in
themeName:
sap_horizon,
sap_horizon_dark,
sap_horizon_hcb,
sap_horizon_hcw
Fundamental Library NGX
- Make sure you have updated the Fundamental Library NGX version to 0.35.
- Add the code below in the angular.json file.
{
"glob": "**/css_variables.css",
"input": "./node_modules/@sap-theming/theming-base-content/content/Base/baseLib/themeName",
"output": "./assets/theming-base/"
},
{
"glob": "**/*",
"input": "./node_modules/fundamental-styles/dist/theming/themeName",
"output": "./assets/fundamental-styles-theming/themeName"
},
- Add one of the Horizon theme values in
themeName:
sap_horizon,sap_horizon_dark, sap_horizon_hcb, sap_horizon_hcw
If the application should have the ability to change theme fonts, additional changes are needed:
- Create
[themeName]_fonts.css files in your application folder;
- Adjust
styles array in angular.json to include these css files during application build:
{
"input": "{path to local theming folder}/themeName.css",
"inject": false,
"bundleName": "themeName"
},
- Add one of the Horizon theme values in
themeName:
sap_horizon,sap_horizon_dark, sap_horizon_hcb, sap_horizon_hcw
Follow the Fundamental Library Styles Community to stay tuned for the updates. If you have any questions feel free to post them in the comment section below or in SAP Community Q&A.
