@ui5/webcomponents 1.2.6 → 1.4.0

package/src/themes/TextArea.css

@@ -16,6 +16,7 @@
 	line-height: 1.4;
 	letter-spacing: normal;
 	word-spacing: normal;
+	margin: var(--_ui5_textarea_margin);
 }
 
 :host([disabled]) {
@@ -28,35 +29,32 @@
 }
 
 :host([disabled]) .ui5-textarea-inner {
-	background: var(--sapField_ReadOnly_Background);
+	background: var(--sapField_BackgroundStyle);
+	background-color: var(--_ui5_textarea_disabled_background_color);
 }
 
 :host([focused]) .ui5-textarea-inner {
 	outline: var(--_ui5_textarea_focus_outline);
-	outline-offset: -3px;
+	outline-offset: var(--_ui5_textarea_focus_outline_offset);
 }
 
-:host([focused]:not([exceeding])) .ui5-textarea-inner {
+:host([focused]) .ui5-textarea-inner {
 	background-color: var(--sapField_Focus_Background);
 	background-image: none;
 	box-shadow: var(--_ui5_textarea_focus_box_shadow);
 }
 
-:host(:not([value-state]):not([exceeding]):not([readonly]):not([focused]):hover) .ui5-textarea-inner {
+:host(:not([value-state]):not([readonly]):not([focused]):hover) .ui5-textarea-inner {
 	box-shadow: var(--_ui5_textarea_hover_box_shadow);
-	background-image: var(--_ui5_textarea_background_image);
-	background-size: 100% var(--sapField_BorderWidth);
-	background-repeat: repeat-x;
-	background-position: bottom;
+	background: var(--sapField_Hover_BackgroundStyle);
+	background-color: var(--sapField_Hover_Background);
 }
 
-:host([value-state]:not([value-state="None"])[focused]) .ui5-textarea-inner,
-:host([exceeding]) .ui5-textarea-inner {
+:host([value-state]:not([value-state="None"])[focused]) .ui5-textarea-inner {
 	outline: var(--_ui5_textarea_value_state_focus_outline);
-	outline-offset: -4px;
+	outline-offset: var(--_ui5_textarea_value_state_focus_outline_offset);
 }
 
-
 .ui5-textarea-root {
 	height: 100%;
 	min-height: var(--_ui5_input_height);
@@ -71,6 +69,7 @@
 .ui5-textarea-inner {
 	width: 100%;
 	height: 100%;
+	min-width: 6rem;
 	margin: 0;
 	padding: var(--_ui5_textarea_padding);
 	box-sizing: border-box;
@@ -84,16 +83,13 @@
 	resize: none;
 	border-color: inherit;
 	border-radius: inherit;
-	background-color: var(--sapField_Background);
 	border-width: var(--_ui5_textarea_inner_border_width);
-	border-style: solid;
+	border-style: var(--sapField_BorderStyle);
 	line-height: inherit;
 	letter-spacing: inherit;
 	word-spacing: inherit;
-	background-image: var(--_ui5_textarea_background_image);
-	background-size: 100% var(--sapField_BorderWidth);
-	background-repeat: repeat-x;
-	background-position: bottom;
+	background: var(--sapField_BackgroundStyle);
+	background-color: var(--sapField_Background);
 }
 
 :host([growing]) .ui5-textarea-root {
@@ -122,10 +118,14 @@
 	border-color: var(--sapField_ReadOnly_BorderColor);
 }
 
-:host([readonly]) .ui5-textarea-root .ui5-textarea-inner {
-	background: var(--sapField_ReadOnly_Background);
+:host([readonly][focused]) .ui5-textarea-root .ui5-textarea-inner {
+	background-image: none;
 }
 
+:host([readonly]) .ui5-textarea-root .ui5-textarea-inner {
+	background: var(--sapField_ReadOnly_BackgroundStyle);
+	background-color: var(--sapField_ReadOnly_Background);
+}
 
 :host([show-exceeded-text]) .ui5-textarea-root {
 	flex-direction: column;
@@ -159,16 +159,53 @@
 	color: var(--sapField_PlaceholderTextColor);
 }
 
-:host(:not([value-state]):not([exceeding]):not([readonly]):hover) {
+:host([value-state="Error"]) .ui5-textarea-inner::-webkit-input-placeholder {
+	/* Chrome/Opera/Safari */
+	font-weight: var(--_ui5_textarea_value_state_error_warning_placeholder_font_weight);
+	font-style: var(--_ui5_textarea_error_placeholder_font_style);
+	color: var(--_ui5_textarea_error_placeholder_color);
+}
+
+:host([value-state="Error"]) .ui5-textarea-inner::-moz-placeholder {
+	/* Firefox 19+ */
+	font-weight: var(--_ui5_textarea_value_state_error_warning_placeholder_font_weight);
+	font-style: var(--_ui5_textarea_error_placeholder_font_style);
+	color: var(--_ui5_textarea_error_placeholder_color);
+}
+
+:host([value-state="Error"]) .ui5-textarea-inner:-ms-input-placeholder {
+	/* IE 10+ */
+	font-weight: var(--_ui5_textarea_value_state_error_warning_placeholder_font_weight);
+	font-style: var(--_ui5_textarea_error_placeholder_font_style);
+	color: var(--_ui5_textarea_error_placeholder_color);
+}
+
+:host([value-state="Error"]) .ui5-textarea-inner:-moz-placeholder {
+	/* Firefox 18- */
+	font-weight: var(--_ui5_textarea_value_state_error_warning_placeholder_font_weight);
+	font-style: var(--_ui5_textarea_error_placeholder_font_style);
+	color: var(--_ui5_textarea_error_placeholder_color);
+}
+
+:host([value-state="Warning"]) .ui5-textarea-inner::-webkit-input-placeholder {
+	/* Chrome/Opera/Safari */
+	font-weight: var(--_ui5_textarea_value_state_error_warning_placeholder_font_weight);
+}
+
+:host([value-state="Warning"]) .ui5-textarea-inner::-moz-placeholder {
+	/* Firefox 19+ */
+	font-weight: var(--_ui5_textarea_value_state_error_warning_placeholder_font_weight);
+}
+
+:host(:not([value-state]):not([readonly]):hover) {
 	border-color: var(--sapField_Hover_BorderColor);
 }
 
-:host(:not([value-state]):not([exceeding]):not([readonly]):hover) .ui5-textarea-inner {
+:host(:not([value-state]):not([readonly]):hover) .ui5-textarea-inner {
 	background-color: var(--sapField_Hover_Background);
 }
 
-:host([value-state]:not([value-state="None"])) .ui5-textarea-inner,
-:host([exceeding]) .ui5-textarea-inner {
+:host([value-state]:not([value-state="None"])) .ui5-textarea-inner {
 	border-width: var(--_ui5_textarea_state_border_width);
 }
 
@@ -181,80 +218,69 @@
 	font-weight: var(--_ui5_input_warning_font_weight);
 }
 
-:host([value-state="Warning"]:not([readonly])) .ui5-textarea-inner,
-:host([exceeding]) .ui5-textarea-inner {
-	background-image: var(--_ui5_textarea_warning_background_image);
-	background-size: 100% var(--sapField_WarningBorderWidth);
-	background-repeat: repeat-x;
-	background-position: bottom;
+:host([value-state="Warning"]:not([readonly])) .ui5-textarea-inner {
+	background: var(--sapField_WarningBackgroundStyle);
+	background-color: var(--sapField_WarningBackground);
 }
 
-:host([value-state="Warning"]:not([exceeding]):not([readonly]):not([focused]):hover) .ui5-textarea-inner,
-:host([exceeding]:not([focused]):hover) .ui5-textarea-inner {
+:host([value-state="Warning"]:not([readonly]):not([focused]):hover) .ui5-textarea-inner {
 	box-shadow: var(--sapContent_Critical_Shadow);
 	background-color: var(--sapField_Hover_Background);
 }
 
-:host([value-state="Warning"][focused]:not([exceeding]):not([readonly])) .ui5-textarea-inner,
-:host([exceeding][focused]) .ui5-textarea-inner {
+:host([value-state="Warning"][focused]:not([readonly])) .ui5-textarea-inner {
 	background-image: none;
 	box-shadow: var(--_ui5_textarea_value_state_warning_focus_box_shadow);
-	background-color: var(--sapField_Hover_Background);
+	background-color: var(--sapField_Focus_Background);
 }
 
 :host([value-state="Error"]:not([readonly])) .ui5-textarea-inner {
 	font-weight: var(--_ui5_input_error_font_weight);
-	background-image: var(--_ui5_textarea_error_background_image);
-	background-size: 100% var(--sapField_InvalidBorderWidth);
-	background-repeat: repeat-x;
-	background-position: bottom;
+	background: var(--sapField_InvalidBackgroundStyle);
+	background-color: var(--sapField_InvalidBackground);
 }
 
-:host([value-state="Error"]:not([exceeding]):not([readonly]):not([focused]):hover) .ui5-textarea-inner {
+:host([value-state="Error"]:not([readonly]):not([focused]):hover) .ui5-textarea-inner {
 	box-shadow: var(--sapContent_Negative_Shadow);
-	background-color: var(--sapField_Hover_Background);
+	background-color: var(--_ui5_textarea_error_hover_background_color);
 }
 
-:host([value-state="Error"][focused]:not([exceeding]):not([readonly])) .ui5-textarea-inner {
+:host([value-state="Error"][focused]:not([readonly])) .ui5-textarea-inner {
 	background-image: none;
 	box-shadow: var(--_ui5_textarea_value_state_error_focus_box_shadow);
-	background-color: var(--sapField_Hover_Background);
+	background-color: var(--_ui5_textarea_error_focused_background_color);
 }
 
 :host([value-state="Information"]:not([readonly])) .ui5-textarea-inner {
-	background-image: var(--_ui5_textarea_information_background_image);
-	background-size: 100% var(--sapField_InformationBorderWidth);
-	background-repeat: repeat-x;
-	background-position: bottom;
+	background: var(--sapField_InformationBackgroundStyle);
+	background-color: var(--sapField_InformationBackground);
 }
 
-:host([value-state="Information"]:not([exceeding]):not([readonly]):not([focused]):hover) .ui5-textarea-inner {
+:host([value-state="Information"]:not([readonly]):not([focused]):hover) .ui5-textarea-inner {
 	box-shadow: var(--sapContent_Informative_Shadow);
 	background-color: var(--sapField_Hover_Background);
 }
 
-:host([value-state="Information"][focused]:not([exceeding]):not([readonly])) .ui5-textarea-inner {
+:host([value-state="Information"][focused]:not([readonly])) .ui5-textarea-inner {
 	background-image: none;
 	box-shadow: var(--_ui5_textarea_focus_box_shadow);
-	background-color: var(--sapField_Hover_Background);
+	background-color: var(--sapField_Focus_Background);
 }
 
 :host([value-state="Success"]:not([readonly])) .ui5-textarea-inner {
-	background-image: var(--_ui_textarea_success_background_image);
-	background-size: 100% var(--sapField_SuccessBorderWidth);
-	background-repeat: repeat-x;
-	background-position: bottom;
+	background: var(--sapField_SuccessBackgroundStyle);
+	background-color: var(--sapField_SuccessBackground);
 }
 
-:host([value-state="Success"]:not([exceeding]):not([readonly]):not([focused]):hover) .ui5-textarea-inner {
+:host([value-state="Success"]:not([readonly]):not([focused]):hover) .ui5-textarea-inner {
 	box-shadow: var(--sapContent_Positive_Shadow);
 	background-color: var(--sapField_Hover_Background);
 }
 
-:host([value-state="Success"][focused]:not([exceeding]):not([readonly])) .ui5-textarea-inner {
+:host([value-state="Success"][focused]:not([readonly])) .ui5-textarea-inner {
 	background-image: none;
 	box-shadow: var(--_ui5_textarea_value_state_success_focus_box_shadow);
-	background-color: var(--sapField_Hover_Background);
+	background-color: var(--sapField_Focus_Background);
 }
 
 :host([value-state="Error"]:not([readonly])) {
@@ -271,32 +297,30 @@
 	border-style: var(--_ui5_input_error_warning_border_style);
 }
 
-:host([value-state="Warning"]:not([readonly])),
-:host([exceeding]) {
+:host([value-state="Warning"]:not([readonly])) {
 	border-color: var(--sapField_WarningColor);
 }
 
-:host([value-state="Warning"]:not([readonly])) .ui5-textarea-inner,
-:host([exceeding]) .ui5-textarea-inner {
+:host([value-state="Warning"]:not([readonly])) .ui5-textarea-inner {
 	background-color: var(--sapField_WarningBackground);
 }
 
-:host([value-state="Success"]:not([readonly]):not([exceeding])) {
+:host([value-state="Success"]:not([readonly])) {
 	border-color: var(--sapField_SuccessColor);
 }
 
-:host([value-state="Success"]:not([readonly]):not([exceeding])) .ui5-textarea-inner {
+:host([value-state="Success"]:not([readonly])) .ui5-textarea-inner {
 	background-color: var(--sapField_SuccessBackground);
 	border-width: var(--_ui5_textarea_success_border_width);
 }
 
-:host([value-state="Information"]:not([readonly]):not([exceeding])) {
+:host([value-state="Information"]:not([readonly])) {
 	border-color: var(--sapField_InformationColor);
 }
 
-:host([value-state="Information"]:not([readonly]):not([exceeding])) .ui5-textarea-inner {
+:host([value-state="Information"]:not([readonly])) .ui5-textarea-inner {
 	background-color: var(--sapField_InformationBackground);
-	border-width: var(--_ui5_textarea_state_border_width);
+	border-width: var(--_ui5_textarea_information_border_width);
 }
 
 .ui5-textarea-exceeded-text {
@@ -307,3 +331,39 @@
 	font-family: "72override", var(--sapFontFamily);
 	font-size: var(--sapFontSmallSize);
 }
+
+:host ::-webkit-scrollbar {
+	background: var(--sapField_BackgroundStyle);
+	background-color: var(--sapScrollBar_TrackColor);
+	border-top-right-radius: var(--sapField_BorderCornerRadius);
+	border-bottom-right-radius: var(--sapField_BorderCornerRadius);
+}
+
+:host([readonly]) ::-webkit-scrollbar {
+	background: var(--sapField_ReadOnly_BackgroundStyle);
+	background-color: var(--sapScrollBar_TrackColor);
+}
+
+:host([value-state="Error"]) ::-webkit-scrollbar {
+	background: var(--sapField_InvalidBackgroundStyle);
+	background-color: var(--sapScrollBar_TrackColor);
+}
+
+:host([value-state="Warning"]) ::-webkit-scrollbar {
+	background: var(--sapField_WarningBackgroundStyle);
+	background-color: var(--sapScrollBar_TrackColor);
+}
+
+:host([value-state="Information"]) ::-webkit-scrollbar {
+	background: var(--sapField_InformationBackgroundStyle);
+	background-color: var(--sapScrollBar_TrackColor);
+}
+
+:host([value-state="Success"]) ::-webkit-scrollbar {
+	background: var(--sapField_SuccessBackgroundStyle);
+	background-color: var(--sapScrollBar_TrackColor);
+}
+
+:host([focused]) ::-webkit-scrollbar {
+	background-image: none;
+}

package/src/themes/Title.css

@@ -6,7 +6,7 @@
 :host {
 	max-width: 100%;
 	color: var(--sapGroup_TitleTextColor);
-	font-size: var(--ui5_title_level_2Size);
+	font-size: var(--sapFontHeader2Size);
 	font-family: "72override", var(--sapFontFamily);
 	text-shadow: var(--sapContent_TextShadow);
 }
@@ -36,30 +36,30 @@
 
 /* Level H1 */
 :host([level="H1"]) {
-	font-size: var(--ui5_title_level_1Size);
+	font-size: var(--sapFontHeader1Size);
 }
 
 /* Level H2 */
 :host([level="H2"]) {
-	font-size: var(--ui5_title_level_2Size);
+	font-size: var(--sapFontHeader2Size);
 }
 
 /* Level H3 */
 :host([level="H3"]) {
-	font-size: var(--ui5_title_level_3Size);
+	font-size: var(--sapFontHeader3Size);
 }
 
 /* Level H4 */
 :host([level="H4"]) {
-	font-size: var(--ui5_title_level_4Size);
+	font-size: var(--sapFontHeader4Size);
 }
 
 /* Level H5 */
 :host([level="H5"]) {
-	font-size: var(--ui5_title_level_5Size);
+	font-size: var(--sapFontHeader5Size);
 }
 
 /* Level H6 */
 :host([level="H6"]) {
-	font-size: var(--ui5_title_level_6Size);
+	font-size: var(--sapFontHeader6Size);
 }

package/src/themes/Toast.css

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

package/src/themes/ToggleButton.css

@@ -7,82 +7,122 @@
 	pointer-events: none;
 }
 
-:host([design="Positive"][focused][active]),
-:host([design="Negative"][focused][active]),
-:host([design="Transparent"][focused][active]),
-:host([design="Default"][focused][active]) {
-	outline-color: var(--_ui5_button_positive_border_focus_hover_color);
+:host([pressed]),
+:host([design="Default"][pressed]),
+:host([design="Transparent"][pressed]),
+:host([design="Emphasized"][pressed]) {
+	background: var(--sapButton_Selected_Background);
+	border-color: var(--sapButton_Selected_BorderColor);
+	color: var(--sapButton_Selected_TextColor);
 }
 
-:host([design="Default"][focused]),
-:host([design="Default"][focused][focused]),
-:host([design="Default"][focused][focused][active]),
-:host([design="Default"][focused]:hover) {
-	outline-color: var(--_ui5_toggle_button_pressed_focussed_hovered_outline_color);
+:host([pressed]:hover),
+:host([pressed]:not([active]):not([non-interactive]):not([_is-touch]):hover),
+:host([design="Default"][pressed]:hover),
+:host([design="Default"][pressed]:not([active]):not([non-interactive]):not([_is-touch]):hover),
+:host([design="Transparent"][pressed]:hover),
+:host([design="Transparent"][pressed]:not([active]):not([non-interactive]):not([_is-touch]):hover),
+:host([design="Emphasized"][pressed]:hover),
+:host([design="Emphasized"][pressed]:not([active]):not([non-interactive]):not([_is-touch]):hover) {
+	background: var(--sapButton_Selected_Hover_Background);
+	border-color: var(--sapButton_Selected_Hover_BorderColor);
+	color: var(--sapButton_Selected_TextColor);
+	box-shadow: var(--sapContent_Interaction_Shadow);
 }
 
-:host([design="Positive"][pressed]),
-:host([design="Positive"][pressed][focused]),
-:host([design="Positive"][pressed][focused][active]),
-:host([design="Positive"][pressed]:hover) {
-	background: var(--sapButton_Accept_Active_Background);
-	border-color: var(--sapButton_Accept_Active_BorderColor);
-	color: var(--_ui5_toggle_button_selected_positive_text_color);
-	outline-color: var(--_ui5_toggle_button_pressed_focussed_hovered_outline_color);
+:host([active][focused]),
+:host([design="Default"][active][focused]),
+:host([design="Transparent"][active][focused]),
+:host([design="Emphasized"][active][focused]) {
+	background: var(--sapButton_Active_Background);
+	border-color: var(--sapButton_Active_BorderColor);
+	color: var(--sapButton_Selected_TextColor);
+	box-shadow: var(--sapContent_Interaction_Shadow);
 }
 
-:host([design="Positive"][pressed][active]),
-:host([design="Positive"][pressed]:not([active]):not([non-interactive]):not([_is-touch]):hover) {
-	background: var(--sapButton_Accept_Selected_Hover_Background);
+:host([pressed]:not([active]):not([non-interactive]):not([_is-touch])),
+:host([design="Default"][pressed]:not([active]):not([non-interactive]):not([_is-touch])),
+:host([design="Transparent"][pressed]:not([active]):not([non-interactive]):not([_is-touch])),
+:host([design="Emphasized"][pressed]:not([active]):not([non-interactive]):not([_is-touch])) {
+	background: var(--sapButton_Selected_Background);
+	border-color: var(--sapButton_Selected_BorderColor);
+	color: var(--sapButton_Selected_TextColor);
 }
 
-:host([design="Negative"][pressed]),
-:host([design="Negative"][pressed][focused]),
-:host([design="Negative"][pressed]:hover) {
+:host([design="Negative"][pressed]) {
+	background: var(--sapButton_Reject_Selected_Background);
+	border-color: var(--sapButton_Reject_Selected_BorderColor);
+	color: var(--sapButton_Reject_Selected_TextColor);
+}
+
+:host([design="Negative"][active][focused]) {
 	background: var(--sapButton_Reject_Active_Background);
 	border-color: var(--sapButton_Reject_Active_BorderColor);
-	color: var(--_ui5_toggle_button_selected_negative_text_color);
-	outline-color: var(--_ui5_toggle_button_pressed_focussed_hovered_outline_color);
+	color: var(--sapButton_Reject_Active_TextColor);
 }
 
-:host([design="Negative"][pressed][active]),
+:host([design="Negative"][pressed][active]:hover),
 :host([design="Negative"][pressed]:not([active]):not([non-interactive]):not([_is-touch]):hover) {
 	background: var(--sapButton_Reject_Selected_Hover_Background);
+	border-color: var(--sapButton_Reject_Selected_Hover_BorderColor);
+	color: var(--sapButton_Reject_Selected_TextColor);
+	box-shadow: var(--sapContent_Negative_Shadow);
 }
 
+:host([design="Negative"][pressed]:not([active]):not([non-interactive]):not([_is-touch])) {
+	background: var(--sapButton_Reject_Selected_Background);
+	border-color: var(--sapButton_Reject_Selected_BorderColor);
+	color: var(--sapButton_Reject_Selected_TextColor);
+}
 
-:host([pressed]),
-:host([pressed]:hover),
-:host([pressed][focused]),
-:host([design="Transparent"][pressed]),
-:host([design="Transparent"][pressed]:hover){
-	background: var(--sapButton_Selected_Background);
-	border-color: var(--sapButton_Selected_BorderColor);
-	color: var(--sapButton_Selected_TextColor);
-	outline-color: var(--_ui5_toggle_button_pressed_focussed_hovered_outline_color);
+:host([design="Positive"][pressed]) {
+	background: var(--sapButton_Accept_Selected_Background);
+	border-color: var(--sapButton_Accept_Selected_BorderColor);
+	color: var(--sapButton_Accept_Selected_TextColor);
 }
-:host([design="Emphasized"][pressed]),
-:host([design="Emphasized"][pressed]:not([active]):not([non-interactive]):not([_is-touch]):hover){
-outline-color: var(--_ui5_toggle_button_emphasized_pressed_focussed_hovered);
+
+:host([design="Positive"][active][focused]) {
+	background: var(--sapButton_Accept_Active_Background);
+	border-color: var(--sapButton_Accept_Active_BorderColor);
+	color: var(--sapButton_Accept_Selected_TextColor);
 }
 
-:host([design="Transparent"]:hover) {
-	border-color: var(--sapButton_Lite_Hover_BorderColor);
+:host([design="Positive"][pressed][active]:hover),
+:host([design="Positive"][pressed]:not([active]):not([non-interactive]):not([_is-touch]):hover) {
+	background: var(--sapButton_Accept_Selected_Hover_Background);
+	border-color: var(--sapButton_Accept_Selected_Hover_BorderColor);
+	color: var(--sapButton_Accept_Selected_TextColor);
+	box-shadow: var(--sapContent_Positive_Shadow);
 }
 
-:host([pressed][active]),
-:host([pressed]:not([active]):not([non-interactive]):not([_is-touch]):hover) {
-	background: var(--sapButton_Selected_Hover_Background);
+:host([design="Positive"][pressed]:not([active]):not([non-interactive]):not([_is-touch])) {
+	background: var(--sapButton_Accept_Selected_Background);
+	border-color: var(--sapButton_Accept_Selected_BorderColor);
+	color: var(--sapButton_Accept_Selected_TextColor);
 }
 
-:host([design="Emphasized"][pressed]:not([active]):not([non-interactive]):not([_is-touch]):hover) {
-	box-shadow: var(--sapContent_Informative_Shadow);
+:host([design="Attention"][pressed]) {
+	background: var(--sapButton_Attention_Selected_Background);
+	border-color: var(--sapButton_Attention_Selected_BorderColor);
+	color: var(--sapButton_Attention_Selected_TextColor);
 }
 
-:host([design="Positive"][pressed]:hover){
-	box-shadow: var(--sapContent_Positive_Shadow);
+:host([design="Attention"][active][focused]) {
+	background: var(--sapButton_Attention_Active_Background);
+	border-color: var(--sapButton_Attention_Active_BorderColor);
+	color: var(--sapButton_Attention_Active_TextColor);
 }
 
-:host([design="Negative"][pressed]:hover){
-	box-shadow: var(--sapContent_Negative_Shadow);
+:host([design="Attention"][pressed][active]:hover),
+:host([design="Attention"][pressed]:not([active]):not([non-interactive]):not([_is-touch]):hover) {
+	background: var(--sapButton_Attention_Selected_Hover_Background);
+	border-color: var(--sapButton_Attention_Selected_Hover_BorderColor);
+	color: var(--sapButton_Attention_Selected_TextColor);
+	box-shadow: var(--sapContent_Critical_Shadow);
+}
+
+:host([design="Attention"][pressed]:not([active]):not([non-interactive]):not([_is-touch])) {
+	background: var(--sapButton_Attention_Selected_Background);
+	border-color: var(--sapButton_Attention_Selected_BorderColor);
+	color: var(--sapButton_Attention_Selected_TextColor);
 }

package/src/themes/Token.css

@@ -1,15 +1,15 @@
 :host {
 	display: inline-block;
 	background: var(--_ui5_token_background);
-	border-width: 1px;
-	border-style: solid;
-	border-color: var(--sapButton_TokenBorderColor);
+	border: var(--sapButton_BorderWidth) solid var(--sapButton_TokenBorderColor);
 	border-radius: var(--_ui5_token_border_radius);
 	color: var(--_ui5_token_text_color);
 	height: var(--_ui5_token_height);
 	box-sizing: border-box;
 	margin-top: var(--_ui5_token_top_margin);
 	margin-bottom: var(--_ui5_token_bottom_margin);
+	margin-inline-end: var(--_ui5_token_right_margin);
+	position: relative;
 }
 
 :host([overflows]) {
@@ -25,37 +25,22 @@
 :host([selected]:not([readonly]):not([focused])) {
 	color: var(--sapButton_Selected_TextColor);
 	background: var(--sapButton_Selected_Background);
-	border: 1px solid var(--sapButton_Selected_BorderColor);
-	box-shadow: var(--_ui5_token_selected_box_shadow);
+	border: var(--sapButton_BorderWidth) solid var(--sapButton_Selected_BorderColor);
 }
 
 :host([selected]:not([readonly]):hover) {
 	background: var(--_ui5_token_selected_hover_background);
 	border-color: var(--_ui5_token_selected_hover_border_color);
-	box-shadow: var(--sapContent_Selected_Shadow);
+	box-shadow: var(--sapContent_Interaction_Shadow);
 }
 
 :host([readonly]) {
 	background: var(--_ui5_token_readonly_background);
-	color: var(--sapContent_ForegroundTextColor);
+	color: var(--_ui5_token_readonly_color);
 }
 
 :host([readonly]) .ui5-token--wrapper {
-	padding-right: 0.3125rem;
-}
-
-:host([focused]:not([selected]):not([readonly]):not(:hover)) {
-	border: var(--_ui5_token_focused_border);
-}
-
-:host([focused][selected]:not([readonly]):hover) {
-	box-shadow: var(--sapContent_Selected_Shadow);
-	border: var(--_ui5_token_focused_selected_border);
-}
-
-:host([focused]:not([selected]):not([readonly]):hover) {
-	box-shadow: var(--sapContent_Interaction_Shadow);
-	border: var(--_ui5_token_focused_selected_border);
+	padding: 0 var(--_ui5_token_readonly_padding);
 }
 
 :host([selected]) .ui5-token--wrapper:focus {
@@ -74,8 +59,7 @@
 	height: 100%;
 	width: 100%;
 	cursor: default;
-	padding: 0.25rem 0;
-	padding-left: 0.3125rem;
+	padding-inline-start: var(--_ui5_token_left_padding);
 	box-sizing: border-box;
 	font-size: var(--sapFontSize);
 	font-family: "72override", var(--sapFontFamily);
@@ -83,10 +67,23 @@
 }
 
 .ui5-token--wrapper:focus {
-	outline-offset: -2px;
+	outline-offset: var(--_ui5_token_outline_offset);
 	outline: var(--_ui5_token_focus_outline);
 }
 
+.ui5-token--wrapper:focus::after {
+	content: var(--ui5_token_focus_pseudo_element_content);
+	position: absolute;
+	pointer-events: none;
+	z-index: 2;
+	border: var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--_ui5_input_focus_outline_color);
+	border-radius: var(--_ui5_token_focus_outline_border_radius);
+	top: var(--_ui5_token_focus_offset);
+	bottom: var(--_ui5_token_focus_offset);
+	left: var(--_ui5_token_focus_offset);
+	right: var(--_ui5_token_focus_offset);
+}
+
 .ui5-token--text {
 	white-space: nowrap;
 }
@@ -107,11 +104,5 @@
 	width: var(--_ui5_token_icon_size);
 	height: var(--_ui5_token_icon_size);
 	padding: var(--_ui5_token_icon_padding);
-	color: var(--_ui5_token_icon_color);
-}
-
-/* RTL */
-:host(:not([readonly])) .ui5-token--wrapper[dir="rtl"] {
-	padding-right: var(--_ui5_token_wrapper_right_padding);
-	padding-left: var(--_ui5_token_wrapper_left_padding);
+	color: var(--sapContent_IconColor);
 }