Intro

These visual specifications should serve as a guideline for Front-End Developers on how implement this control.

System Information Bar

Test

Value Description Details
A Test background: --sapShell_Category_3_Background
border: --sapShell_Category_3_BorderColor
text color: --sapContent_ContrastTextColor
icon: sap-icon://stethoscope
icon color: --sapContent_ContrastIconColor
text/icon shadow: --sapShell_Category_3_TextShadow

Development

Value Description Details
B Development background: --sapShell_Category_4_Background
border: --sapShell_Category_4_BorderColor
text color: --sapContent_ContrastTextColor
icon: sap-icon://source-code
icon color: --sapContent_ContrastIconColor
text/icon shadow: --sapShell_Category_4_TextShadow

Production

Value Description Details
C Production background: --sapShell_Category_1_Background
border: --sapShell_Category_1_BorderColor
text color: --sapContent_ContrastTextColor
icon: sap-icon://begin
icon color: --sapContent_ContrastIconColor
text/icon shadow: --sapShell_Category_1_TextShadow

Custom

Value Description Details
D Custom background: --sapShell_Category_7_Background
border: --sapShell_Category_7_BorderColor
text color: --sapContent_ContrastTextColor
text shadow: --sapShell_Category_7_TextShadow

Custom

Value Description Details
E Custom background: --sapShell_Category_2_Background
border: --sapShell_Category_2_BorderColor
text color: --sapContent_ContrastTextColor
text shadow: --sapShell_Category_2_TextShadow

Custom

Value Description Details
F Custom background: --sapShell_Category_11_Background
border: --sapShell_Category_11_BorderColor
text color: --sapContent_ContrastTextColor
text shadow: --sapShell_Category_11_TextShadow

Custom

Value Description Details
G Custom background: --sapShell_Category_5_Background
border: --sapShell_Category_5_BorderColor
text color: --sapContent_ContrastTextColor
text shadow: --sapShell_Category_5_TextShadow

Custom

Value Description Details
H Test background: --sapShell_Category_8_Background
border: --sapShell_Category_8_BorderColor
text color: --sapContent_ContrastTextColor
text shadow: --sapShell_Category_8_TextShadow

Custom

Value Description Details
I Custom background: --sapShell_Category_16_Background
border: --sapShell_Category_16_BorderColor
text color: --sapContent_ContrastTextColor
text shadow: --sapShell_Category_16_TextShadow

Custom

Value Description Details
J Custom background: --sapShell_Category_6_Background
border: --sapShell_Category_6_BorderColor
text color: --sapContent_ContrastTextColor
text shadow: --sapShell_Category_6_TextShadow

Custom

Value Description Details
K Test background: --sapShell_Category_9_Background
border: --sapShell_Category_9_BorderColor
text color: --sapContent_ContrastTextColor
text shadow: --sapShell_Category_9_TextShadow

Custom

Value Description Details
L Custom background: --sapShell_Category_12_Background
border: --sapShell_Category_12_BorderColor
text color: --sapContent_ContrastTextColor
text shadow: --sapShell_Category_12_TextShadow

Custom

Value Description Details
M Custom background: --sapShell_Category_10_Background
border: --sapShell_Category_10_BorderColor
text color: --sapContent_ContrastTextColor
text shadow: --sapShell_Category_3_TextShadow

Color Palette

Custom

Value Description Details
A Color Palette UI5 Web Components: ColorPalette, Label with Input
Padding between elements: 0.5rem