v11.34.1

Bug Fixes

• sapContent_ImagePlaceholderForegroundColor has a 4.5:1 contrast against sapContent_ImagePlaceholderBackground in Morning Horizon

v11.34.0

Features

SAP-icons as SVGs: in addition to the woff2/woff/ttf versions of the v4 and v5 SAP-icons in Base/baseLib/baseTheme/fonts (v4) and Base/baseLib/sap_horizon/fonts (v5), the v5 SAP-icons now also exist as SVGs in the new library Base/icons (with only the themes of the Horizon and Quartz families). Themes in this new library have one CSS file: svg.css, that contains CSS custom properties with URLs to the individual icons, with the icon name prefixed with sapIcons_ (e.g. the URL for sap-icon://washing-machine is var(--sapIcons_washing-machine)). UI technologies using those icons are expected to resolve the URLs when applying SVGs, either as mask-image or with a fetch() to inline them into the document (for fetch(), be prepared for theme repositories that do not respond with the right Access-Control-Allow-Origin header); see the following example:

 const [themeId, themeRoot = 'https://cdn.jsdelivr.net/npm/@sap-theming/theming-base-content/content'] =
 	decodeURIComponent((new URLSearchParams(location.search || '')).get('sap-theme') || 'sap_horizon').split('@');

 const baseLib = document.createElement('link');
 baseLib.setAttribute('rel', 'stylesheet');
 baseLib.setAttribute('rel', `${themeRoot.replace(/\/$/, '')}/Base/baseLib/${themeId}/css_variables.css`);
 document.head.appendChild(baseLib);

 const sapIcons = document.createElement('link');
 sapIcons.setAttribute('rel', 'stylesheet');
 sapIcons.setAttribute('rel', `${themeRoot.replace(/\/$/, '')}/Base/icons/${themeId}/svg.css`);
 document.head.appendChild(sapIcons);

 const iconProperty = '--sapIcons_attachment-zip-file';

 // mask-image approach
 const iconDiv = document.createElement('div');
 iconDiv.style.width = 'var(--sapContent_IconHeight)';
 iconDiv.style.height = 'var(--sapContent_IconHeight)';
 iconDiv.style.backgroundColor = 'var(--sapContent_IconColor)';
 iconDiv.style.maskImage = `var(${iconProperty})`;
 iconDiv.style.maskSize = 'contain';
 document.body.appendChild(iconDiv);

 // fetch approach
 const iconUrl = getComputedStyle(document.documentElement).getPropertyValue(iconProperty);
 const iconRequest = await fetch(iconUrl);
 const iconText = await await iconRequest.text();
 const iconSvg = new DOMParser().parseFromString(iconText, 'image/svg+xml').documentElement;
 document.body.appendChild(iconSvg);

Bug Fixes

sapButton_Selected_TokenBorderWidth is a delta to sapButton_BorderWidth in all themes, i.e. it is changed to 0.0625 * @sapContent_GridSize in Morning and Evening Horizon (https://github.wdf.sap.corp/themedesigner/theming-content/pull/1189)

v11.33.0

Deprecations

• sapButton_Emphasized_FontWeight is protected and deprecated; use font-family: var(--sapButton_Emphasized_FontFamily); font-weight: normal; instead
• sapHighlightTextColor is protected and deprecated; themes of the Horizon- and Quartz family do not use this parameter

Features

• BusinessSuiteInAppSymbols v2.091/v1.091 with new icon e13d (icon-zoom-to-fit)

Bug Fixes

• sapShell_BackgroundGradient, although it is deprecated, is made available as CSS custom property after it had accidentally been removed with 11.3.0
• Only parameters of type fontFamilies are tagged as "Font", so that the "Typography" filter in the theme designer does not show "false positives"
• sapContent_…_HeaderShadow parameters are no longer tagged as "Dimension"
• Descriptions of the sapTile_… parameters are improved

v11.32.3

Deprecations

• sapShell_BackgroundPatternColor is protected and deprecated; themes of the Horizon- and Quartz family do not have a background pattern

Bug Fixes

• sapHoverColor and some parameters of the sapChart namespace are made available for theming in themes of the Horizon and Quartz families, so that they no longer conceal the connection between other themable parameters

v11.32.2

Bug Fixes

• Tagged the Icon parameters so you can filter it in the UIThemeDesigner via the tag 'Icon'
• sapContent_IconHeight is no longer available for theming (i.e. "protected") in all themes
• Colors in high-contrast themes of older theme families are consistent with their counterpart of the Horizon theme family
• Remove sapShellColor from the mobile guides because of design changes in SAP Mobile Start

v11.32.1

Features

• Semantic parameters for International Business Communication Standards (IBCS) charts: sapChart_IBCS_Actual for values of the actual period, sapChart_IBCS_Previous for values of the previous period, sapChart_IBCS_Good and sapChart_IBCS_Bad for good and bad values

Bug Fixes

• SAP-icons v5.13 with an updated e1bb (sap-logo-shape) that maintains the distinctive, sharp-cornered design of the SAP logo
• sapButton_Emphasized_Background is slightly darker in Quartz Dark, to achieve a 4.5:1 contrast against sapButton_Emphasized_TextColor
• sapTile_SeparatorColor is transparent in themes of the Horizon theme family, to be consistent with the Tiles and Cards specification
• sapShell_InteractiveBackground is mapped to sapField_Background in sap_hcb, to be consistent with all other high-contrast themes
• the sapIndicationColor_ parameters of sap_hcb have values that are consistent with all other high-contrast themes

v11.31.1

Bug Fixes

• sapChart_Sequence_2_Minus4 is slightly darker than sapChart_Sequence_2_Minus3 in Morning Horizon, to make them distinguishable
• sapChart_Sequence_11_Minus5 is darkened in Morning Horizon, to improve contrast

v11.31.0

Features

• SAP-icons v5.12 and v4.24 with new icons e2aa (smart-watch) and e2ab (vr-glasses)

Bug Fixes

• sapShell_BorderColor is distinguishable from sapShellColor, it is slightly darker in Morning Horizon and slightly lighter in Evening Horizon
• Descriptions of font-family parameters are improved, to reflect that these parameters accept a prioritized list of font family names
• sapContent_Lite_Shadow is none in low-contrast themes
• The different sapContent_…_HeaderShadow parameters use the values for low-contrast dark themes in sap_belize_plus
• sapChart_Sequence_6_Plus1 is slightly lighter in Quartz and legacy themes, to match the specification
• sapButton_ReadOnly_TokenBackground is sapButton_TokenBackground in Quartz Dark, to match the specification
• The color expressions of the shades of sapChart_Sequence_1 in Morning Horizon are simplified, leading to slightly more saturated colors
• sapChart_Sequence_1_BorderColor is mapped to a darker shade of sapChart_Sequence_1 in Morning Horizon, to increase contrast against sapChart_Sequence_1_TextColor

v11.30.1

Deprecations

sapContent_Margin_Tiny, sapContent_Margin_Small, sapContent_Margin_Medium and sapContent_Margin_Large are deprecated and should no longer be used. For a responsive margin, use sapContent_Margin_S, …_M, …_L and …_XL instead. For fixed-width margins use sapContent_Space_Tiny, …_Small, …_Medium and …_Large instead.

Features

• BusinessSuiteInAppSymbols v2.090/v1.090 with new icons e13a (icon-all-spaces-pin), e13b (icon-handling-units) and e13c (icon-packing-work-center)
• Parameters for a responsive margin sapContent_Margin_S, …_M, …_L and …_XL that should've been introduced with 11.22.0 but were accidentally introduced as sapContent_Margin_Tiny, …_Small, …_Medium and …_Large

Bug Fixes

• sapSlider_Selected_Dimension has the correct values instead of sapDefault_Dimension in all themes
• sapChart_LineColor_2 had the specified value for dark themes in light themes and the other way around, this has been flipped back so that it is darken(@sapChart_LineColor_1, 32) in light themes (Quartz Light and older) and lighten(@sapChart_LineColor_1, 35) in dark themes (Quartz Dark and older)

v11.29.3

Bug Fixes

• Revert removal of /*!SAP_POSTPROCESS_REDUCE…*/ (from v11.29.0)
• Fix default fallback strategy of SAP base themes
• css_variables.css contains @font-face definitions for SAP-icons-TNT and SAP-icons-Business-Suite