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

[Vita-Meow]

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?

[dominikschreiber]

It's complicated.

"SAP Belize Deep" is the theme a customer can select (similar to "SAP Belize"), the only difference between "SAP Belize" and "SAP Belize Deep" is that the "dark part" is applied to the sapContrastPlus scope, not the sapContrast scope (see sap_belize_plus/.theming):

<div><!-- light in "SAP Belize" and "SAP Belize Deep" --></div>
<div class="sapContrast"><!-- dark in "SAP Belize", light in "SAP Belize Deep" --></div>
<div class="sapContrastPlus"><!-- light in "SAP Belize", dark in "SAP Belize Deep" --></div>
<div class="sapContrast sapContrastPlus"><!-- dark in "SAP Belize" and "SAP Belize Deep" --></div>

sap_belize and sap_belize_plus are the actual light (sap_belize) and dark (sap_belize_plus) parts of "SAP Belize" and "SAP Belize Deep". "SAP Belize" and "SAP Belize Deep" both contain sap_belize as well as sap_belize_plus, just in different scopes.

The worst thing is that if a customer selects "SAP Belize Deep", technically sap_belize_plus is selected (compare sap_belize/css_variables.css and sap_belize_plus/css_variables.css -- the only difference should be in the very last line, where sap_belize defines .sapContrast and sap_belize_plus defines .sapContrastPlus).

So: "SAP Belize Deep" is in the theming-base-content (as the label of sap_belize_plus), it's just not obvious.

[Vita-Meow]

It's complicated.

"SAP Belize Deep" is the theme a customer can select (similar to "SAP Belize"), the only difference between "SAP Belize" and "SAP Belize Deep" is that the "dark part" is applied to the sapContrastPlus scope, not the sapContrast scope (see sap_belize_plus/.theming):

<div><!-- light in "SAP Belize" and "SAP Belize Deep" --></div>
<div class="sapContrast"><!-- dark in "SAP Belize", light in "SAP Belize Deep" --></div>
<div class="sapContrastPlus"><!-- light in "SAP Belize", dark in "SAP Belize Deep" --></div>
<div class="sapContrast sapContrastPlus"><!-- dark in "SAP Belize" and "SAP Belize Deep" --></div>

sap_belize and sap_belize_plus are the actual light (sap_belize) and dark (sap_belize_plus) parts of "SAP Belize" and "SAP Belize Deep". "SAP Belize" and "SAP Belize Deep" both contain sap_belize as well as sap_belize_plus, just in different scopes.

The worst thing is that if a customer selects "SAP Belize Deep", technically sap_belize_plus is selected (compare sap_belize/css_variables.css and sap_belize_plus/css_variables.css -- the only difference should be in the very last line, where sap_belize defines .sapContrast and sap_belize_plus defines .sapContrastPlus).

So: "SAP Belize Deep" is in the theming-base-content (as the label of sap_belize_plus), it's just not obvious.

That's very helpful! thanks a lot !

[Vita-Meow]

hi @dominikschreiber ,
I see some systems using .sapContrastPlus, which means light in "SAP Belize", dark in "SAP Belize Deep", to distinguish these 2 themes, is that a standard behavior to do it like that ?

[dominikschreiber]

I don't get what you mean by "standard behavior".

Constrast scoping via sapContrast and sapContrastPlus has been introduced only for the Belize theme family, and (as far as I know) only to UI5- and Unified Rendering-based applications. It involves an infamous feature of the SAP-internal "theming engine", in which two full css's are built, then diffed against each other, and the diff is appended to one css with all selectors prefixed with a "scope" class (e.g. .sapContrast, .sapContrastPlus).

That was at a time where css custom properties were in their infancy and browser-support had to cover IE11 (where they are not supported even today). With custom properties this would have been a whole lot easier:

<style>
:root { --sapButton_Background: #eee; /* a light color */ }
.sapContrast{ --sapButton_Background: #111; /* a dark color */ }
.sapButton { background-color: var(--sapButton_Background); }
</style>
<button class="sapButton"><!-- uses #eee --></button>
<div class="sapContrast"><button class="sapButton"><!-- uses #111 --></button></div>

So this is no standard behavior as in "provided by the browser/html/css".