chore(styles): bring BTP CSS vars in fd theming files [ci visual]

SAP · Sep 12, 2023 · c955c7f · c955c7f
1 parent f2ebe59
commit c955c7f
Show file tree

Hide file tree

Showing 9 changed files with 82 additions and 0 deletions.
diff --git a/packages/styles/src/theming/sap_fiori_3.scss b/packages/styles/src/theming/sap_fiori_3.scss
@@ -46,6 +46,15 @@
 @import "./common/navigation-menu/sap_fiori";
 
 :root {
+  /* BTP */
+  --sapMenu_Shadow1: 0 0 0.125rem 0 rgba(0, 0, 0, 0.16), 0 0.5rem 1rem 0 rgba(0, 0, 0, 0.16);
+  --sapMenu_Shadow2: 0 0 0.125rem 0 rgba(0, 0, 0, 0.48), 0 1rem 2rem 0 rgba(0, 0, 0, 0.16);
+  --sapNotifications_Shadow2: 0 0 0.125rem 0 rgba(0, 0, 0, 0.48), 0 1rem 2rem 0 rgba(0, 0, 0, 0.16);
+  --sapSearchHover_Shadow: 0 0 0.125rem 0 rgba(0, 0, 0, 0.16), 0 0.5rem 1rem 0 rgba(0, 0, 0, 0.16);
+  --sapMenu_Background: var(--sapList_Background);
+  --sapMenu_Hover_Background: var(--sapList_Hover_Background);
+  --sapMenu_Active_Background: var(--sapList_Active_Background);
+  --sapMenu_Selected_Background: var(--sapList_Hover_SelectionBackground);
   --fdOverlay_Background_Opacity: 0.6;
 
   /* Dynamic Page Layout */

diff --git a/packages/styles/src/theming/sap_fiori_3_dark.scss b/packages/styles/src/theming/sap_fiori_3_dark.scss
@@ -46,6 +46,15 @@
 @import "./common/navigation-menu/sap_fiori";
 
 :root {
+  /* BTP */
+  --sapMenu_Shadow1: 0 0 0.125rem 0 rgba(0, 0, 0, 0.16), 0 0.5rem 1rem 0 rgba(0, 0, 0, 0.32);
+  --sapMenu_Shadow2: 0 0 0.125rem 0 rgba(0, 0, 0, 0.48), 0 1rem 2rem 0 rgba(0, 0, 0, 0.64);
+  --sapNotifications_Shadow2: 0 0 0.125rem 0 rgba(0, 0, 0, 0.48), 0 1rem 2rem 0 rgba(0, 0, 0, 0.64);
+  --sapSearchHover_Shadow: 0 0 0.125rem 0 rgba(0, 0, 0, 0.16), 0 0.5rem 1rem 0 rgba(0, 0, 0, 0.32), 0 0 0 0.0625rem rgba(134, 150, 169, 0.16);
+  --sapMenu_Background: var(--sapList_Background);
+  --sapMenu_Hover_Background: var(--sapList_Hover_Background);
+  --sapMenu_Active_Background: var(--sapList_Active_Background);
+  --sapMenu_Selected_Background: var(--sapList_Hover_SelectionBackground);
   --fdOverlay_Background_Opacity: 0.6;
 
   /* Rating Indicator */

diff --git a/packages/styles/src/theming/sap_fiori_3_hcb.scss b/packages/styles/src/theming/sap_fiori_3_hcb.scss
@@ -53,6 +53,15 @@
 @import "./common/navigation-menu/sap_fiori_hc";
 
 :root {
+  /* BTP */
+  --sapMenu_Shadow1: 0 0 0 0.0625rem #fff, 0 0.5rem 1rem 0 rgba(255, 255, 255, 0.16);
+  --sapMenu_Shadow2: 0 0 0 0.0625rem #fff, 0 1rem 2rem 0 rgba(255, 255, 255, 0.16);
+  --sapNotifications_Shadow2: 0 0 0 0.0625rem #fff, 0 1rem 2rem 0 rgba(255, 255, 255, 0.16);
+  --sapSearchHover_Shadow: 0 0 0 0.0625rem #fff, 0 0.5rem 1rem 0 rgba(255, 255, 255, 0.16);
+  --sapMenu_Background: var(--sapList_Background);
+  --sapMenu_Hover_Background: var(--sapList_Hover_Background);
+  --sapMenu_Active_Background: var(--sapList_Active_Background);
+  --sapMenu_Selected_Background: var(--sapList_SelectionBackgroundColor);
   --fdOverlay_Background_Opacity: 0.8;
 
   /* Dynamic Page Layout */

diff --git a/packages/styles/src/theming/sap_fiori_3_hcw.scss b/packages/styles/src/theming/sap_fiori_3_hcw.scss
@@ -47,6 +47,15 @@
 @import "./common/step-input/sap_fiori";
 
 :root {
+  /* BTP */
+  --sapMenu_Shadow1: 0 0 0 0.0625rem #000, 0 0.5rem 1rem 0 rgba(0, 0, 0, 0.16);
+  --sapMenu_Shadow2: 0 0 0 0.0625rem #000, 0 1rem 2rem 0 rgba(0, 0, 0, 0.16);
+  --sapNotifications_Shadow2: 0 0 0 0.0625rem #000, 0 1rem 2rem 0 rgba(0, 0, 0, 0.16);
+  --sapSearchHover_Shadow: 0 0 0 0.0625rem #000, 0 0.5rem 1rem 0 rgba(0, 0, 0, 0.16);
+  --sapMenu_Background: var(--sapList_Background);
+  --sapMenu_Hover_Background: var(--sapList_Hover_Background);
+  --sapMenu_Active_Background: var(--sapList_Active_Background);
+  --sapMenu_Selected_Background: var(--sapList_SelectionBackgroundColor);
   --fdOverlay_Background_Opacity: 0.8;
 
   /* Rating Indicator */

diff --git a/packages/styles/src/theming/sap_fiori_3_light_dark.scss b/packages/styles/src/theming/sap_fiori_3_light_dark.scss
@@ -45,6 +45,12 @@
 @import "./common/navigation-menu/sap_fiori";
 
 :root {
+  /* BTP */
+  --sapSearchHover_Shadow: 0 0 0.125rem 0 rgba(0, 0, 0, 0.16), 0 0.5rem 1rem 0 rgba(0, 0, 0, 0.16);
+  --sapMenu_Background: var(--sapList_Background);
+  --sapMenu_Hover_Background: var(--sapList_Hover_Background);
+  --sapMenu_Active_Background: var(--sapList_Active_Background);
+  --sapMenu_Selected_Background: var(--sapList_Hover_SelectionBackground);
   --fdOverlay_Background_Opacity: 0.6;
 
   /* Rating Indicator */

diff --git a/packages/styles/src/theming/sap_horizon.scss b/packages/styles/src/theming/sap_horizon.scss
@@ -48,6 +48,16 @@
 @import "./common/navigation-menu/sap_horizon";
 
 :root {
+  /* BTP */
+  --sapMenu_Shadow1: 0 0 0.125rem 0 rgba(34, 53, 72, 0.16), 0 0.5rem 1rem 0 rgba(34, 53, 72, 0.16);
+  --sapMenu_Shadow2: 0 0 0.125rem 0 rgba(34, 53, 72, 0.48), 0 1rem 2rem 0 rgba(34, 53, 72, 0.16);
+  --sapNotifications_Shadow2: 0 0 0.125rem 0 rgba(34, 53, 72, 0.48), 0 1rem 2rem 0 rgba(34, 53, 72, 0.16);
+  --sapSearchHover_Shadow: 0 0 0.125rem 0 rgba(34, 53, 72, 0.16), 0 0.5rem 1rem 0 rgba(34, 53, 72, 0.16);
+  --sapMenu_Background: var(--sapList_Background);
+  --sapMenu_Hover_Background: var(--sapList_Hover_Background);
+  --sapMenu_Active_Background: var(--sapList_Active_Background);
+  --sapMenu_Selected_Background: var(--sapList_Hover_SelectionBackground);
+
   /* Switch */
   --fdSwitch_Semantic_Error_Handle_Border_Color: var(--sapButton_Track_Negative_Background);
   --fdSwitch_Semantic_Success_Handle_Border_Color: var(--sapButton_Track_Positive_Background);

diff --git a/packages/styles/src/theming/sap_horizon_dark.scss b/packages/styles/src/theming/sap_horizon_dark.scss
@@ -48,6 +48,16 @@
 @import "./common/navigation-menu/sap_horizon";
 
 :root {
+  /* BTP */
+  --sapMenu_Shadow1: 0 0 0.125rem 0 rgba(0, 0, 0, 0.16), 0 0.5rem 1rem 0 rgba(0, 0, 0, 0.32);
+  --sapMenu_Shadow2: 0 0 0.125rem 0 rgba(0, 0, 0, 0.48), 0 1rem 2rem 0 rgba(0, 0, 0, 0.64);
+  --sapNotifications_Shadow2: 0 0 0.125rem 0 rgba(0, 0, 0, 0.48), 0 1rem 2rem 0 rgba(0, 0, 0, 0.64);
+  --sapSearchHover_Shadow: 0 0 0.125rem 0 rgba(0, 0, 0, 0.16), 0 0.5rem 1rem 0 rgba(0, 0, 0, 0.32), 0 0 0 0.0625rem rgba(169, 180, 190, 0.16);
+  --sapMenu_Background: var(--sapList_Background);
+  --sapMenu_Hover_Background: var(--sapList_Hover_Background);
+  --sapMenu_Active_Background: var(--sapList_Active_Background);
+  --sapMenu_Selected_Background: var(--sapList_Hover_SelectionBackground);
+
   /* Busy indicator */
   // Currently this variable has incorrect colour value. Use hardcoded until @sap-theming package is fixed.
   // After that, this block should be removed

diff --git a/packages/styles/src/theming/sap_horizon_hcb.scss b/packages/styles/src/theming/sap_horizon_hcb.scss
@@ -48,6 +48,16 @@
 @import "./common/navigation-menu/sap_horizon_hc";
 
 :root {
+  /* BTP */
+  --sapMenu_Shadow1: 0 0 0 0.0625rem #fff, 0 0.5rem 1rem 0 rgba(255, 255, 255, 0.16);
+  --sapMenu_Shadow2: 0 0 0 0.0625rem #fff, 0 1rem 2rem 0 rgba(255, 255, 255, 0.16);
+  --sapNotifications_Shadow2: 0 0 0 0.0625rem #fff, 0 1rem 2rem 0 rgba(255, 255, 255, 0.16);
+  --sapSearchHover_Shadow: 0 0 0 0.0625rem #fff, 0 0.5rem 1rem 0 rgba(255, 255, 255, 0.16);
+  --sapMenu_Background: var(--sapList_Background);
+  --sapMenu_Hover_Background: var(--sapList_Hover_Background);
+  --sapMenu_Active_Background: var(--sapList_Active_Background);
+  --sapMenu_Selected_Background: var(--sapList_SelectionBackgroundColor);
+
   /* Switch */
   --fdSwitch_Slider_Box_Sizing: border-box;
 

diff --git a/packages/styles/src/theming/sap_horizon_hcw.scss b/packages/styles/src/theming/sap_horizon_hcw.scss
@@ -49,6 +49,16 @@
 @import "./common/navigation-menu/sap_horizon_hc";
 
 :root {
+  /* BTP */
+  --sapMenu_Shadow1: 0 0 0 0.0625rem #000, 0 0.5rem 1rem 0 rgba(0, 0, 0, 0.16);
+  --sapMenu_Shadow2: 0 0 0 0.0625rem #000, 0 1rem 2rem 0 rgba(0, 0, 0, 0.16);
+  --sapNotifications_Shadow2: 0 0 0 0.0625rem #000, 0 1rem 2rem 0 rgba(0, 0, 0, 0.16);
+  --sapSearchHover_Shadow: 0 0 0 0.0625rem #000, 0 0.5rem 1rem 0 rgba(0, 0, 0, 0.16);
+  --sapMenu_Background: var(--sapList_Background);
+  --sapMenu_Hover_Background: var(--sapList_Hover_Background);
+  --sapMenu_Active_Background: var(--sapList_Active_Background);
+  --sapMenu_Selected_Background: var(--sapList_SelectionBackgroundColor);
+
   /* Switch */
   --fdSwitch_Slider_Box_Sizing: border-box;