@ui5/webcomponents 0.0.0-deac3098a → 0.0.0-e0658a650

package/src/themes/ToggleButton.css

@@ -2,87 +2,122 @@
 	display: inline-block;
 }
 
-/* this line is also included from the Button.css, but keep it here in case we start using it for automatic IE11 compilation */
-:host([disabled]) {
-	pointer-events: none;
+: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="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]: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="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([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]),
-: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([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="Positive"][pressed][active]),
-:host([design="Positive"][pressed]:not([active]):not([non-interactive]):not([_is-touch]):hover) {
-	background: var(--sapButton_Accept_Selected_Hover_Background);
+: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"][pressed]),
-:host([design="Negative"][pressed][focused]),
-:host([design="Negative"][pressed]:hover) {
+: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([design="Positive"][pressed]) {
+	background: var(--sapButton_Accept_Selected_Background);
+	border-color: var(--sapButton_Accept_Selected_BorderColor);
+	color: var(--sapButton_Accept_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"][active][focused]) {
+	background: var(--sapButton_Accept_Active_Background);
+	border-color: var(--sapButton_Accept_Active_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"][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([design="Transparent"]:hover) {
-	border-color: var(--sapButton_Lite_Hover_BorderColor);
+: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([pressed][active]),
-:host([pressed]:not([active]):not([non-interactive]):not([_is-touch]):hover) {
-	background: var(--sapButton_Selected_Hover_Background);
+: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="Emphasized"][pressed]:not([active]):not([non-interactive]):not([_is-touch]):hover) {
-	box-shadow: var(--sapContent_Informative_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="Positive"][pressed]:hover){
-	box-shadow: var(--sapContent_Positive_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="Negative"][pressed]:hover){
-	box-shadow: var(--sapContent_Negative_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);
 }

package/src/themes/Tokenizer.css

@@ -15,7 +15,6 @@
 	height: 100%;
 	display: flex;
 	align-items: center;
-	padding: var(--_ui5_tokenizer_root_padding);
 	overflow-x: scroll;
 	box-sizing: border-box;
 	font-family: "72override", var(--sapFontFamily);
@@ -26,7 +25,7 @@
 }
 
 .ui5-tokenizer-root.ui5-tokenizer-nmore--wrapper {
-	overflow-x: hidden;
+	overflow: hidden;
 }
 
 .ui5-tokenizer--token--wrapper {
@@ -45,41 +44,21 @@
 	display: flex;
 	flex-wrap: nowrap;
 	align-items: center;
-	overflow: auto;
-}
-
-.ui5-tokenizer--content.ui5-tokenizer-nmore--content {
 	overflow: hidden;
+	padding-inline-start: var(--_ui5_tokenizer_padding);
 }
 
 .ui5-tokenizer-more-text {
 	display: inline-block;
-	margin-left: .25rem;
+	margin-inline-start: .25rem;
 	cursor: pointer;
 	white-space: nowrap;
 	font-size: var(--sapFontSize);
-	font-weight: var(--_ui5_tokenizer_n_more_indicator_font_weight);
-	color: var(--_ui5_tokenizer_n_more_indicator_color);
+	font-weight: normal;
+	color: var(--sapField_TextColor);
 }
 
 :host([expanded]) .ui5-tokenizer--content {
 	overflow: hidden;
 	justify-content: flex-end;
-}
-
-::slotted([ui5-token]) {
-	margin-left: .25rem;
-}
-
-/* RTL */
-
-[dir="rtl"] .ui5-tokenizer-more-text {
-	margin-right: .25rem;
-	margin-left: 0;
-}
-
-[dir=rtl] ::slotted([ui5-token]) {
-	margin-right: .25rem;
-	margin-left: 0;
-}
-
+}

package/src/themes/TreeListItem.css

@@ -26,7 +26,7 @@
 	width: 0;
 	height: 0;
 	border-left: 0.375rem solid transparent;
-	border-bottom: .375rem solid var(--sapContent_IconColor);
+	border-bottom: .375rem solid var(--sapContent_NonInteractiveIconColor);
 	position: absolute;
 	right: 0.1875rem;
 	bottom: 0.125rem;
@@ -37,7 +37,7 @@
 }
 
 .ui5-li-root-tree {
-	padding-left: 0;
+	padding-inline-start: 0;
 }
 
 :host(:not([level="1"])) {
@@ -100,8 +100,12 @@
 	width: 100%;
 }
 
-/* RTL */
-.ui5-li-root-tree[dir="rtl"] {
-	padding-left: 1rem;
-	padding-right: 0;
-}
+/* navigated */
+:host([navigated]) .ui5-li-root .ui5-li-navigated {
+	width: 0.1875rem;
+	position: absolute;
+	right: 0;
+	top: 0;
+	bottom: 0;
+	background-color: var(--sapList_SelectionBorderColor);
+}

package/src/themes/ValueStateMessage.css

@@ -1,4 +1,5 @@
 .ui5-valuestatemessage-popover {
+	border-radius: var(--_ui5_value_state_message_popover_border_radius);
 	box-shadow: var(--_ui5_value_state_message_popover_box_shadow);
 }
 
@@ -70,7 +71,6 @@
 .ui5-responsive-popover-header[focused], .ui5-responsive-popover-header:focus {
 	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);
 }
 
 .ui5-valuestatemessage-popover::part(header),

package/src/themes/YearPicker.css

@@ -29,14 +29,13 @@
 	margin: var(--_ui5_yearpicker_item_margin);
 	width: calc(25% - 0.125rem);
 	height: var(--_ui5_year_picker_item_height);
-	color: var(--sapTextColor);
+	color: var(--sapButton_Lite_TextColor);
 	background-color: var(--sapLegend_WorkingBackground);
 	align-items: center;
 	justify-content: center;
 	box-sizing: border-box;
 	-webkit-user-select: none;
 	-moz-user-select: none;
-	-ms-user-select: none;
 	user-select: none;
 	cursor: default;
 	outline: none;
@@ -45,11 +44,22 @@
 	border-radius: var(--_ui5_yearpicker_item_border_radius);
 }
 
+.ui5-yp-item-secondary-type {
+	flex-direction: column;
+	width: calc(50% - 0.125rem);
+}
+
+.ui5-yp-item-sec-type{
+	font-size: 0.75rem;
+	color: var(--sapNeutralElementColor);
+}
+
 .ui5-yp-item:hover {
 	background-color: var(--sapList_Hover_Background);
 }
 
-.ui5-yp-item.ui5-yp-item--selected {
+.ui5-yp-item.ui5-yp-item--selected,
+.ui5-yp-item.ui5-yp-item--selected .ui5-yp-item-sec-type {
 	background-color: var(--_ui5_yearpicker_item_selected_background_color);
 	color: var(--_ui5_yearpicker_item_selected_text_color);
 	box-shadow: var(--_ui5_yearpicker_item_selected_box_shadow);
@@ -66,7 +76,7 @@
 }
 
 .ui5-yp-item.ui5-yp-item--selected:focus::after {
-	border-color: var(--sapContent_ContrastFocusColor);
+	border-color: var(--_ui5_yearpicker_item_focus_after_border);
 }
 
 .ui5-yp-item.ui5-yp-item--selected:hover {
@@ -76,11 +86,8 @@
 .ui5-yp-item:focus::after {
 	content: "";
 	position: absolute;
-	width: var(--_ui5_yearpicker_item_focus_after_width);
-	height: var(--_ui5_yearpicker_item_focus_after_height);
 	border: var(--_ui5_yearpicker_item_focus_after_border);
-	top: var(--_ui5_yearpicker_item_focus_after_offset);
-	left: var(--_ui5_yearpicker_item_focus_after_offset);
+	inset: 0;
 	border-radius: var(--_ui5_yearpicker_item_focus_after_border_radius);
 	outline: var(--_ui5_yearpicker_item_focus_after_outline);
 }

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

@@ -0,0 +1,3 @@
+[ui5-avatar-group] {
+	--_ui5_button_focused_border: none
+}

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

@@ -1,61 +1,43 @@
 :root {
-	--ui5-badge-font-size: 0.75em; /* origin from --sapFontSmallSize (0.75rem) */
-	--_ui5-badge-height: 1rem;
-	--_ui5-badge-border: 0.0625em solid;
-	--_ui5-badge-left-border: 1px solid;
-	--_ui5-badge-border-radius: 0.5em;
-	--_ui5-badge-font-weight: bold;
-	--_ui5-badge-text-transform: uppercase;
 	--_ui5-badge-cursor: default;
-	--_ui5_badge_pointer_events: none;
 
 	--ui5-badge-color-scheme-1-background: var(--sapLegendBackgroundColor1);
-	--ui5-badge-color-scheme-1-hover-background: var(--ui5-badge-color-scheme-1-background);
 	--ui5-badge-color-scheme-1-border: var(--sapAccentColor1);
 	--ui5-badge-color-scheme-1-color: var(--sapTextColor);
 
 	--ui5-badge-color-scheme-2-background: var(--sapLegendBackgroundColor2);
-	--ui5-badge-color-scheme-2-hover-background: var(--ui5-badge-color-scheme-2-background);
 	--ui5-badge-color-scheme-2-border: var(--sapAccentColor2);
 	--ui5-badge-color-scheme-2-color: var(--sapTextColor);
 
 	--ui5-badge-color-scheme-3-background: var(--sapLegendBackgroundColor3);
-	--ui5-badge-color-scheme-3-hover-background: var(--ui5-badge-color-scheme-3-background);
 	--ui5-badge-color-scheme-3-border: var(--sapAccentColor3);
 	--ui5-badge-color-scheme-3-color: var(--sapTextColor);
 
 	--ui5-badge-color-scheme-4-background: var(--sapLegendBackgroundColor5);
-	--ui5-badge-color-scheme-4-hover-background: var(--ui5-badge-color-scheme-4-background);
 	--ui5-badge-color-scheme-4-border: var(--sapAccentColor4);
 	--ui5-badge-color-scheme-4-color: var(--sapTextColor);
 
 	--ui5-badge-color-scheme-5-background: var(--sapLegendBackgroundColor20);
-	--ui5-badge-color-scheme-5-hover-background: var(--ui5-badge-color-scheme-5-background);
 	--ui5-badge-color-scheme-5-border: var(--sapAccentColor5);
 	--ui5-badge-color-scheme-5-color: var(--sapTextColor);
 
 	--ui5-badge-color-scheme-6-background: var(--sapLegendBackgroundColor6);
-	--ui5-badge-color-scheme-6-hover-background: var(--ui5-badge-color-scheme-6-background);
 	--ui5-badge-color-scheme-6-border: var(--sapAccentColor6);
 	--ui5-badge-color-scheme-6-color: var(--sapTextColor);
 
 	--ui5-badge-color-scheme-7-background: var(--sapLegendBackgroundColor7);
-	--ui5-badge-color-scheme-7-hover-background: var(--ui5-badge-color-scheme-7-background);
 	--ui5-badge-color-scheme-7-border: var(--sapAccentColor7);
 	--ui5-badge-color-scheme-7-color: var(--sapTextColor);
 
 	--ui5-badge-color-scheme-8-background: var(--sapLegendBackgroundColor18);
-	--ui5-badge-color-scheme-8-hover-background: var(--ui5-badge-color-scheme-8-background);
 	--ui5-badge-color-scheme-8-border: var(--sapLegendColor18);
 	--ui5-badge-color-scheme-8-color: var(--sapTextColor);
 
 	--ui5-badge-color-scheme-9-background: var(--sapLegendBackgroundColor10);
-	--ui5-badge-color-scheme-9-hover-background: var(--ui5-badge-color-scheme-9-background);
 	--ui5-badge-color-scheme-9-border: var(--sapAccentColor10);
 	--ui5-badge-color-scheme-9-color: var(--sapTextColor);
 
 	--ui5-badge-color-scheme-10-background: var(--sapLegendBackgroundColor9);
-	--ui5-badge-color-scheme-10-hover-background: var(--ui5-badge-color-scheme-10-background);
 	--ui5-badge-color-scheme-10-border: var(--sapAccentColor9);
 	--ui5-badge-color-scheme-10-color: var(--sapTextColor);
 }

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/Carousel-parameters.css

@@ -1,9 +1,10 @@
 :root {
+    --ui5_carousel_background_color: var(--sapBackgroundColor);
     --ui5_carousel_button_size: 2.5rem;
-    --ui5_carousel_height: 0.25rem;
-    --ui5_carousel_width: 0.25rem;
-    --ui5_carousel_margin: 0 0.375rem;
-    --ui5_carousel_border: 1px solid var(--sapContent_ForegroundBorderColor);
-    --ui5_carousel_dot_border: none;
-    --ui5_carousel_dot_background: var(--sapContent_NonInteractiveIconColor);
+    --ui5_carousel_inactive_dot_size: 0.25rem;
+    --ui5_carousel_inactive_dot_margin: 0 0.375rem;
+    --ui5_carousel_inactive_dot_border: none;
+    --ui5_carousel_inactive_dot_background: var(--sapContent_NonInteractiveIconColor);
+    --ui5_carousel_active_dot_border: var(--ui5_carousel_inactive_dot_border);
+    --ui5_carousel_active_dot_background: var(--sapSelectedColor);
 }

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

@@ -48,8 +48,7 @@
 --_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;

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

@@ -8,7 +8,14 @@
 	--_ui5_color-palette-button-height: 3rem;
 	--_ui5_color-palette-item-before-focus-color: 0.0625rem solid white;
 	--_ui5_color-palette-item-before-focus-offset: 0.0625rem;
+	--_ui5_color-palette-item-before-focus-hover-offset: 0.0625rem;
 	--_ui5_color-palette-item-after-focus-color: 0.0625rem dotted black;
 	--_ui5_color-palette-item-after-focus-offset: 0.0625rem;
-	--_ui5_color-palette-item-border-radius: 0;
+	--_ui5_color-palette-item-after-focus-hover-offset: 0.0625rem;
+	--_ui5_color-palette-item-before-focus-border-radius: 0;
+	--_ui5_color-palette-item-before-focus-border-radius: 0;
+	--_ui5_color-palette-item-outer-border-radius: 0.25rem;
+	--_ui5_color-palette-item-inner-border-radius: 0.1875rem;
+	--_ui5_color-palette-item-hover-outer-border-radius: 0.25rem;
+	--_ui5_color-palette-item-hover-inner-border-radius: 0.1875rem;
 }

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

@@ -3,6 +3,11 @@
     --_ui5_color_picker_slider_handle_border: 0.125rem solid var(--sapField_BorderColor);
     --_ui5_color_picker_slider_handle_outline_hover: 0.125rem solid var(--sapButton_Hover_BorderColor);
     --_ui5_color_picker_slider_handle_outline_focus: 0.0625rem dotted var(--sapContent_FocusColor);
-    --_ui5_color_picker_slider_handle_margin_top: 0.0625rem;
-    --_ui5_color_picker_slider_handle_focus_margin_top: 0.0625rem;
+    --_ui5_color_picker_slider_handle_margin_top: 0.125rem;
+    --_ui5_color_picker_slider_handle_focus_margin_top: 0.125rem;
+    --_ui5_color_picker_circle_outer_border: 0.0625rem solid var(--sapContent_ContrastShadowColor);
+    --_ui5_color_picker_circle_inner_border: 0.0625rem solid var(--sapField_BorderColor);
+    --_ui5_color_picker_circle_inner_circle_size: 0.5625rem;
+    --_ui5_color_picker_slider_container_margin_top: -10px;
+    --_ui5_color_picker_slider_handle_inline_focus: none;
 }

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

@@ -38,4 +38,7 @@
 	--_ui5_daypicker_item_selected_between_hover_background: inherit;
 	--_ui5_daypicker_item_now_box_shadow: inset 0 0 0 0.0625rem var(--_ui5_daypicker_item_selected_border_color);
 	--_ui5_daypicker_item_selected_text_outline: none;
+	--_ui5_daypicker_item_now_not_selected_inset: 0;
+	--_ui5_daypicker_item_now_inset: 0.1875rem;
+	--_ui5_daypicker_item_now_border_color: var(--sapLegend_CurrentDateTime);
 }

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

@@ -7,4 +7,12 @@
 	--_ui5_dialog_header_focus_left_offset: 2px;
 	--_ui5_dialog_header_focus_right_offset: 2px;
 	--_ui5_dialog_header_border_radius: 0px;
+	--_ui5_dialog_header_error_state_box_shadow: inset 0 -0.0625rem var(--sapErrorBorderColor), var(--sapContent_HeaderShadow);
+	--_ui5_dialog_header_information_state_box_shadow: inset 0 -0.0625rem var(--sapInformationBorderColor), var(--sapContent_HeaderShadow);
+	--_ui5_dialog_header_success_state_box_shadow: inset 0 -0.0625rem var(--sapSuccessBorderColor), var(--sapContent_HeaderShadow);
+	--_ui5_dialog_header_warning_state_box_shadow: inset 0 -0.0625rem var(--sapWarningBorderColor), var(--sapContent_HeaderShadow);
+	--_ui5_dialog_header_error_state_icon_color: var(--sapNegativeElementColor);
+	--_ui5_dialog_header_information_state_icon_color: var(--sapInformativeElementColor);
+	--_ui5_dialog_header_success_state_icon_color: var(--sapPositiveElementColor);
+	--_ui5_dialog_header_warning_state_icon_color: var(--sapCriticalElementColor);
 }

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

@@ -0,0 +1,4 @@
+:root {
+	--_ui5_file_uploader_hover_border: 1px solid var(--sapField_Hover_BorderColor);
+	--_ui5_file_uploader_value_state_error_hover_background_color: var(--sapField_Hover_Background);
+}

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

@@ -58,6 +58,17 @@
 	--_ui5-input-background-image: none;
 	--_ui5_input_focus_offset: 1px;
 	--ui5_input_focus_pseudo_element_content: '';
-	--_ui5_input_value_state_error_placeholder_font_weight: normal;
+	--_ui5_input_value_state_error_warning_placeholder_font_weight: normal;
 	--_ui5_input_focus_outline_color: var(--sapContent_FocusColor);
+	--_ui5-input_error_placeholder_color: var(--sapField_PlaceholderTextColor);
+	--_ui5_input_icon_width: 2.25rem;
+	--_ui5_input_icon_wrapper_height: 100%;
+	--_ui5_input_icon_wrapper_state_height: 100%;
+	--_ui5_input_icon_wrapper_success_state_height: 100%;
 }
+
+[data-ui5-compact-size],
+.ui5-content-density-compact,
+.sapUiSizeCompact {
+	--_ui5_input_icon_width: 2rem;
+}