![]() The underlying Bootstrap styling still uses color calculations based on the SCSS variables $primary and $secondary.įor that reason these variables have to be set with actual values so the default Bootstrap stylings can be generated. The standard Intershop PWA SCSS styling was adapted to no longer use such functions. Therefore, SCSS functions like darken() and lighten() do not work with values like var(-corporate-primary). SCSS color calculations do not work with CSS custom properties, they need real values. With the introduction of such CSS custom properties the values of these properties can be overridden at runtime, in our case through defining them as inline styles at the html tag. text-color-corporate: var(-corporate-primary) corporate-shadow: #ff832680 // with alpha transparency font-family-regular: 'robotoregular', 'Helvetica', 'Arial', sans-serif logo: url('/assets/themes/b2c/img/logo.png') In the properties.scss then actual values are assigned to these CSS custom properties. $text-color-corporate: var(-text-color-corporate) $CORPORATE-SHADOW: var(-corporate-shadow) $CORPORATE-SECONDARY: var(-corporate-secondary) $CORPORATE-PRIMARY: var(-corporate-primary) $font-family-regular: var(-font-family-regular) $text-color-corporate: $CORPORATE-PRIMARY ![]() $CORPORATE-SHADOW: #7f9ecc80 // with alpha transparency $CORPORATE-DARK: darken($CORPORATE-PRIMARY, 20%) $CORPORATE-LIGHT: lighten($CORPORATE-PRIMARY, 10%) ![]() $CORPORATE-SECONDARY: darken($CORPORATE-PRIMARY, 10%) $font-family-regular: 'robotoregular', 'Helvetica', 'Arial', sans-serif While the b2b theme uses a variables.scss that directly assigns property values to the SCSS variables, the b2c theme assigns CSS custom properties to the SCSS variables (see variables.scss).ī2b - variables.scss $logo: url('/assets/themes/b2b/img/logo.png') scss files are the same for the standard Intershop PWA. The difference between the default b2b theme and the configurable b2c theme lies in the way the SCSS variables are initialized. This differs from compiling different themes at build time, e.g., with SCSS variables and using them for different channels through the Multi Site Configuration. This way only one configurable theme is needed at build time that can then be adapted through an ICM back office CMS Configuration component on channel or application level. With the Intershop PWA 4.1 the two standard themes b2b and b2c where refactored so that the b2c theme could be changed into a configurable theme.Ĭonfigurable in this context means adaptable at runtime using CSS custom properties (CSS variables). This is okay for a limited number of themes (2-3) but will become problematic the higher the number gets.Ī solution could be to use only one theme that can be configured for the different channels/brands at runtime. Multiple themes (e.g., for different channels or brands) increase the build and deployment time of the PWA SSR container. To use this feature, the feature toggle extraConfiguration needs to be enabled. This will add the theme to the according files and create styling-specific folders and files, see Customizations - Start Customization.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |