sap / theming-base-content

Color, font and metric definitions of SAP themes to be used by application UIs and UI frameworks.

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.

theming-base-content's Issues

Missing 72-Italic.woff2

I cannot see the 72-Italic.woff2 in the following folder,
https://github.com/SAP/theming-base-content/tree/master/content/Base/baseLib/baseTheme/fonts

Icons not centered vertically

The .sap-icon--arrow-right and arrow-left and some other icons are not vertically centered which results to problems when trying to align them with other ui elements

here is a basic example:
https://plnkr.co/edit/kAUolEPWMg1lRU4S?open=lib%2Fscript.js&preview

This could be a duplicate of SAP/fundamental-styles#4532 I'm not sure which repository is the correct one for this issue

bug: emphasized button color in evening horizon

The current color defined for emphasized button in evening horizon theme is #eaecee.

This color produces contrast ratio of 3.85:1 which is not WCAG compliant.

https://github.com/SAP/theming-base-content/blob/master/content/Base/baseLib/sap_horizon_dark/css_variables.css

The expected color is #ffffff as described in the official Fiori specification.

https://wiki.one.int.sap/wiki/pages/viewpage.action?pageId=2650676574#id-14Button(Horizon)-EmphasizedButton

Horizon focus color

Hello,

We've noticed that the Horizon Focus Color is not matching when compared to the Design System specification.

Design system says #0032A5 for --sapContent_FocusColor (https://wiki.one.int.sap/wiki/pages/viewpage.action?pageId=2650676579)
But in content/Base/baseLib/sap_horizon/variables.json we have "sapContent_FocusColor": "#0070f2"

Is this expect or is there really a mismatch?

please use line breaks in supplied source files

Many of the supplied source files have line breaks removed, making them impossible to parse. See:

• https://github.com/SAP/theming-base-content/blob/master/content/Base/baseLib/sap_fiori_3/css_variables.css
• https://github.com/SAP/theming-base-content/blob/master/content/Base/baseLib/sap_fiori_3/sass_variables.scss
• https://github.com/SAP/theming-base-content/blob/master/content/Base/baseLib/sap_fiori_3/preview-RTL.css

Can you provide them as readable files and let the consumer tooling (webpack etc) handle minification, or perhaps provide both compressed and uncompressed variations?

Corrupt 11.1.48 tarball

Hi Team,

We recently tried to upgrade to @sap-theming/[email protected] and noticed the following error during the build. We ended up using the previous patch version 11.1.47 instead in order to unblock our pipeline. Is it possible that the 11.1.48 tarball file is really corrupt?

16:04:32 INFO - npm WARN tarball tarball data for @sap-theming/[email protected] (sha512-Q2rMoEN+6tjnfbhlQ2a+WybhAWj/0RuhWUb3vSzI/iwCkGPGtz3k8HhtU1jtmAPjRCiJQSEmiE2HMv3Av/7Y7Q==) seems to be corrupted. Trying one more time.

16:04:41 INFO - npm WARN tarball tarball data for @sap-theming/[email protected] (sha512-Q2rMoEN+6tjnfbhlQ2a+WybhAWj/0RuhWUb3vSzI/iwCkGPGtz3k8HhtU1jtmAPjRCiJQSEmiE2HMv3Av/7Y7Q==) seems to be corrupted. Trying one more time.

16:04:52 INFO -

16:04:52 ERROR - code EINTEGRITY

16:04:52 ERROR - Verification failed while extracting @sap-theming/[email protected]:

16:04:52 ERROR - Verification failed while extracting @sap-theming/[email protected]:

16:04:52 ERROR - sha512-Q2rMoEN+6tjnfbhlQ2a+WybhAWj/0RuhWUb3vSzI/iwCkGPGtz3k8HhtU1jtmAPjRCiJQSEmiE2HMv3Av/7Y7Q== integrity checksum failed when using sha512: wanted sha512-Q2rMoEN+6tjnfbhlQ2a+WybhAWj/0RuhWUb3vSzI/iwCkGPGtz3k8HhtU1jtmAPjRCiJQSEmiE2HMv3Av/7Y7Q== but got sha512-3B+tB85OXzpCk26WOkeZBnP3c4fEwAR0giKC4UBYYOmokDxSMXn3tfiCkg6Y06I2C7aOyQDVB7Uns6arKmaZWQ==. (15471810 bytes)

bug(horizon): radio button border-style resolved to none

Description

The next variables resolved to none in horizon evening/morning themes:

• sapField_WarningBorderStyle
• sapField_InvalidBorderStyle
• sapField_SuccessBorderStyle
• sapField_InformationBorderStyle

That leads to the missing border of the radio button circle

Version

11.1.38

Can I delete some Unnecessary font-face declaration in content/Base/baseLib/sap_belize_plus/css_variables.css

Typo in README.md

There is a double , in the Description section:

uses the exposed parameters,, it also benefits from the fact that

Should be:

uses the exposed parameters, it also benefits from the fact that

Feedback icon is missing in 'SAP-icons' font

We would like to use the feedback icon from openui5 but seems like it's missing in SAP-icons font when I check all icons on Fundamental Library Styles page.

bug: emphasized button color in evening horizon

Dear maintainers,

for Evening Horizon, the background color of the emphasised button is set to the SAP brand color.
I do believe this is a bug and that the color should actually be equal to @sapHighlightColor or @sapPrimary2 (these are identical - I'm not too familiar with the entire design system; what matters to me is that it ends up being #4db1ff instead of #0070f2).

I also do believe that this bug wasn't spotted previously because @sapHighlightColor and @sapBrandColor are identical for Morning Horizon - but they aren't for Evening Horizon.

Invalid css in css_variables.css

Hi colleagues,

in my opinion, the CSS Variable --sapThemeMetaData-Base-baseLib in the css_variables.css is invalid in all themes (I guess there are some quotes missing around the json data):

theming-base-content/content/Base/baseLib/sap_fiori_3/css_variables.css

Line 9 in 72f3764

:root{--sapThemeMetaData-Base-baseLib:{"Path": "Base.baseLib.sap_fiori_3.css_variables", "PathPattern": "/%frameworkId%/%libId%/%themeId%/%fileId%.css", "Extends": ["sap_base_fiori","baseTheme"], "Tags": ["Fiori_3","LightColorScheme"], "FallbackThemeId": "sap_belize", "Engine": {"Name": "theming-engine", "Version": "1.69.2"}, "Version": { "Build": "11.1.37.20220329125434", "Source": "11.1.37"}};}

The W3C CSS Validator Service is also reporting errors for this file.

This is e.g. causing errors in the production build of create-react-app when trying to import the CSS Variable files directly.

cc @vladitasev

The issue about upgrading the version from 11.1.34 to 11.1.40

The clean-css package is utilized in our project. When this package(theming-base-content) is upgraded to 11.1.40.
During the building process, there will be an issue:
Angular: 11.2.14
clean-css: 5.3.1

[exec] -- PLUGIN_ERROR-angular --
[exec] TypeError: Cannot read properties of undefined (reading 'push')
[exec] at intoTokens (..../.pnpm/[email protected]/node_modules/clean-css/lib/tokenizer/tokenize.js:434:17)

Could you please help with this?

Why there is no SAP Belize Deep in theming-base-content, Only SAP Belize Plus?

Hi Guys, I saw in a lot of SAP systems, there does have theme support for SAP Belize Deep, why there is no such concept in SAP theming?

CSS variable files should differentiate between variables and variables that load assets

If we attempt to use a css_variables.css file (any theme) within a different library, we are getting a huge bundle size (MB instead of KB) when bundling. It is seeing the --sapFont* variables which have a url for the actual font asset and it's including all the font files in the bundle.

Our libraries will be pursuing a path to make fonts and icons globally available on the page, but to support that, we need a "minimal" CSS variables file that will not load any additional assets.

If CSS variables are needed for fonts, is there a way to break those in a separate file and then use Less importing to build them up? Maybe something like:

css_variables.less

@import "../baseTheme/css_variables.less";
@import "base-colors.less";
@import "base-metrics.less";
@import "base-fonts.less";

css_variables_min.less

@import "../baseTheme/css_variables.less";
@import "base-colors.less";
@import "base-metrics.less";

And then consumers that are handling fonts globally can just import css_variables_min.css.

bug: --sapFontHeaderFamily in High Contrast White theme seems to be incorrect

In css_variables.css from sap_horizon_hcw, the --sapFontHeaderFamily variable is defined as follows:
--sapFontHeaderFamily: "72", "72full", Arial, Helvetica, sans-serif;

While in sap_horizon_hcb, as well as sap_horizon and sap_horizon_dark, it is defined like this:
--sapFontHeaderFamily: "72-Bold", "72-Boldfull", "72", "72full", Arial, Helvetica, sans-serif;
Which looks like the correct definition.

Version: 11.15.0

bug: loading placeholders wrong colors

Description

Wrong colors of loading placeholders.

Fiori, Horizon (default light themes)

--sapContent_Placeholderloading_Background
In wiki: #E0E0E0
In library: #CCCCCC

--sapContent_Placeholderloading_Gradient
In wiki: linear-gradient(to right, #e0e0e0 0%, #e0e0e0 35%, #d3d3d3 50%, #e0e0e0 65%, #e0e0e0 100%)
in library: linear-gradient(to right, #cccccc 0%, #cccccc 20%, #999999 50%, #cccccc 80%, #cccccc 100%)