fix(styles): update Message toast to latest design UXC [ci visual] (#…

…5760)
SAP · Nov 8, 2024 · db13dd4 · db13dd4
1 parent ad57c89
commit db13dd4
Show file tree

Hide file tree

Showing 11 changed files with 66 additions and 20 deletions.
diff --git a/packages/styles/src/message-toast.scss b/packages/styles/src/message-toast.scss
@@ -4,31 +4,23 @@
 @import "./mixins";
 
 $block: #{$fd-namespace}-message-toast;
-$fd-message-toast-max-width: 15rem;
-$fd-message-toast-padding: 1rem;
-$fd-message-toast-border-radius: var(--sapElement_BorderCornerRadius);
-$fd-message-toast-background: var(--sapList_Background);
-$fd-message-toast-box-shadow: var(--sapContent_Shadow2);
-$fd-message-toast-text-font-family: var(--sapFontFamily);
-$fd-message-toast-text-font-size: var(--sapFontSize);
-$fd-message-toast-text-color: var(--sapList_TextColor);
 
 .#{$block} {
   @include fd-reset();
 
   // CONTAINER
-  display: inline-flex;
   width: auto;
-  max-width: $fd-message-toast-max-width;
-  box-shadow: $fd-message-toast-box-shadow;
-  background-color: $fd-message-toast-background;
-  border-radius: $fd-message-toast-border-radius;
-  padding-inline: $fd-message-toast-padding;
-  padding-block: $fd-message-toast-padding;
+  max-width: 15rem;
+  padding-block: 1rem;
+  display: inline-flex;
+  padding-inline: 1rem;
+  box-shadow: var(--sapContent_Lite_Shadow);
+  border-radius: var(--sapElement_BorderCornerRadius);
+  background-color: var(--sapIndicationColor_9_Background);
 
   // TEXT
-  font-family: $fd-message-toast-text-font-family;
-  font-size: var(--sapFontSize);
-  color: $fd-message-toast-text-color;
   text-align: center;
+  font-size: var(--sapFontSize);
+  font-family: var(--sapFontFamily);
+  color: var(--sapContent_ContrastTextColor);
 }
diff --git a/packages/styles/src/theming/sap_fiori_3.scss b/packages/styles/src/theming/sap_fiori_3.scss
@@ -235,4 +235,10 @@
 
   /** User Menu */
   --fdUserMenu_User_Name_Font_Family: var(--sapFontBoldFamily);
+
+  /** 
+    Message Toast
+    TO DO: remove when the theming variable is added
+  */
+  --sapContent_Lite_Shadow: none;
 }
diff --git a/packages/styles/src/theming/sap_fiori_3_dark.scss b/packages/styles/src/theming/sap_fiori_3_dark.scss
@@ -236,4 +236,10 @@
 
   /** User Menu */
   --fdUserMenu_User_Name_Font_Family: var(--sapFontBoldFamily);
+
+  /** 
+    Message Toast
+    TO DO: remove when the theming variable is added
+  */
+  --sapContent_Lite_Shadow: none;
 }
diff --git a/packages/styles/src/theming/sap_fiori_3_hcb.scss b/packages/styles/src/theming/sap_fiori_3_hcb.scss
@@ -239,4 +239,10 @@
 
   /** User Menu */
   --fdUserMenu_User_Name_Font_Family: var(--sapFontFamily);
+
+  /** 
+    Message Toast
+    TO DO: remove when the theming variable is added
+  */
+  --sapContent_Lite_Shadow: var(--sapContent_Shadow1);
 }
diff --git a/packages/styles/src/theming/sap_fiori_3_hcw.scss b/packages/styles/src/theming/sap_fiori_3_hcw.scss
@@ -235,4 +235,10 @@
 
   /** User Menu */
   --fdUserMenu_User_Name_Font_Family: var(--sapFontFamily);
+
+  /** 
+    Message Toast
+    TO DO: remove when the theming variable is added
+  */
+  --sapContent_Lite_Shadow: var(--sapContent_Shadow1);
 }
diff --git a/packages/styles/src/theming/sap_fiori_3_light_dark.scss b/packages/styles/src/theming/sap_fiori_3_light_dark.scss
@@ -257,4 +257,10 @@
 
   /** User Menu */
   --fdUserMenu_User_Name_Font_Family: var(--sapFontBoldFamily);
+
+  /** 
+    Message Toast
+    TO DO: remove when the theming variable is added
+  */
+  --sapContent_Lite_Shadow: none;
 }
diff --git a/packages/styles/src/theming/sap_horizon.scss b/packages/styles/src/theming/sap_horizon.scss
@@ -245,4 +245,10 @@
 
   /** User Menu */
   --fdUserMenu_User_Name_Font_Family: var(--sapFontBoldFamily);
+
+  /** 
+    Message Toast
+    TO DO: remove when the theming variable is added
+  */
+  --sapContent_Lite_Shadow: none;
 }
diff --git a/packages/styles/src/theming/sap_horizon_dark.scss b/packages/styles/src/theming/sap_horizon_dark.scss
@@ -252,4 +252,10 @@
 
   /** User Menu */
   --fdUserMenu_User_Name_Font_Family: var(--sapFontBoldFamily);
+
+  /** 
+    Message Toast
+    TO DO: remove when the theming variable is added
+  */
+  --sapContent_Lite_Shadow: none;
 }
diff --git a/packages/styles/src/theming/sap_horizon_hcb.scss b/packages/styles/src/theming/sap_horizon_hcb.scss
@@ -239,4 +239,10 @@
 
   /** User Menu */
   --fdUserMenu_User_Name_Font_Family: var(--sapFontFamily);
+
+  /** 
+    Message Toast
+    TO DO: remove when the theming variable is added
+  */
+  --sapContent_Lite_Shadow: var(--sapContent_Shadow1);
 }
diff --git a/packages/styles/src/theming/sap_horizon_hcw.scss b/packages/styles/src/theming/sap_horizon_hcw.scss
@@ -239,4 +239,10 @@
 
   /** User Menu */
   --fdUserMenu_User_Name_Font_Family: var(--sapFontFamily);
+
+  /** 
+    Message Toast
+    TO DO: remove when the theming variable is added
+  */
+  --sapContent_Lite_Shadow: var(--sapContent_Shadow1);
 }
diff --git a/packages/styles/stories/Components/message-toast/default-toast.example.html b/packages/styles/stories/Components/message-toast/default-toast.example.html
@@ -1,4 +1,4 @@
 
-<div class="fd-message-toast">Product added</div>
+<div class="fd-message-toast" role="alert">Product added</div>
 <br><br>
-<div class="fd-message-toast">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
+<div class="fd-message-toast" role="alert">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>