feat(styles): new BTP Tool Header [ci visual]

SAP · Sep 7, 2023 · 45dc562 · 45dc562
1 parent 6c4d34e
commit 45dc562
Show file tree

Hide file tree

Showing 32 changed files with 1,058 additions and 662 deletions.
diff --git a/package.json b/package.json
@@ -170,4 +170,4 @@
     "fast-deep-equal": "^3.1.3",
     "jsdom": "^20.0.1"
   }
-}
+}
diff --git a/packages/styles/src/theming/common/tool-header/_sap_horizon.scss b/packages/styles/src/theming/common/tool-header/_sap_horizon.scss
@@ -0,0 +1,3 @@
+:root {
+  --fdToolHeader_Border_Color: transparent;
+}
diff --git a/packages/styles/src/theming/common/tool-header/_sap_horizon_hc.scss b/packages/styles/src/theming/common/tool-header/_sap_horizon_hc.scss
@@ -0,0 +1,3 @@
+:root {
+  --fdToolHeader_Border_Color: var(--sapShell_BorderColor);
+}
diff --git a/packages/styles/src/theming/sap_fiori_3.scss b/packages/styles/src/theming/sap_fiori_3.scss
@@ -44,6 +44,7 @@
 @import "./common/pagination/sap_fiori";
 @import "./common/search-field/sap_fiori";
 @import "./common/navigation-menu/sap_fiori";
+@import "./common/tool-header/sap_horizon";
 @import "./sap_fiori_3/css_variables";
 
 :root {

diff --git a/packages/styles/src/theming/sap_fiori_3/_css_variables.scss b/packages/styles/src/theming/sap_fiori_3/_css_variables.scss
@@ -862,6 +862,7 @@
   --sapMenu_Hover_Background: var(--sapList_Hover_Background);
   --sapMenu_Active_Background: var(--sapList_Active_Background);
   --sapMenu_Selected_Background: var(--sapList_Hover_SelectionBackground);
+  --sapToolHeader_Shadow1: 0 0 0.125rem 0 rgba(0, 0, 0, 0.16), 0 0.5rem 1rem 0 rgba(0, 0, 0, 0.16);
 }
 
 .background-image--sapCompanyLogo {

diff --git a/packages/styles/src/theming/sap_fiori_3_dark.scss b/packages/styles/src/theming/sap_fiori_3_dark.scss
@@ -44,6 +44,7 @@
 @import "./common/pagination/sap_fiori";
 @import "./common/search-field/sap_fiori";
 @import "./common/navigation-menu/sap_fiori";
+@import "./common/tool-header/sap_horizon";
 @import "./sap_fiori_3_dark/css_variables";
 
 :root {

diff --git a/packages/styles/src/theming/sap_fiori_3_dark/_css_variables.scss b/packages/styles/src/theming/sap_fiori_3_dark/_css_variables.scss
@@ -862,6 +862,7 @@
   --sapMenu_Hover_Background: var(--sapList_Hover_Background);
   --sapMenu_Active_Background: var(--sapList_Active_Background);
   --sapMenu_Selected_Background: var(--sapList_Hover_SelectionBackground);
+  --sapToolHeader_Shadow1: 0 0 0.125rem 0 rgba(0, 0, 0, 0.16), 0 0.5rem 1rem 0 rgba(0, 0, 0, 0.32);
 }
 
 .background-image--sapCompanyLogo {

diff --git a/packages/styles/src/theming/sap_fiori_3_hcb.scss b/packages/styles/src/theming/sap_fiori_3_hcb.scss
@@ -51,6 +51,7 @@
 @import "./common/pagination/sap_fiori";
 @import "./common/search-field/sap_fiori_hc";
 @import "./common/navigation-menu/sap_fiori_hc";
+@import "./common/tool-header/sap_horizon_hc";
 @import "./sap_fiori_3_hcb/css_variables";
 
 :root {

diff --git a/packages/styles/src/theming/sap_fiori_3_hcb/_css_variables.scss b/packages/styles/src/theming/sap_fiori_3_hcb/_css_variables.scss
@@ -862,6 +862,7 @@
   --sapMenu_Hover_Background: var(--sapList_Hover_Background);
   --sapMenu_Active_Background: var(--sapList_Active_Background);
   --sapMenu_Selected_Background: var(--sapList_SelectionBackgroundColor);
+  --sapToolHeader_Shadow1: 0 0 0 0.0625rem #fff, 0 0.5rem 1rem 0 rgba(255, 255, 255, 0.16);
 }
 
 .background-image--sapCompanyLogo {

diff --git a/packages/styles/src/theming/sap_fiori_3_hcw.scss b/packages/styles/src/theming/sap_fiori_3_hcw.scss
@@ -45,6 +45,7 @@
 @import "./common/pagination/sap_fiori";
 @import "./common/search-field/sap_fiori_hc";
 @import "./common/navigation-menu/sap_fiori_hc";
+@import "./common/tool-header/sap_horizon_hc";
 @import "./common/step-input/sap_fiori";
 
 :root {

diff --git a/packages/styles/src/theming/sap_fiori_3_hcw/_css_variables.scss b/packages/styles/src/theming/sap_fiori_3_hcw/_css_variables.scss
@@ -862,6 +862,7 @@
   --sapMenu_Hover_Background: var(--sapList_Hover_Background);
   --sapMenu_Active_Background: var(--sapList_Active_Background);
   --sapMenu_Selected_Background: var(--sapList_SelectionBackgroundColor);
+  --sapToolHeader_Shadow1: 0 0 0 0.0625rem #000, 0 0.5rem 1rem 0 rgba(0, 0, 0, 0.16);
 }
 
 .background-image--sapCompanyLogo {

diff --git a/packages/styles/src/theming/sap_fiori_3_light_dark.scss b/packages/styles/src/theming/sap_fiori_3_light_dark.scss
@@ -43,6 +43,7 @@
 @import "./common/pagination/sap_fiori";
 @import "./common/search-field/sap_fiori";
 @import "./common/navigation-menu/sap_fiori";
+@import "./common/tool-header/sap_horizon";
 @import "./sap_fiori_3_light_dark/css_variables";
 
 :root {

diff --git a/packages/styles/src/theming/sap_fiori_3_light_dark/_css_variables.scss b/packages/styles/src/theming/sap_fiori_3_light_dark/_css_variables.scss
@@ -1730,6 +1730,7 @@
     --sapMenu_Hover_Background: var(--sapList_Hover_Background);
     --sapMenu_Active_Background: var(--sapList_Active_Background);
     --sapMenu_Selected_Background: var(--sapList_Hover_SelectionBackground);
+    --sapToolHeader_Shadow1: 0 0 0.125rem 0 rgba(0, 0, 0, 0.16), 0 0.5rem 1rem 0 rgba(0, 0, 0, 0.16);
   }
 
   .background-image--sapCompanyLogo {

diff --git a/packages/styles/src/theming/sap_horizon.scss b/packages/styles/src/theming/sap_horizon.scss
@@ -46,6 +46,7 @@
 @import "./common/pagination/sap_horizon";
 @import "./common/search-field/sap_horizon";
 @import "./common/navigation-menu/sap_horizon";
+@import "./common/tool-header/sap_horizon";
 @import "./sap_horizon/css_variables";
 
 :root {

diff --git a/packages/styles/src/theming/sap_horizon/_css_variables.scss b/packages/styles/src/theming/sap_horizon/_css_variables.scss
@@ -862,6 +862,7 @@
   --sapMenu_Hover_Background: var(--sapList_Hover_Background);
   --sapMenu_Active_Background: var(--sapList_Active_Background);
   --sapMenu_Selected_Background: var(--sapList_Hover_SelectionBackground);
+  --sapToolHeader_Shadow1: 0 0 0.125rem 0 rgba(34, 53, 72, 0.16), 0 0.5rem 1rem 0 rgba(34, 53, 72, 0.16);
 }
 
 .background-image--sapCompanyLogo {

diff --git a/packages/styles/src/theming/sap_horizon_dark.scss b/packages/styles/src/theming/sap_horizon_dark.scss
@@ -46,6 +46,7 @@
 @import "./common/pagination/sap_horizon";
 @import "./common/search-field/sap_horizon";
 @import "./common/navigation-menu/sap_horizon";
+@import "./common/tool-header/sap_horizon";
 @import "./sap_horizon_dark/css_variables";
 
 :root {

diff --git a/packages/styles/src/theming/sap_horizon_dark/_css_variables.scss b/packages/styles/src/theming/sap_horizon_dark/_css_variables.scss
@@ -862,6 +862,7 @@
   --sapMenu_Hover_Background: var(--sapList_Hover_Background);
   --sapMenu_Active_Background: var(--sapList_Active_Background);
   --sapMenu_Selected_Background: var(--sapList_Hover_SelectionBackground);
+  --sapToolHeader_Shadow1: 0 0 0.125rem 0 rgba(0, 0, 0, 0.16), 0 0.5rem 1rem 0 rgba(0, 0, 0, 0.32);
 }
 
 .background-image--sapCompanyLogo {

diff --git a/packages/styles/src/theming/sap_horizon_hcb.scss b/packages/styles/src/theming/sap_horizon_hcb.scss
@@ -46,6 +46,7 @@
 @import "./common/pagination/sap_horizon";
 @import "./common/search-field/sap_horizon_hc";
 @import "./common/navigation-menu/sap_horizon_hc";
+@import "./common/tool-header/sap_horizon_hc";
 @import "./sap_horizon_hcb/css_variables";
 
 :root {

diff --git a/packages/styles/src/theming/sap_horizon_hcb/_css_variables.scss b/packages/styles/src/theming/sap_horizon_hcb/_css_variables.scss
@@ -862,6 +862,7 @@
   --sapMenu_Hover_Background: var(--sapList_Hover_Background);
   --sapMenu_Active_Background: var(--sapList_Active_Background);
   --sapMenu_Selected_Background: var(--sapList_SelectionBackgroundColor);
+  --sapToolHeader_Shadow1: 0 0 0 0.0625rem #fff, 0 0.5rem 1rem 0 rgba(255, 255, 255, 0.16);
 }
 
 .background-image--sapCompanyLogo {

diff --git a/packages/styles/src/theming/sap_horizon_hcw.scss b/packages/styles/src/theming/sap_horizon_hcw.scss
@@ -47,6 +47,7 @@
 @import "./common/pagination/sap_horizon";
 @import "./common/search-field/sap_horizon_hc";
 @import "./common/navigation-menu/sap_horizon_hc";
+@import "./common/tool-header/sap_horizon_hc";
 @import "./sap_horizon_hcw/css_variables";
 
 :root {

diff --git a/packages/styles/src/theming/sap_horizon_hcw/_css_variables.scss b/packages/styles/src/theming/sap_horizon_hcw/_css_variables.scss
@@ -862,6 +862,7 @@
   --sapMenu_Hover_Background: var(--sapList_Hover_Background);
   --sapMenu_Active_Background: var(--sapList_Active_Background);
   --sapMenu_Selected_Background: var(--sapList_SelectionBackgroundColor);
+  --sapToolHeader_Shadow1: 0 0 0 0.0625rem #000, 0 0.5rem 1rem 0 rgba(0, 0, 0, 0.16);
 }
 
 .background-image--sapCompanyLogo {