Theming Base Content
npm install @sap-theming/theming-base-content
This repository provides color, font and metric definitions of SAP themes to be used by application UIs and UI frameworks.
SAP theming Base Content via npm:sh
npm install @sap-theming/theming-base-content
`Usage
The SAP Theming Base Content is structured in the “content” of the project folder
The Base Framework content is backward compatible. Therefore, the latest released version can be used for all older versions.Content
The SAP Theming Base Content contains
1) the Less CSS parameter set exposed in the file base.less. The parameters values are defined by CSS values or calculation formulas with selcontained dependencies.css_variables.css in each theme folderBase/baseLib/sap_fiori_3/css_varables.cssAfter you have downloaded this file, you can use the calculated CSS parameter values.
sapCompanyLogo) are handled a bit different. The CSS variables are applied as a simple string token replacement in the browser. Therefore, there is no URL resolution based on the location of the parameter definition. As a workaround, we introduced a CSS class for each resource CSS parameter that can be used by the consuming HTML.``css`
...
.background-image--sapCompanyLogo {
background-image: var(--sapCompanyLogo);
}
...
The class selector contains the declaration type of the class property and the name of the CSS parameter.
`css`
:root {
...
--sapFontUrl_72_Regular_woff2: url('../../../Base/baseLib/baseTheme/fonts/72-Regular.woff2');
--sapFontUrl_72_Regular_woff: url('../../../Base/baseLib/baseTheme/fonts/72-Regular.woff');
--sapFontUrl_72_...
}
Unfortunately, these parameters cannot be used to define a font-face declaration. It seems that the font-face is not part of the “:root” scope. Therefore, it is necessary to define the font declaration you need in your own CSS.
(not yet available).Serve Resources in NodeJS (express Example)
You can require the theming-base-content module to get the location of the resources.
`js
'use strict';const express = require("express");
const app = express();
const baseContentResourcePath = require('@sap-theming/theming-base-content').resourcePath;
app.use(express.static(baseContentResourcePath));
app.listen(3000, () => console.log('Try http://localhost:3000/Base/baseLib/baseTheme/fonts/72-Regular.woff2'));
``