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 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)