npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@sap-theming/theming-base-content

v11.24.0

Published

Theming Base Content

Downloads

280,558

Readme

REUSE status

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.