@ui5/webcomponents 2.7.0-rc.1 → 2.7.0

package/src/themes/TimePickerClock.css

@@ -29,10 +29,7 @@
 	font-family: var(--sapFontFamily);
 	font-size: var(--sapFontSize);
 	color: var(--sapContent_LabelColor);
-	top: 2.75rem;
-	left: 2.75rem;
-	bottom: 2.75rem;
-	right: 2.75rem;
+	inset: 2.75rem;
 	border-radius: 100%;
 	z-index: 2;
 }
@@ -49,10 +46,7 @@
 
 .ui5-tp-clock-cover {
 	position: absolute;
-	top: 0.5625rem;
-	left: 0.5625rem;
-	bottom: 0.5625rem;
-	right: 0.5625rem;
+	inset: -0.25rem;
 	border-radius: 100%;
 	z-index: 10;
 	touch-action: none;
@@ -98,7 +92,7 @@
 	background-color: var(--sapField_BorderColor);
 }
 
-.ui5-tp-clock-marker {
+.ui5-tp-clock-select-marker {
 	box-sizing: border-box;
 	width: 0.25rem;
 	height: 0.5625rem;
@@ -108,6 +102,16 @@
 	border: 0.0625rem solid var(--sapButton_Selected_BorderColor);
 }
 
+.ui5-tp-clock-hover-marker {
+	box-sizing: border-box;
+	width: 0.25rem;
+	height: 0.5625rem;
+	margin: 0 auto;
+	border-radius: 100%;
+	background-color: var(--sapList_Hover_Background);
+	border: 0.0625rem solid var(--sapGroup_TitleBorderColor);
+}
+
 .ui5-tp-clock-number {
 	box-sizing: border-box;
 	display: inline-block;
@@ -120,10 +124,12 @@
 	font-family: var(--sapFontFamily);
 	font-size: var(--sapFontSize);
 	color: var(--sapTextColor);
+	border: 0.0625rem solid transparent;
 }
 
 .ui5-tp-clock-number.ui5-tp-clock-number-hover:not(.ui5-tp-clock-selected) {
 	background-color: var(--sapList_Hover_Background);
+	z-index: 5;
 }
 
 .ui5-tp-clock-selected {
@@ -132,3 +138,168 @@
 	border: 0.0625rem solid var(--sapButton_Selected_BorderColor);
 }
 
+.ui5-tp-clock-hovered {
+	background-color: var(--sapList_Hover_Background);
+	z-index: 5;
+}
+
+.ui5-tp-clock-pointer {
+	cursor: pointer;
+}
+
+.ui5-tp-clock-items,
+.ui5-tp-clock-markers {
+	position: absolute;
+	inset: 0;
+}
+
+/* Animations */
+
+:host(:not([_skip-animation])) .ui5-tp-clock-active:not(.ui5-tp-clock-transition) .ui5-tp-clock-items .ui5-tp-clock-number,
+:host(:not([_skip-animation])) .ui5-tp-clock-active:not(.ui5-tp-clock-transition) .ui5-tp-clock-items .ui5-tp-clock-mid-dot,
+:host(:not([_skip-animation])) .ui5-tp-clock-active:not(.ui5-tp-clock-transition) .ui5-tp-clock-number.ui5-tp-clock-selected,
+:host(:not([_skip-animation])) .ui5-tp-clock-active:not(.ui5-tp-clock-transition) .ui5-tp-clock-select-marker,
+:host(:not([_skip-animation])) .ui5-tp-clock-active:not(.ui5-tp-clock-transition) .ui5-tp-clock-dial::before {
+	opacity: 0;
+}
+
+.ui5-tp-clock-transition .ui5-tp-clock-items .ui5-tp-clock-number {
+	animation-name: fadeOutClockItems;
+	animation-delay: 0.15s;
+	animation-duration: 0.2s;
+	animation-timing-function: ease-out;
+	animation-fill-mode: forwards;
+}
+
+.ui5-tp-clock-transition .ui5-tp-clock-dial::before {
+	animation-name: fadeOutClockLabel;
+	animation-duration: 0.35s;
+	animation-timing-function: ease-out;
+	animation-fill-mode: forwards;
+}
+
+.ui5-tp-clock-transition .ui5-tp-clock-number.ui5-tp-clock-selected,
+.ui5-tp-clock-transition .ui5-tp-clock-select-marker {
+	animation-name: fadeOutSelectedItem;
+	animation-delay: 0.1s;
+	animation-duration: 0.15s;
+	animation-timing-function: ease-out;
+	animation-fill-mode: forwards;
+}
+
+.ui5-tp-clock-transition .ui5-tp-clock-items .ui5-tp-clock-mid-dot {
+	animation-name: fadeOutSelectedItem;
+	animation-delay: 0.15s;
+	animation-duration: 0.2s;
+	animation-timing-function: ease-out;
+	animation-fill-mode: forwards;
+}
+
+
+:host(:not([_skip-animation])) .ui5-tp-clock-active:not(.ui5-tp-clock-transition) .ui5-tp-clock-items .ui5-tp-clock-number {
+	animation-name: fadeInClockItems;
+	animation-delay: 0.15s;
+	animation-duration: 0.2s;
+	animation-timing-function: ease-in;
+	animation-fill-mode: forwards;
+}
+
+:host(:not([_skip-animation])) .ui5-tp-clock-active:not(.ui5-tp-clock-transition) .ui5-tp-clock-dial::before {
+	animation-name: fadeInClockLabel;
+	animation-duration: 0.35s;
+	animation-timing-function: ease-in;
+	animation-fill-mode: forwards;
+}
+
+:host(:not([_skip-animation])) .ui5-tp-clock-active:not(.ui5-tp-clock-transition) .ui5-tp-clock-number.ui5-tp-clock-selected,
+:host(:not([_skip-animation])) .ui5-tp-clock-active:not(.ui5-tp-clock-transition) .ui5-tp-clock-select-marker {
+	animation-name: fadeInSelectedItem;
+	animation-delay: 0.1s;
+	animation-duration: 0.15s;
+	animation-timing-function: ease-in;
+	animation-fill-mode: forwards;
+}
+
+:host(:not([_skip-animation])) .ui5-tp-clock-active:not(.ui5-tp-clock-transition) .ui5-tp-clock-items .ui5-tp-clock-mid-dot {
+	animation-name: fadeInSelectedItem;
+	animation-delay: 0.15s;
+	animation-duration: 0.2s;
+	animation-timing-function: ease-in;
+	animation-fill-mode: forwards;
+}
+
+/* @keyframes */
+
+@keyframes fadeOutClockItems {
+	from {
+		opacity: 1;
+		display: block;
+	}
+	to {
+		opacity: 0;
+		display: block;
+	}
+}
+
+@keyframes fadeOutClockLabel {
+	from {
+		opacity: 1;
+		display: flex;
+		transform: translateY(0);
+	}
+	to {
+		opacity: 0;
+		display: flex;
+		transform: translateY(-16px);
+	}
+}
+
+@keyframes fadeOutSelectedItem {
+	from {
+		opacity: 1;
+		display: block;
+	}
+	to {
+		opacity: 0;
+		display: block;
+	}
+}
+
+@keyframes fadeInClockItems {
+	from {
+		opacity: 0;
+		display: block;
+	}
+	to {
+		opacity: 1;
+		display: block;
+	}
+}
+
+@keyframes fadeInClockLabel {
+	from {
+		opacity: 0;
+		display: flex;
+		transform: translateY(16px);
+	}
+	to {
+		opacity: 1;
+		display: flex;
+		transform: translateY(0px);
+	}
+}
+
+@keyframes fadeInSelectedItem {
+	from {
+		opacity: 0;
+		display: block;
+	}
+	50% {
+		opacity: 0.5;
+		display: block;
+	}
+	to {
+		opacity: 1;
+		display: block;
+	}
+}

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

@@ -0,0 +1,3 @@
+:root {
+	--_ui5-button-badge-diameter: 0.75rem;
+}

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

@@ -1,13 +1,13 @@
 :root {
-    --_ui5_color_picker_slider_handle_box_shadow: 0.0625rem solid var(--sapField_BorderColor);
+    --_ui5_color_picker_slider_handle_box_shadow: inset 0 0 0 0.125rem var(--sapContent_ContrastShadowColor);
     --_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.125rem;
-    --_ui5_color_picker_slider_handle_focus_margin_top: 0.125rem;
+    --_ui5_color_picker_slider_handle_margin_top: -0.125rem;
+    --_ui5_color_picker_slider_handle_inner_border_color: #fff;
     --_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_border: var(--sapField_Picker_BorderWidth) 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;
+    --_ui5_color_picker_slider_handle_container_margin_top: none;
 }

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

@@ -2,7 +2,6 @@
 	--_ui5_segmented_btn_inner_border: 0.0625rem solid var(--sapButton_BorderColor);
 	--_ui5_segmented_btn_inner_border_odd_child: 0;
 	--_ui5_segmented_btn_inner_pressed_border_odd_child: 0;
-	--_ui5_segmented_btn_inner_border_radius: 0;
 	--_ui5_segmented_btn_item_border_left: 0px;
 	--_ui5_segmented_btn_item_border_right: 0.0625rem;
 }

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

@@ -1,8 +1,6 @@
 :root {
 	--_ui5_split_button_focused_border: 0.0625rem dotted var(--sapContent_FocusColor);
 	--_ui5_split_button_focused_border_radius: 0.125rem;
-	--_ui5_split_button_hover_border_radius: 0;
-	--_ui5_split_button_hover_border_radius: 0;
 	--_ui5_split_button_middle_separator_width: 0;
 	--_ui5_split_button_middle_separator_left: -0.0625rem;
 	--_ui5_split_button_middle_separator_hover_display: block;

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

@@ -37,7 +37,20 @@
 	--_ui5-calendar-legend-item-box-inner-margin: 0.5rem;
 
 	/* ColorPicker */
-	--_ui_color_channel_toggle_button_width: 1.625rem;
+	--_ui5_color_picker_slider_progress_container_height: 1.625rem;
+	--_ui5_color_picker_slider_container_margin_top: -0.5rem;
+	--_ui5_color_picker_slider_handle_height: 2rem;
+	--_ui5_color_picker_slider_handle_width: 1.0625rem;
+	--_ui5_color_picker_slider_handle_after_height: 1.75rem;
+	--_ui5_color_picker_slider_handle_focus_height: 2.125rem;
+	--_ui5_color_picker_colors_wrapper_height: 2.25rem;
+	--_ui5_color_picker_sliders_height: 3rem;
+	--_ui5_color_picker_main_color_margin_bottom: 1rem;
+	--_ui5_color_picker_slider_spacing: 0.9375rem;
+	--_ui5_color_channel_toggle_button_width: 1.625rem;
+	--_ui5_color_channel_toggle_button_margin-top: -0.75rem;
+	--_ui5_color_channel_hex_input_width: 4.8125rem;
+	--_ui5-color_channel_margin_top: 0.25rem;
 
 	/* ColorPalette */
 	 --_ui5_color-palette-item-height: 1.75rem;
@@ -178,6 +191,7 @@
 	--_ui5_button_base_padding: 0.4375rem;
 	--_ui5_button_base_min_width: 2rem;
 	--_ui5_button_icon_font_size: 1rem;
+	--_ui5-button-badge-diameter: 0.625rem;
 
 	/* Calendar */
 	--_ui5_calendar_height: 18rem;
@@ -206,7 +220,20 @@
 	--_ui5_checkbox_partially_icon_size: .5rem;
 
 	/* ColorPicker */
-	--_ui_color_channel_toggle_button_width: 1.375rem;
+	--_ui5_color_picker_slider_progress_container_height: 1.125rem;
+	--_ui5_color_picker_slider_container_margin_top: -0.375rem;
+	--_ui5_color_picker_slider_handle_height: 1.5rem;
+	--_ui5_color_picker_slider_handle_width: 0.9375rem;
+	--_ui5_color_picker_slider_handle_after_height: 1.25rem;
+	--_ui5_color_picker_slider_handle_focus_height: 1.625rem;
+	--_ui5_color_picker_colors_wrapper_height: 1.5rem;
+	--_ui5_color_picker_sliders_height: 2.25rem;
+	--_ui5_color_picker_main_color_margin_bottom: 0.75rem;
+	--_ui5_color_picker_slider_spacing: 0.8125rem;
+	--_ui5_color_channel_toggle_button_width: 1.375rem;
+	--_ui5_color_channel_toggle_button_margin-top: -0.9375rem;
+	--_ui5_color_channel_hex_input_width: 4.625rem;
+	--_ui5-color_channel_margin_top: 0rem;
 
 	/* ColorPalette */
 	--_ui5_color-palette-item-height: 1.25rem;
@@ -220,7 +247,6 @@
 	--_ui5_color-palette-item-hover-margin: 0;
 	--_ui5_color-palette-row-height: 7.5rem;
 	--_ui5_color-palette-button-height: 2rem;
-	--_ui5_color_picker_slider_container_margin_top: -4px;
 
 	/* Custom List Item */
 	--_ui5_custom_list_item_rb_min_width: 2rem;

package/src/themes/sap_fiori_3/parameters-bundle.css

@@ -4,6 +4,7 @@
 @import "../base/Bar-parameters.css";
 @import "../base/BusyIndicator-parameters.css";
 @import "./Button-parameters.css";
+@import "../base/ButtonBadge-parameters.css";
 @import "../base/Card-parameters.css";
 @import "../base/CalendarLegend-parameters.css";
 @import "../base/CalendarLegendItem-parameters.css";

package/src/themes/sap_fiori_3/sizes-parameters.css

@@ -3,11 +3,17 @@
 :root {
 	/* CalendarLegend */
 	--_ui5-calendar-legend-item-root-focus-offset: -0.0625rem;
+
+	/* ColorPicker */
+	--_ui5_color_picker_slider_handle_container_margin_top: 0.25rem;
 }
 
 [data-ui5-compact-size],
 .ui5-content-density-compact,
 .sapUiSizeCompact {
+	/* ColorPicker */
+	--_ui5_color_picker_slider_handle_container_margin_top: none;
+
 	/* Timeline Item */
 	--_ui5_timeline_tli_indicator_after_height: 50%;
 	--_ui5_timeline_tli_indicator_after_top: -50%;

package/src/themes/sap_fiori_3_dark/parameters-bundle.css

@@ -4,6 +4,7 @@
 @import "../base/Bar-parameters.css";
 @import "../base/BusyIndicator-parameters.css";
 @import "./Button-parameters.css";
+@import "../base/ButtonBadge-parameters.css";
 @import "../base/CalendarLegend-parameters.css";
 @import "../base/CalendarLegendItem-parameters.css";
 @import "../base/Card-parameters.css";

package/src/themes/sap_fiori_3_dark/sizes-parameters.css

@@ -3,11 +3,17 @@
 :root {
 	/* CalendarLegend */
     --_ui5-calendar-legend-item-root-focus-offset: -0.0625rem;
+
+    /* ColorPicker */
+	--_ui5_color_picker_slider_handle_container_margin_top: 0.1875rem;
 }
 
 [data-ui5-compact-size],
 .ui5-content-density-compact,
 .sapUiSizeCompact {
+    /* ColorPicker */
+	--_ui5_color_picker_slider_handle_container_margin_top: none;
+
     /* Timeline Item */
     --_ui5_timeline_tli_indicator_after_height: 50%;
     --_ui5_timeline_tli_indicator_after_top: -50%;

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

@@ -1,5 +1,9 @@
 @import "../base/ColorPicker-parameters.css";
 
 :root {
-	--_ui5_color_picker_slider_container_margin_top: -.5rem;
+	--_ui5_color_picker_slider_handle_box_shadow: inset 0 0 0 0.125rem var(--sapContent_ForegroundColor);
+	--_ui5_color_picker_slider_handle_inner_border_color: var(--sapContent_ForegroundColor);
+	--_ui5_color_picker_circle_outer_border: 0.125rem solid var(--sapContent_ContrastShadowColor);
+    --_ui5_color_picker_circle_inner_border: var(--sapField_Picker_BorderWidth) solid var(--sapContent_ForegroundColor);
+    --_ui5_color_picker_circle_inner_circle_size: 0.3125rem;
 }

package/src/themes/sap_fiori_3_hcb/SplitButton-parameters.css

@@ -3,7 +3,6 @@
 :root {
 	--_ui5_split_button_focused_border: 0.125rem dotted var(--sapContent_FocusColor);
 	--_ui5_split_button_focused_border_radius: 0.375rem;
-	--_ui5_split_button_hover_border_radius: 0;
 	--_ui5_split_button_text_button_width: 2.5rem;
 	--_ui5_split_button_text_button_right_border_width: 0;
 	--_ui5_split_button_transparent_hover_background: var(--sapButton_Hover_Background);

package/src/themes/sap_fiori_3_hcb/parameters-bundle.css

@@ -4,6 +4,7 @@
 @import "./Bar-parameters.css";
 @import "./BusyIndicator-parameters.css";
 @import "./Button-parameters.css";
+@import "../base/ButtonBadge-parameters.css";
 @import "../base/CalendarLegend-parameters.css";
 @import "../base/CalendarLegendItem-parameters.css";
 @import "./CalendarHeader-parameters.css";

package/src/themes/sap_fiori_3_hcb/sizes-parameters.css

@@ -4,6 +4,9 @@
 	--_ui5_slider_handle_width: 1.25rem;
 	--_ui5_slider_handle_height: 1.25rem;
 	--_ui5_slider_handle_top: -0.5rem;
+
+	/* ColorPicker */
+	--_ui5_color_picker_slider_handle_container_margin_top: -0.125rem;
 }
 
 [data-ui5-compact-size],
@@ -13,6 +16,9 @@
 	--_ui5_checkbox_focus_position: 0.3125rem;
 	--_ui5_checkbox_wrapped_focus_inset_block: 0.1875rem;
 
+	/* ColorPicker */
+	--_ui5_color_picker_slider_handle_container_margin_top: none;
+
 	/* SplitButton */
 	--_ui5_split_button_text_button_width: 2.25rem;
 

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

@@ -1,5 +1,9 @@
 @import "../base/ColorPicker-parameters.css";
 
 :root {
-	--_ui5_color_picker_slider_container_margin_top: -.5rem;
+	--_ui5_color_picker_slider_handle_box_shadow: inset 0 0 0 0.125rem var(--sapContent_ForegroundColor);
+    --_ui5_color_picker_slider_handle_inner_border_color: var(--sapContent_ForegroundColor);
+	--_ui5_color_picker_circle_outer_border: 0.125rem solid var(--sapContent_ContrastShadowColor);
+    --_ui5_color_picker_circle_inner_border: var(--sapField_Picker_BorderWidth) solid var(--sapContent_ForegroundColor);
+    --_ui5_color_picker_circle_inner_circle_size: 0.3125rem;
 }

package/src/themes/sap_fiori_3_hcw/SplitButton-parameters.css

@@ -3,7 +3,6 @@
 :root {
 	--_ui5_split_button_focused_border: 0.125rem dotted var(--sapContent_FocusColor);
 	--_ui5_split_button_focused_border_radius: 0.375rem;
-	--_ui5_split_button_hover_border_radius: 0;
 	--_ui5_split_button_text_button_width: 2.5rem;
 	--_ui5_split_button_text_button_right_border_width: 0;
 	--_ui5_split_button_transparent_hover_background: var(--sapButton_Hover_Background);

package/src/themes/sap_fiori_3_hcw/parameters-bundle.css

@@ -3,6 +3,7 @@
 @import "./Tag-parameters.css";
 @import "./BusyIndicator-parameters.css";
 @import "./Button-parameters.css";
+@import "../base/ButtonBadge-parameters.css";
 @import "../base/CalendarLegend-parameters.css";
 @import "../base/CalendarLegendItem-parameters.css";
 @import "./CalendarHeader-parameters.css";

package/src/themes/sap_fiori_3_hcw/sizes-parameters.css

@@ -4,6 +4,9 @@
 	--_ui5_slider_handle_width: 1.25rem;
 	--_ui5_slider_handle_height: 1.25rem;
 	--_ui5_slider_handle_top: -0.5rem;
+
+	/* ColorPicker */
+	--_ui5_color_picker_slider_handle_container_margin_top: -0.125rem;
 }
 
 [data-ui5-compact-size],
@@ -13,6 +16,9 @@
 	--_ui5_checkbox_focus_position: 0.3125rem;
 	--_ui5_checkbox_wrapped_focus_inset_block: 0.1875rem;
 
+	/* ColorPicker */
+	--_ui5_color_picker_slider_handle_container_margin_top: none;
+
 	/* SplitButton */
 	--_ui5_split_button_text_button_width: 2.25rem;
 

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

@@ -1,12 +1,8 @@
 @import "../base/ColorPicker-parameters.css";
 
 :root {
-    --_ui5_color_picker_slider_handle_box_shadow: 0.125rem solid var(--sapField_BorderColor);
     --_ui5_color_picker_slider_handle_border: 0.125rem solid var(--sapField_BorderColor);
     --_ui5_color_picker_slider_handle_outline_hover: 0.125rem solid var(--sapContent_FocusColor);
     --_ui5_color_picker_slider_handle_outline_focus: 0.125rem solid var(--sapContent_FocusColor);
-    --_ui5_color_picker_slider_handle_margin_top: -.1875rem;
-    --_ui5_color_picker_slider_handle_focus_margin_top: var(--_ui5_color_picker_slider_handle_margin_top);
-    --_ui5_color_picker_slider_container_margin_top: -11px;
     --_ui5_color_picker_slider_handle_inline_focus: 1px solid var(--sapContent_ContrastFocusColor);
 }

package/src/themes/sap_horizon/SegmentedButtton-parameters.css

@@ -4,7 +4,6 @@
 	--_ui5_segmented_btn_inner_border: 0.0625rem solid transparent;
 	--_ui5_segmented_btn_inner_border_odd_child: 0.0625rem solid transparent;
 	--_ui5_segmented_btn_inner_pressed_border_odd_child: 0.0625rem solid var(--sapButton_Selected_BorderColor);
-	--_ui5_segmented_btn_inner_border_radius: var(--sapButton_BorderCornerRadius);
 	--_ui5_segmented_btn_background_color: var(--sapButton_Lite_Background);
 	--_ui5_segmented_btn_border_color: var(--sapButton_Lite_BorderColor);
 	--_ui5_segmented_btn_hover_box_shadow: none;

package/src/themes/sap_horizon/SplitButton-parameters.css

@@ -3,7 +3,6 @@
 :root {
 	--_ui5_split_button_focused_border: 0.125rem solid var(--sapContent_FocusColor);
 	--_ui5_split_button_focused_border_radius: 0.375rem;
-	--_ui5_split_button_hover_border_radius: var(--_ui5_button_border_radius);
 	--_ui5_split_button_middle_separator_width: 0;
 	--_ui5_split_button_middle_separator_left: -0.0625rem;
 	--_ui5_split_button_middle_separator_hover_display: none;

package/src/themes/sap_horizon/parameters-bundle.css

@@ -5,6 +5,7 @@
 @import "./Breadcrumbs-parameters.css";
 @import "./BusyIndicator-parameters.css";
 @import "./Button-parameters.css";
+@import "../base/ButtonBadge-parameters.css";
 @import "../base/CalendarLegend-parameters.css";
 @import "./CalendarLegendItem-parameters.css";
 @import "../base/Card-parameters.css";

package/src/themes/sap_horizon/sizes-parameters.css

@@ -52,7 +52,6 @@
 	--_ui5_color-palette-row-height: 7.5rem;
 	--_ui5_color-palette-button-height: 2rem;
 	--_ui5_color-palette-item-before-focus-inset: -0.25rem;
-	--_ui5_color_picker_slider_container_margin_top: -9px;
 
 	/* DayPicker */
 	--_ui5_daypicker_selected_item_now_special_day_top: 1.5625rem;

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

@@ -1,12 +1,8 @@
 @import "../base/ColorPicker-parameters.css";
 
 :root {
-    --_ui5_color_picker_slider_handle_box_shadow: 0.125rem solid var(--sapField_BorderColor);
     --_ui5_color_picker_slider_handle_border: 0.125rem solid var(--sapField_BorderColor);
     --_ui5_color_picker_slider_handle_outline_hover: 0.125rem solid var(--sapContent_FocusColor);
     --_ui5_color_picker_slider_handle_outline_focus: 0.125rem solid var(--sapContent_FocusColor);
-    --_ui5_color_picker_slider_handle_margin_top: -.1875rem;
-    --_ui5_color_picker_slider_handle_focus_margin_top: var(--_ui5_color_picker_slider_handle_margin_top);
-    --_ui5_color_picker_slider_container_margin_top: -11px;
     --_ui5_color_picker_slider_handle_inline_focus: 1px solid var(--sapContent_ContrastFocusColor);
 }

package/src/themes/sap_horizon_dark/SegmentedButtton-parameters.css

@@ -4,7 +4,6 @@
 	--_ui5_segmented_btn_inner_border: 0.0625rem solid transparent;
 	--_ui5_segmented_btn_inner_border_odd_child: 0.0625rem solid transparent;
 	--_ui5_segmented_btn_inner_pressed_border_odd_child: 0.0625rem solid var(--sapButton_Selected_BorderColor);
-	--_ui5_segmented_btn_inner_border_radius: var(--sapButton_BorderCornerRadius);
 	--_ui5_segmented_btn_background_color: var(--sapButton_Lite_Background);
 	--_ui5_segmented_btn_border_color: var(--sapButton_Lite_BorderColor);
 	--_ui5_segmented_btn_hover_box_shadow: none;

package/src/themes/sap_horizon_dark/SplitButton-parameters.css

@@ -3,7 +3,6 @@
 :root {
 	--_ui5_split_button_focused_border: 0.125rem solid var(--sapContent_FocusColor);
 	--_ui5_split_button_focused_border_radius: 0.375rem;
-	--_ui5_split_button_hover_border_radius: var(--_ui5_button_border_radius);
 	--_ui5_split_button_middle_separator_width: 0;
 	--_ui5_split_button_middle_separator_left: -0.0625rem;
 	--_ui5_split_button_middle_separator_hover_display: none;

package/src/themes/sap_horizon_dark/parameters-bundle.css

@@ -5,6 +5,7 @@
 @import "./Breadcrumbs-parameters.css";
 @import "./BusyIndicator-parameters.css";
 @import "./Button-parameters.css";
+@import "../base/ButtonBadge-parameters.css";
 @import "../base/CalendarLegend-parameters.css";
 @import "./CalendarLegendItem-parameters.css";
 @import "../base/Card-parameters.css";

package/src/themes/sap_horizon_dark/sizes-parameters.css

@@ -49,7 +49,6 @@
 	--_ui5_color-palette-row-height: 7.5rem;
 	--_ui5_color-palette-button-height: 2rem;
 	--_ui5_color-palette-item-before-focus-inset: -0.25rem;
-	--_ui5_color_picker_slider_container_margin_top: -9px;
 
 	/* DayPicker */
 	--_ui5_daypicker_selected_item_now_special_day_top: 1.5625rem;

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

@@ -1,10 +1,9 @@
 @import "../base/ColorPicker-parameters.css";
 
 :root {
+    --_ui5_color_picker_slider_handle_box_shadow: inset 0 0 0 0.125rem var(--sapContent_ForegroundColor);
     --_ui5_color_picker_circle_outer_border: 0.125rem solid var(--sapContent_ContrastShadowColor);
-    --_ui5_color_picker_circle_inner_border: 0.125rem solid var(--sapContent_ForegroundColor); 
+    --_ui5_color_picker_circle_inner_border: var(--sapField_Picker_BorderWidth) solid var(--sapContent_ForegroundColor); 
     --_ui5_color_picker_circle_inner_circle_size: 0.3125rem;
-    --_ui5_color_picker_slider_handle_margin_top: -.1875rem;
-    --_ui5_color_picker_slider_handle_focus_margin_top: var(--_ui5_color_picker_slider_handle_margin_top);
-    --_ui5_color_picker_slider_container_margin_top: -11px;
+    --_ui5_color_picker_slider_handle_inner_border_color: var(--sapContent_ForegroundColor);
 }

package/src/themes/sap_horizon_hcb/SegmentedButtton-parameters.css

@@ -4,5 +4,4 @@
 	--_ui5_segmented_btn_inner_border: 0.0625rem solid var(--sapButton_Selected_BorderColor);
 	--_ui5_segmented_btn_inner_border_odd_child: 0.0625rem solid transparent;
 	--_ui5_segmented_btn_inner_pressed_border_odd_child: 0.0625rem solid var(--sapButton_Selected_BorderColor);
-	--_ui5_segmented_btn_inner_border_radius: 0;
 }

package/src/themes/sap_horizon_hcb/SplitButton-parameters.css

@@ -3,7 +3,6 @@
 :root {
 	--_ui5_split_button_focused_border: 0.125rem dotted var(--sapContent_FocusColor);
 	--_ui5_split_button_focused_border_radius: 0.375rem;
-	--_ui5_split_button_hover_border_radius: 0;
 	--_ui5_split_button_text_button_width: 2.5rem;
 	--_ui5_split_button_text_button_right_border_width: 0;
 	--_ui5_split_button_transparent_hover_background: var(--sapButton_Hover_Background);

package/src/themes/sap_horizon_hcb/parameters-bundle.css

@@ -4,6 +4,7 @@
 @import "./Bar-parameters.css";
 @import "./BusyIndicator-parameters.css";
 @import "./Button-parameters.css";
+@import "../base/ButtonBadge-parameters.css";
 @import "../base/CalendarLegend-parameters.css";
 @import "../base/CalendarLegendItem-parameters.css";
 @import "./CalendarHeader-parameters.css";

package/src/themes/sap_horizon_hcb/sizes-parameters.css

@@ -5,7 +5,9 @@
 .sapUiSizeCompact {
 	/* SplitButton */
 	--_ui5_split_button_text_button_width: 2.25rem;
-	--_ui5_color_picker_slider_container_margin_top: -10px;
+
+	/* ColorPicker */
+	--_ui5_color_picker_slider_handle_container_margin_top: 0.0625rem;
 
 	/* CheckBox */
 	--_ui5_checkbox_focus_position: 0.25rem;

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

@@ -1,10 +1,9 @@
 @import "../base/ColorPicker-parameters.css";
 
 :root {
+    --_ui5_color_picker_slider_handle_box_shadow: inset 0 0 0 0.125rem var(--sapContent_ForegroundColor);
     --_ui5_color_picker_circle_outer_border: 0.125rem solid var(--sapContent_ContrastShadowColor);
-    --_ui5_color_picker_circle_inner_border: 0.125rem solid var(--sapContent_ForegroundColor);
+    --_ui5_color_picker_circle_inner_border: var(--sapField_Picker_BorderWidth) solid var(--sapContent_ForegroundColor);
     --_ui5_color_picker_circle_inner_circle_size: 0.3125rem;
-    --_ui5_color_picker_slider_handle_margin_top: -.1875rem;
-    --_ui5_color_picker_slider_handle_focus_margin_top: var(--_ui5_color_picker_slider_handle_margin_top);
-    --_ui5_color_picker_slider_container_margin_top: -11px;
+    --_ui5_color_picker_slider_handle_inner_border_color: var(--sapContent_ForegroundColor);
 }