From db13dd40b0b2c5204acb6a3dae7481f6fecea0ad Mon Sep 17 00:00:00 2001 From: Inna Atanasova <39598672+InnaAtanasova@users.noreply.github.com> Date: Thu, 7 Nov 2024 19:56:32 -0500 Subject: [PATCH] fix(styles): update Message toast to latest design UXC [ci visual] (#5760) --- packages/styles/src/message-toast.scss | 28 +++++++------------ packages/styles/src/theming/sap_fiori_3.scss | 6 ++++ .../styles/src/theming/sap_fiori_3_dark.scss | 6 ++++ .../styles/src/theming/sap_fiori_3_hcb.scss | 6 ++++ .../styles/src/theming/sap_fiori_3_hcw.scss | 6 ++++ .../src/theming/sap_fiori_3_light_dark.scss | 6 ++++ packages/styles/src/theming/sap_horizon.scss | 6 ++++ .../styles/src/theming/sap_horizon_dark.scss | 6 ++++ .../styles/src/theming/sap_horizon_hcb.scss | 6 ++++ .../styles/src/theming/sap_horizon_hcw.scss | 6 ++++ .../message-toast/default-toast.example.html | 4 +-- 11 files changed, 66 insertions(+), 20 deletions(-) diff --git a/packages/styles/src/message-toast.scss b/packages/styles/src/message-toast.scss index 6a3835e24e..d6245a9741 100644 --- 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 index d044b82cda..8b1cdd403d 100644 --- 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 index 221c5c4dca..d36266efbe 100644 --- 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 index c337ed2a9c..c87cc381ab 100644 --- 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 index 7ae52d62a4..8588ecf7ca 100644 --- 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 index 07b5fa6fe4..5832211b1d 100644 --- 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 index 013c33d0ab..552ad4d63c 100644 --- 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 index e2acd1dafd..951b2adc09 100644 --- 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 index 3d209f6665..d4e8e384c3 100644 --- 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 index f11b695fc4..cd6245ddbb 100644 --- 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 index 774b03765f..b77a7ea153 100644 --- 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 @@ -
Product added
+

-
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+