@sap-theming/theming-base-content

SAP Theming Base Content

This repository provides color, font and metric definitions of SAP themes to be used by application UIs and UI frameworks.

Description

The SAP Theming Base Content contains all necessary data to connect to the SAP global theming infrastructure. The content exposes the central set of colors, metrics and resources of a theme which can be connected by HTML based UI frameworks to get the right values for their specific CSS. The consumption is done by the usage of parameter sets exposed in files of the Base Content. When a HTML based UI framework uses the exposed parameters, it also benefits from the fact that it is integrated in the branding tool of SAP, the UI Theme Designer, allowing a customer to create his own custom theme based on SAP themes.

Installation

This repository contains all the source files and generated files a framework needs to connect to the theming infrastructure. There is no installation needed to consume the files. You can clone the repository or get wanted the ZIP/TAR from the release section of this repository. You can also consume the SAP theming Base Content via npm:

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.
2. the CSS Variables parameter set exposed by the CSS file css_variables.css. The parameter dependencies are resolved.
3. the SASS Variables parameter set exposed by the SCSS file sass_variables.scss. The parameter dependencies are resolved.
4. the Less CSS parameter set exposed by the less file less_variables.less. The parameter dependencies are resolved.
5. the JSON parameter set exposed by the less file variables.json. The parameter dependencies are resolved.
6. resources (fonts, images, SVGs etc.)

Consumption of CSS Parameters

The CSS parameters are exposed by a file css_variables.css in each theme folder e.g. Base/baseLib/sap_fiori_3/css_varables.css

After you have downloaded this file, you can use the calculated CSS parameter values.

Resource Parameters

CSS parameters which refer to an URL (e.g. 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.

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

SAP Custom Font Parameters

The custom fonts which have to be used for the specific theme are not declared by a font-face at-rule. There are CSS parameters pointing to the locations.

: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.

Consumption of LESS Parameters

Samples how to refer the parameters and integrate in theming infrastructure are documented in the module @sap-theming/theming-examples-less (not yet available).

Serve Resources in NodeJS (express Example)

You can require the theming-base-content module to get the location of the resources.

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

Contributing

This repository is containing the SAP Open Source Theming Content releases build internally. It is a channel for external distribution. This repository is not open for external contributions.