sap / theming-base-content Goto Github PK

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?

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

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

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?

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.

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)

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.

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

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

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?

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?

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

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

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

The icon labelled javascript displays the logo of Java.

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

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

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.