@ui5/webcomponents 1.2.2 → 1.3.0

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/TreeListItem.css

@@ -37,7 +37,7 @@
 }
 
 .ui5-li-root-tree {
-	padding-left: 0;
+	padding-inline-start: 0;
 }
 
 :host(:not([level="1"])) {
@@ -99,9 +99,3 @@
 	justify-content: space-between;
 	width: 100%;
 }
-
-/* RTL */
-.ui5-li-root-tree[dir="rtl"] {
-	padding-left: 1rem;
-	padding-right: 0;
-}

package/src/themes/ValueStateMessage.css

@@ -1,21 +1,17 @@
 .ui5-valuestatemessage-popover {
-	box-shadow: none;
+	box-shadow: var(--_ui5_value_state_message_popover_box_shadow);
 }
 
 .ui5-input-value-state-message-icon {
-	width: .875rem;
-	height: .875rem;
+	width: var(--_ui5_value_state_message_icon_width);
+	height: var(--_ui5_value_state_message_icon_height);
 	display: var(--_ui5_input_value_state_icon_display);
 	position: absolute;
-	padding-right: 0.5rem;
+	padding-right: 0.375rem;
 }
 
 .ui5-valuestatemessage-root .ui5-input-value-state-message-icon {
-	left: 0.5rem;
-}
-
-[ui5-responsive-popover] .ui5-valuestatemessage-header .ui5-input-value-state-message-icon {
-	left: 1rem;
+	left: var(--_ui5_input_value_state_icon_offset);
 }
 
 .ui5-input-value-state-message-icon[name="error"] {
@@ -51,6 +47,8 @@
 [ui5-responsive-popover] .ui5-valuestatemessage-header {
 	min-height: 2rem;
 	padding: var(--_ui5_value_state_header_padding);
+	border: var(--_ui5_value_state_header_border);
+	border-bottom: var(--_ui5_value_state_header_border_bottom);
 }
 
 .ui5-valuestatemessage--success {
@@ -70,7 +68,7 @@
 }
 
 .ui5-responsive-popover-header[focused], .ui5-responsive-popover-header:focus {
-	outline-offset: -0.125rem;
+	outline-offset: var(--_ui5_value_state_header_offset);
 	outline: var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--sapContent_FocusColor);
 	border-radius: var(--_ui5_value_state_message_focus_border_radius);
 }

package/src/themes/base/Avatar-parameters.css

@@ -1,5 +1,6 @@
 :root {
 	--ui5-avatar-initials-color: var(--sapContent_ImagePlaceholderForegroundColor);
+	--ui5-avatar-border-radius: .25rem;
 	--ui5-avatar-initials-border: none;
 	--ui5-avatar-accent1: var(--sapAccentColor1);
 	--ui5-avatar-accent2: var(--sapAccentColor2);
@@ -25,6 +26,18 @@
 	--ui5-avatar-accent10-color: var(--ui5-avatar-initials-color);
 	--ui5-avatar-placeholder-color: var(--ui5-avatar-initials-color);
 
+	--ui5-avatar-accent1-border-color: var(--sapField_BorderColor);
+	--ui5-avatar-accent2-border-color: var(--sapField_BorderColor);
+	--ui5-avatar-accent3-border-color: var(--sapField_BorderColor);
+	--ui5-avatar-accent4-border-color: var(--sapField_BorderColor);
+	--ui5-avatar-accent5-border-color: var(--sapField_BorderColor);
+	--ui5-avatar-accent6-border-color: var(--sapField_BorderColor);
+	--ui5-avatar-accent7-border-color: var(--sapField_BorderColor);
+	--ui5-avatar-accent8-border-color: var(--sapField_BorderColor);
+	--ui5-avatar-accent9-border-color: var(--sapField_BorderColor);
+	--ui5-avatar-accent10-border-color: var(--sapField_BorderColor);
+	--ui5-avatar-placeholder-border-color: var(--sapField_BorderColor);
+
 	--_ui5_avatar_outline: var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--sapContent_FocusColor);
 	--_ui5_avatar_focus_offset: 1px;
 	--_ui5_avatar_focus_width: 1px;
@@ -35,4 +48,10 @@
 	--_ui5_avatar_fontsize_M: 1.625rem;
 	--_ui5_avatar_fontsize_L: 2rem;
 	--_ui5_avatar_fontsize_XL: 2.75rem;
+
+	--_ui5_avatar_icon_XS: 1rem;
+	--_ui5_avatar_icon_S: 1.5rem;
+	--_ui5_avatar_icon_M: 2rem;
+	--_ui5_avatar_icon_L: 2.5rem;
+	--_ui5_avatar_icon_XL: 3rem;
 }

package/src/themes/base/Button-parameters.css

@@ -1,4 +1,7 @@
 :root {
+	--_ui5_button_focused_border: 0.0625rem dotted var(--sapContent_FocusColor);
+	--_ui5_button_focused_border_radius: 0.25rem;
+	--_ui5_button_focused_inner_border_radius: 0;
 	--_ui5_button_base_min_width: 2.5rem;
 	--_ui5_button_base_min_compact_width: 2rem;
 	--_ui5_button_base_height: 2.5rem;
@@ -18,6 +21,7 @@
 	--_ui5_button_focus_width: 1px;
 	--_ui5_button_focus_color: var(--sapContent_FocusColor);
 	--_ui5_button_focus_outline_focus_color: var(--sapContent_ContrastFocusColor);
+	--_ui5_button_pressed_focused_border_color: var(--sapContent_ContrastFocusColor);
 
 	--_ui5_button_positive_border_focus_hover_color: var(--sapContent_FocusColor);
 	--_ui5_button_positive_focus_border_color: var(--sapButton_Accept_BorderColor);
@@ -25,6 +29,7 @@
 	--_ui5_button_attention_focus_border_color: var(--sapButton_Negative_BorderColor);
 	--_ui5_button_emphasized_focused_border_color: var(--sapButton_Emphasized_BorderColor);
 	--_ui5_button_fontFamily:  "72override", var(--sapFontFamily);
+	--_ui5_button_emphasized_focused_border_before: none;
 	--_ui5_button_emphasized_focused_border_radius: 0;
 	--_ui5_button_transparent_hover: transparent;
 }

package/src/themes/base/Card-parameters.css

@@ -1,11 +1,12 @@
 :root {
 	--_ui5_card_box_shadow: var(--sapContent_Shadow0);
 	--_ui5_card_hover_box_shadow: var(--_ui5_card_box_shadow);
-	--_ui5_card_border_color: var(--sapTile_BorderColor);
+	--_ui5_card_border: 1px solid var(--sapTile_BorderColor);
 	--_ui5_card_border-radius: var(--sapElement_BorderCornerRadius);
-	--_ui5_card_content_padding: 1rem;
+	--_ui5_card_header_padding: 1rem;
 	--_ui5_card_header_hover_bg: var(--sapList_Hover_Background);
 	--_ui5_card_header_active_bg: var(--_ui5_card_header_hover_bg);
+	--_ui5_card_header_border: 1px solid var(--_ui5_card_header_border_color);
 	--_ui5_card_header_border_color: var(--sapTile_SeparatorColor);
 	--_ui5_card_header_focus_border: var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--sapContent_FocusColor);
 	--_ui5_card_header_focus_radius: 0px;
@@ -14,4 +15,5 @@
 	--_ui5_card_header_title_font_family: "72override", var(--sapFontFamily);
 	--_ui5_card_header_title_font_size: var(--sapFontHeader5Size);
 	--_ui5_card_header_title_font_weight: normal;
-}
+	--_ui5_card_header_subtitle_margin_top: .25rem;
+}

package/src/themes/base/CheckBox-parameters.css

@@ -4,10 +4,13 @@
 --_ui5_checkbox_box_shadow: none;
 --_ui5_checkbox_transition: unset;
 --_ui5_checkbox_focus_border: none;
+--_ui5_checkbox_disabled_opacity: .5;
 --_ui5_checkbox_border_radius: 0;
 --_ui5_checkbox_hover_background: var(--sapField_Hover_Background);
 --_ui5_checkbox_active_background: var(--sapField_Hover_Background);
 --_ui5_checkbox_checkmark_warning_color: var(--sapField_TextColor);
+--_ui5_checkbox_inner_warning_color: var(--sapField_WarningColor);
+--_ui5_checkbox_inner_information_color: currentColor;
 --_ui5_checkbox_checkmark_color: var(--sapSelectedColor);
 --_ui5_checkbox_focus_position: .6875rem;
 --_ui5_checkbox_focus_outline: var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--sapContent_FocusColor);
@@ -45,9 +48,9 @@
 --_ui5_checkbox_compact_focus_position: .375rem;
 --_ui5_checkbox_compact_wrapped_label_margin_top: -1px;
 --_ui5_checkbox_label_color: var(--sapContent_LabelColor);
---_ui5_checkbox_label_offset_left: var(--_ui5_checkbox_wrapper_padding);
---_ui5_checkbox_label_offset_right: 0;
+--_ui5_checkbox_label_offset: var(--_ui5_checkbox_wrapper_padding);
 --_ui5_checkbox_disabled_label_color: var(--sapContent_LabelColor);
 --_ui5_checkbox_default_focus_border: none;
 --_ui5_checkbox_focus_outline_display: block;
+--_ui5_checkbox_right_focus_distance: 0;
 }

package/src/themes/base/Dialog-parameters.css

@@ -1,9 +1,10 @@
 :root {
 	--_ui5_dialog_resize_handle_color: var(--sapButton_Lite_TextColor);
-	--_ui5_dialog_header_focus_width: 0.0625rem;
-	--_ui5_dialog_header_focus_offset: -0.1875rem;
-	--_ui5_dialog_outline: var(--_ui5_dialog_header_focus_width) var(--sapContent_FocusStyle) var(--sapContent_FocusColor);
-	--_ui5_dialog_header_border_radius: 0px;
 	--_ui5_dialog_resize_handle_right: -0.25rem;
 	--_ui5_dialog_resize_handle_bottom: -0.0625rem;
+	--_ui5_dialog_header_focus_bottom_offset: 3px;
+	--_ui5_dialog_header_focus_top_offset: 2px;
+	--_ui5_dialog_header_focus_left_offset: 2px;
+	--_ui5_dialog_header_focus_right_offset: 2px;
+	--_ui5_dialog_header_border_radius: 0px;
 }

package/src/themes/base/Input-parameters.css

@@ -1,63 +1,63 @@
 :root {
 	--_ui5_input_width: 13.125rem;
-	--_ui5_input_height: 2.5rem;
+	--_ui5_input_height: 2.25rem;
 	--_ui5_input_compact_height: 1.625rem;
-	--_ui5-input-hover-border: 1px solid var(--sapField_Hover_BorderColor);
-	--_ui5-input-hover-box-shadow: none;
-	--_ui5-input-focus-box-shadow: none;
-	--_ui5-input-background-color: var(--sapField_Background);
-	--_ui5-input-border-radius: var(--sapField_BorderCornerRadius);
+	--_ui5_input_hover_border: var(--sapField_BorderWidth) var(--sapField_BorderStyle) var(--sapField_Hover_BorderColor);
+	--_ui5_input_hover_box_shadow: none;
+	--_ui5_input_value_state_error_hover_background: var(--sapField_Hover_Background);
+	--_ui5_input_background_color: var(--sapField_Background);
+	--_ui5_input_border_radius: var(--sapField_BorderCornerRadius);
+	--_ui5_input_focus_border_radius: 0;
 	--_ui5-input-border: 2px solid transparent; /* The value of this variable defaults to sap_horizon theme, because if it defaults to fiori, then a flickering of the border is present*/
-	--_ui5-input-placeholder-style: italic;
-	--_ui5-input-placeholder-color: var(--sapField_PlaceholderTextColor);
-	--_ui5-input-bottom-border-height: 0;
-	--_ui5-input-bottom-border-color: transparent;
-	--_ui5-input-focused-border-color: var(--sapField_Hover_BorderColor);
-	--_ui5-input-focus-outline: var(--_ui5_input_focus_border_width) dotted var(--sapContent_FocusColor);
-	--_ui5-input-focus-outline-offset: -3px;
+	--_ui5_input_placeholder_style: italic;
+	--_ui5_input_placeholder_color: var(--sapField_PlaceholderTextColor);
+	--_ui5_input_bottom_border_height: 0;
+	--_ui5_input_bottom_border_color: transparent;
+	--_ui5_input_focused_border_color: var(--sapField_Hover_BorderColor);
 	--_ui5_input_state_border_width: 0.125rem;
-	--_ui5-input-information_border_width: 0.125rem;
+	--_ui5_input_information_border_width: 0.125rem;
 	--_ui5_input_error_font_weight: normal;
 	--_ui5_input_warning_font_weight: normal;
-	--_ui5_input_information_font_weight: normal;
 	--_ui5_input_focus_border_width: 1px;
 	--_ui5_input_error_warning_border_style: solid;
 	--_ui5_input_error_warning_font_style: inherit;
 	--_ui5_input_error_warning_text_indent: 0;
-	--_ui5_input_information_text_indent: 0;
-	--_ui5_input_information_font_style: inherit;
 	--_ui5_input_disabled_color: var(--sapContent_DisabledTextColor);
 	--_ui5_input_disabled_font_weight: normal;
-	--_ui5_input_disabled_border_color: var(--sapField_ReadOnly_BorderColor);
-	--_ui5-input-disabled-background: var(--sapField_ReadOnly_Background);
+	--_ui5_input_disabled_border_color: var(--sapField_BorderColor);
+	--_ui5-input_disabled_background: var(--sapField_Background);
 	--_ui5_input_readonly_border_color: var(--sapField_ReadOnly_BorderColor);
-	--_ui5-input-readonly-background: var(--sapField_ReadOnly_Background);
-	--_ui5_input_icon_padding: 0.625rem .6875rem;
-	--_ui5_input_disabled_opacity: 0.5;
-	--_ui5_input_icon_min_width: 2.375rem;
+	--_ui5_input_readonly_background: var(--sapField_ReadOnly_Background);
+	--_ui5_input_custom_icon_padding: .5625rem .625rem;
+	--_ui5_input_error_warning_custom_icon_padding: .5rem .625rem;
+	--_ui5_input_information_custom_icon_padding: .5rem .625rem;
+	--_ui5_input_error_warning_icon_padding: .5rem .5rem .5rem .5625rem;
+	--_ui5_input_information_icon_padding: .5rem .5rem .5rem .5625rem;
+	--_ui5_input_disabled_opacity: 0.4;
+	--_ui5_input_icon_min_width: 2.25rem;
 	--_ui5_input_compact_min_width: 2rem;
-	--_ui5-input-value-state-outline: var(--_ui5_input_focus_border_width) dotted var(--sapContent_FocusColor);
-	--_ui5-input-value-state-outline-offset: -4px;
-	--_ui5-input-transition: none;
+	--_ui5_input_transition: none;
 	--_ui5-input-value-state-icon-display: none;
-	--_ui5-input-focused-value-state-error-background: var(--sapField_InvalidBackground);
-	--_ui5-input-focused-value-state-warning-background: var(--sapField_WarningBackground);
-	--_ui5-input-focused-value-state-success-background: var(--sapField_SuccessBackground);
-	--_ui5-input-focused-value-state-information-background: var(--sapField_InformationBackground);
-	--_ui5-input-value-state-error-border-color: var(--sapField_InvalidColor);
-	--_ui5-input-focused-value-state-error-border-color: var(--sapField_InvalidColor);
-	--_ui5-input-value-state-warning-border-color: var(--sapField_WarningColor);
-	--_ui5-input-focused-value-state-warning-border-color: var(--sapField_WarningColor);
-	--_ui5-input-value-state-success-border-color: var(--sapField_SuccessColor);
-	--_ui5-input-focused-value-state-success-border-color: var(--sapField_SuccessColor);
-	--_ui5-input-value-state-success-border-width: 1px;
-	--_ui5-input-value-state-information-border-color: var(--sapField_InformationColor);
-	--_ui5-input-focused-value-state-information-border-color: var(--sapField_InformationColor);
+	--_ui5_input_focused_value_state_error_background: var(--sapField_InvalidBackground);
+	--_ui5_input_focused_value_state_warning_background: var(--sapField_WarningBackground);
+	--_ui5_input_focused_value_state_success_background: var(--sapField_SuccessBackground);
+	--_ui5_input_focused_value_state_information_background: var(--sapField_InformationBackground);
+	--_ui5_input_value_state_error_border_color: var(--sapField_InvalidColor);
+	--_ui5_input_focused_value_state_error_border_color: var(--sapField_InvalidColor);
+	--_ui5_input_focused_value_state_error_focus_outline_color: var(--sapContent_FocusColor);
+	--_ui5_input_focused_value_state_warning_focus_outline_color: var(--sapContent_FocusColor);
+	--_ui5_input_focused_value_state_success_focus_outline_color: var(--sapContent_FocusColor);
+	--_ui5_input_value_state_warning_border_color: var(--sapField_WarningColor);
+	--_ui5_input_focused_value_state_warning_border_color: var(--sapField_WarningColor);
+	--_ui5_input_value_state_success_border_color: var(--sapField_SuccessColor);
+	--_ui5_input_focused_value_state_success_border_color: var(--sapField_SuccessColor);
+	--_ui5_input_value_state_success_border_width: 1px;
+	--_ui5_input_value_state_information_border_color: var(--sapField_InformationColor);
+	--_ui5_input_focused_value_state_information_border_color: var(--sapField_InformationColor);
 	--_ui5-input-value-state-information-border-width: 1px;
 	--_ui5-input-background-image: none;
-	--_ui5-input-information-background-image: none;
-	--_ui5-input-success-background-image: none;
-	--_ui5-input-error-background-image: none;
-	--_ui5-input-warning-background-image: none;
-	--_ui5_input_readonly_icon_display: none;
+	--_ui5_input_focus_offset: 1px;
+	--ui5_input_focus_pseudo_element_content: '';
+	--_ui5_input_value_state_error_placeholder_font_weight: normal;
+	--_ui5_input_focus_outline_color: var(--sapContent_FocusColor);
 }

package/src/themes/base/InputIcon-parameters.css

@@ -1,5 +1,5 @@
 :root {
-	--_ui5_input_icon_padding: .5625rem .6875rem;
+	--_ui5_input_icon_padding: .5625rem;
 	--_ui5_input_icon_color: var(--sapContent_IconColor);
 	--_ui5_input_icon_pressed_color: var(--sapButton_Active_TextColor);
 	--_ui5_input_icon_pressed_bg: var(--sapButton_Selected_Background);
@@ -7,5 +7,13 @@
 	--_ui5_input_icon_border_radius: 0;
 	--_ui5_input_icon_box_shadow: none;
 	--_ui5_input_icon_border: 1px solid transparent;
-	--_ui5_input_icon_margin: 0;
+	--_ui5_input_error_icon_box_shadow: var(--_ui5_input_icon_box_shadow);
+	--_ui5_input_warning_icon_box_shadow: var(--_ui5_input_icon_box_shadow);
+	--_ui5_input_information_icon_box_shadow: var(--_ui5_input_icon_box_shadow);
+	--_ui5_input_success_icon_box_shadow: var(--_ui5_input_icon_box_shadow);
+	--_ui5_input_icon_error_pressed_color: var(--sapButton_Active_TextColor);
+	--_ui5_input_icon_warning_pressed_color: var(--sapButton_Active_TextColor);
+	--_ui5_input_icon_information_pressed_color: var(--sapButton_Active_TextColor);
+	--_ui5_input_icon_success_pressed_color: var(--sapButton_Active_TextColor);
+
 }

package/src/themes/base/Link-parameters.css

@@ -1,8 +1,14 @@
 :root {
-	--_ui5_link_opacity: 0.5;
 	--_ui5_link_text_decoration: none;
 	--_ui5_link_hover_text_decoration: underline;
+	--_ui5_link_focused_hover_text_decoration: underline;
+	--_ui5_link_focused_hover_text_color: var(--sapLinkColor);
+	--_ui5_link_active_text_decoration: underline;
 	--_ui5_link_border: 0.0625rem dotted transparent;
 	--_ui5_link_border_focus: 0.0625rem dotted var(--sapContent_FocusColor);
 	--_ui5_link_focus_border-radius: 0;
+	--_ui5_link_focus_background_color: transparent;
+	--_ui5_link_focus_color: inherit;
+	--_ui5_link_focus_text_decoration: underline;
+	--_ui5_link_subtle_text_decoration: none;
 }

package/src/themes/base/MessageStrip-parameters.css

@@ -1,21 +1,18 @@
 :root{
 	--_ui5_message_strip_icon_width: 2.5rem;
-	--_ui5_message_strip_border_radius: 0.1875rem;
-	--_ui5_message_strip_success_border_color: var(--sapSuccessBorderColor);
-	--_ui5_message_strip_error_border_color: var(--sapErrorBorderColor);
-	--_ui5_message_strip_warning_border_color: var(--sapWarningBorderColor);
-	--_ui5_message_strip_information_border_color: var(--sapInformationBorderColor);
 	--_ui5_message_strip_button_border_width: 0;
 	--_ui5_message_strip_button_border_style: none;
 	--_ui5_message_strip_button_border_color: transparent;
 	--_ui5_message_strip_button_border_radius: 0;
 	--_ui5_message_strip_padding: 0.4375rem 2.5rem 0.4375rem 2.5rem;
-	--_ui5_message_strip_padding_no_icon: 0.4375rem 2.5rem 0.4375rem 1rem;
+	--_ui5_message_strip_padding_block_no_icon: 0.4375rem 0.4375rem;
+	--_ui5_message_strip_padding_inline_no_icon: 1rem 2.5rem;
 	--_ui5_message_strip_button_height: 1.625rem;
 	--_ui5_message_strip_border_width: 1px;
 	--_ui5_message_strip_close_button_border: none;
-	--_ui5_message_strip_close_button_size: 1.625rem;
 	--_ui5_message_strip_icon_top: 0.4375rem;
 	--_ui5_message_strip_focus_width: 1px;
 	--_ui5_message_strip_focus_offset: -2px;
+	--_ui5_message_strip_close_button_top: 0.125rem;
+	--_ui5_message_strip_close_button_right: 0.125rem;
 }

package/src/themes/base/Panel-parameters.css

@@ -1,11 +1,11 @@
 :root {
 	--_ui5_panel_focus_border:   var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--sapContent_FocusColor);
-	--_ui5_panel_header_height: 3rem;
 	--_ui5_panel_button_root_width: 3rem;
-	--_ui5_panel_background_color: var(--sapGroup_TitleBackground);
 	--_ui5_panel_border_radius: 0px;
 	--_ui5_panel_border_radius_expanded: 0;
-	--_ui5_panel_border_bottom: 1px solid var(--sapGroup_TitleBorderColor);
+	--_ui5_panel_default_header_border: none;
+	--_ui5_panel_border_bottom: 0.0625rem solid var(--sapGroup_TitleBorderColor);
 	--_ui5_panel_outline_offset: -3px;
-	--_ui5_panel_title_font_weight: normal;
+	--_ui5_panel_icon_color: var(--sapContent_IconColor);
+	--_ui5_panel_header_padding_right: 0.5rem;
 }

package/src/themes/base/PopupsCommon-parameters.css

@@ -6,8 +6,6 @@
 	--_ui5_popup_header_footer_padding_m_l: 2rem;
 	--_ui5_popup_header_footer_padding_xl: 3rem;
 	--_ui5_popup_viewport_margin: 10px;
-	--_ui5-popup-border-radius: 0.25rem;
-	--_ui5_popup_header_shadow: var(--sapContent_Shadow0);
-	--_ui5_popup_footer_border_top: 1px solid var(--sapPageFooter_BorderColor);
 	--_ui5_popup_header_footer_font_weight: 400;
+	--_ui5_popup_header_prop_header_text_alignment: flex-start;
 }