Fundamental Library Styles has dropped the IE11 support on its newest version release v0.23.0, resulting in some changes in the published CSS file.
Previously, the theme variables were included in bundles, and CSS files for each theme were distributed containing those fallback values. As a result, the styling files were containing the duplicated declaration. Despite the increased bundle size, another disadvantage is that the files contained the color values to a specific version of theming-base-content. This approach may create a discrepancy if the color values get updated in newer versions.
1. Removed duplicated code.
Since IE11 support dropped, there are no fallbacks in the new builds because the theming variables are not directly included inside the builds. The variable styles now rely on the theming-base-content package. With the newest release, the code looks more compact.
Example
For a better understanding, we are going to refer to the
Before:
After:
2. Reduced the bundle size.
In the previous example, the removal of the fallback variable resulted in reducing the size of the button.css file by more than 50%.
3. Variable values directly connected to theming-base-content.
With the removal of the fallback variable, the variable values are directly linked to the theming-base-content. In version 11.1.30 of theming-base-content, the value of
Those are some of the reasons why the fallback support was dropped, relying so on a single source for theming; the theming-base-content package.
Before:
After:
Before:
After:
Previously, the theme variables were included in bundles, and CSS files for each theme were distributed containing those fallback values. As a result, the styling files were containing the duplicated declaration. Despite the increased bundle size, another disadvantage is that the files contained the color values to a specific version of theming-base-content. This approach may create a discrepancy if the color values get updated in newer versions.
Improvements
1. Removed duplicated code.
Since IE11 support dropped, there are no fallbacks in the new builds because the theming variables are not directly included inside the builds. The variable styles now rely on the theming-base-content package. With the newest release, the code looks more compact.
Example
For a better understanding, we are going to refer to the
fd-button-split class. Initially, in v0.22.0 the styling file included the fallback variables which created duplicated code.Before:
Screenshot from v0.22.0
After:
Screenshot from v0.23.0
2. Reduced the bundle size.
In the previous example, the removal of the fallback variable resulted in reducing the size of the button.css file by more than 50%.
3. Variable values directly connected to theming-base-content.
With the removal of the fallback variable, the variable values are directly linked to the theming-base-content. In version 11.1.30 of theming-base-content, the value of
sapCriticalElementColor was changed from #e9730c to #df6e0. If the application didn't take a newer version of fundamental styles, it would have the old color as it was set as a fallback below. Instead of just pointing to the variable name and letting the theming-base-content package set the right color.Those are some of the reasons why the fallback support was dropped, relying so on a single source for theming; the theming-base-content package.
Changes
- If you have recently upgraded the Fundamental Library Styles you will need to add the following styles for the theming variable to map its values. Refer to this Breaking Changes for further information.
Before:
<link href='~fundamental-styles/dist/fundamental-styles-{themeName}.css' rel='stylesheet'>After:
<link href='~@sap-theming/theming-base-content/content/Base/baseLib/{themeName}/css_variables.css' rel='stylesheet'>
<link href='~fundamental-styles/dist/theming/{themeName}.css' rel='stylesheet'>
<link href='~fundamental-styles/dist/fundamental-styles.css' rel='stylesheet'>
- If you are using the Fundamental Library Styles in your Angular project, you will need to add the following modules in the styles array.
Before:
"styles": [
"src/styles.css",
"node_modules/fundamental-styles/dist/fundamental-styles.css"
]After:
"styles": [
"src/styles.css",
"node_modules/fundamental-styles/dist/theming/sap_fiori_3.css",
"node_modules/@sap-theming/theming-base-content/content/Base/baseLib/sap_fiori_3/css_variables.css",
"node_modules/fundamental-styles/dist/fundamental-styles.css"
]
- If you are using the Fundamental Library NGX, then the update of the theme will be done programmatically through the Theme Switcher API.
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.
- SAP Managed Tags:
1 Comment