ui5-toast cannot be overstyled

[vladitasev]

Bug Description

Most of the CSS for ui5-toast is not set on the :host but instead inside the shadow root.

F.e. in Button.css we have:

:host {
	min-width: var(--_ui5_button_base_min_width);
	height: var(--_ui5_button_base_height);
	line-height: normal;
	font-family: var(--_ui5_button_fontFamily);
	font-size: var(--sapFontSize);
	text-shadow: var(--_ui5_button_text_shadow);
	border-radius: var(--_ui5_button_border_radius);
	cursor: pointer;
	background-color: var(--sapButton_Background);
	border: var(--sapButton_BorderWidth) solid var(--sapButton_BorderColor);
	color: var(--sapButton_TextColor);
	box-sizing: border-box;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

so ui5-button can be overstyled easily.

In ui5-toast we have:

:host {
	font-family: "72override", var(--sapFontFamily);
	color: var(--sapList_TextColor);
	font-size: var(--sapFontSize);
}

which is significantly less, and the rest is here:

.ui5-toast-root {
	position: fixed;
	display: none;
	box-sizing: border-box;
	max-width: 15rem;
	overflow: hidden;
	padding: 1rem;
	background: var(--_ui5_toast_background);
	box-shadow: var(--_ui5_toast_shadow);
	border-radius: var(--sapElement_BorderCornerRadius);
	transition-property: opacity;
	opacity: 1;
	font-family: inherit;
	color: inherit;
	font-weight: inherit;
	font-size: inherit;
	word-wrap: break-word;
	text-align: center;
	text-overflow: ellipsis;
	white-space: pre-line;
}

Please move all relevant CSS from .ui5-toast-root to :host

Affected Component

ui5-toast

Expected Behaviour

No response

Isolated Example

No response

Steps to Reproduce

...

Log Output, Stack Trace or Screenshots

No response

Priority

Medium

UI5 Web Components Version

latest

Browser

Chrome, Edge, Firefox, Safari

Operating System

No response

Additional Context

No response

Organization

No response

Declaration

• I’m not disclosing any internal or sensitive information.

[hristop]

Internal BLI was created: FIORITECHP1-28885