fix(ui5-slider, ui5-range-slider): adjust styles according to Fiori s…

…pecs (#9973) * fix(ui5-slider, ui5-range-slider): adjust styles according to Fiori specs fixes: #9614
SAP · Oct 14, 2024 · e1182a9 · e1182a9
1 parent fd402e4
commit e1182a9
Show file tree

Hide file tree

Showing 10 changed files with 39 additions and 3 deletions.
diff --git a/packages/main/src/themes/SliderBase.css b/packages/main/src/themes/SliderBase.css
@@ -150,6 +150,7 @@
 
 .ui5-slider-tooltip {
 	display: flex;
+	font-family: var(--sapFontFamily);
 	justify-content: center;
 	align-items: center;
 	visibility: hidden;
@@ -195,6 +196,7 @@
 	text-align: center;
 	display: inline-block;
 	color: var(--_ui5_slider_label_color);
+	font-family: var(--sapFontFamily);
 	font-size: var(--_ui5_slider_label_fontsize);
 	padding-top: 0;
 	box-sizing: border-box;

diff --git a/packages/main/src/themes/base/sizes-parameters.css b/packages/main/src/themes/base/sizes-parameters.css
@@ -344,7 +344,7 @@
 
 	/* Slider */
 	--_ui5_slider_handle_height: 1.25rem;
-	--_ui5_slider_handle_width: 1.25rem;
+	--_ui5_slider_handle_width: 1.5rem;
 	--_ui5_slider_handle_top: -.5rem;
 	--_ui5_slider_tooltip_height: 1rem;
 	--_ui5_slider_tooltip_padding: 0.25rem;

diff --git a/packages/main/src/themes/sap_fiori_3/SliderBase-parameters.css b/packages/main/src/themes/sap_fiori_3/SliderBase-parameters.css
@@ -15,3 +15,10 @@
 	--_ui5_slider_handle_box_sizing: border-box;
 	--_ui5_slider_tickmark_top: -.34375rem;
 }
+
+[data-ui5-compact-size],
+.ui5-content-density-compact,
+.sapUiSizeCompact {
+--_ui5_slider_handle_width: 1.25rem;
+--_ui5_slider_handle_height: 1.25rem;
+}
diff --git a/packages/main/src/themes/sap_fiori_3/sizes-parameters.css b/packages/main/src/themes/sap_fiori_3/sizes-parameters.css
@@ -15,4 +15,8 @@
 
 	/* Timeline Group Item */
 	--_ui5_timeline_tlgi_root_horizontal_height: 20.90625rem;
+
+	/* Slider, Range Slider */
+	--_ui5_slider_handle_width: 1.25rem;
+	--_ui5_slider_handle_height: 1.25rem;
 }
diff --git a/packages/main/src/themes/sap_fiori_3_dark/SliderBase-parameters.css b/packages/main/src/themes/sap_fiori_3_dark/SliderBase-parameters.css
@@ -4,4 +4,11 @@
 	--_ui5_slider_inner_min_width: 4rem;
 	--_ui5_range_slider_handle_background: transparent;
 	--_ui5_range_slider_root_hover_handle_bg: transparent;
+}
+
+[data-ui5-compact-size],
+.ui5-content-density-compact,
+.sapUiSizeCompact {
+--_ui5_slider_handle_width: 1.25rem;
+--_ui5_slider_handle_height: 1.25rem;
 }
diff --git a/packages/main/src/themes/sap_fiori_3_dark/sizes-parameters.css b/packages/main/src/themes/sap_fiori_3_dark/sizes-parameters.css
@@ -12,4 +12,8 @@
     --_ui5_timeline_tli_indicator_after_height: 50%;
     --_ui5_timeline_tli_indicator_after_top: -50%;
     --_ui5_timeline_tli_horizontal_indicator_after_width: calc(100% - 1rem);
+
+    /* Slider, Range Slider */
+	--_ui5_slider_handle_width: 1.25rem;
+	--_ui5_slider_handle_height: 1.25rem;
 }
diff --git a/packages/main/src/themes/sap_fiori_3_hcb/sizes-parameters.css b/packages/main/src/themes/sap_fiori_3_hcb/sizes-parameters.css
@@ -1,4 +1,10 @@
 @import "../base/sizes-parameters.css";
+:root {
+	/* Slider, Range Slider */
+	--_ui5_slider_handle_width: 1.25rem;
+	--_ui5_slider_handle_height: 1.25rem;
+	--_ui5_slider_handle_top: -0.5rem;
+}
 
 [data-ui5-compact-size],
 .ui5-content-density-compact,

diff --git a/packages/main/src/themes/sap_fiori_3_hcw/sizes-parameters.css b/packages/main/src/themes/sap_fiori_3_hcw/sizes-parameters.css
@@ -1,4 +1,10 @@
 @import "../base/sizes-parameters.css";
+:root {
+	/* Slider, Range Slider */
+	--_ui5_slider_handle_width: 1.25rem;
+	--_ui5_slider_handle_height: 1.25rem;
+	--_ui5_slider_handle_top: -0.5rem;
+}
 
 [data-ui5-compact-size],
 .ui5-content-density-compact,

diff --git a/packages/main/src/themes/sap_horizon_hcb/SliderBase-parameters.css b/packages/main/src/themes/sap_horizon_hcb/SliderBase-parameters.css
@@ -20,7 +20,7 @@
 	--_ui5_range_slider_handle_active_background: var(--sapSlider_Active_RangeHandleBackground);
 	--_ui5_slider_inner_height: 0.25rem;
 	--_ui5_slider_progress_border: solid 0.0625rem var(--sapContent_MeasureIndicatorColor);
-	--_ui5_slider_progress_border_radius: 0.375rem;
+	--_ui5_slider_progress_border_radius: 0.25rem;
 	--_ui5_slider_progress_background: var(--sapSlider_Selected_Background);
 	--_ui5_slider_progress_container_background: var(--sapSlider_Background);
 	--_ui5_slider_progress_container_dot_display: block;

diff --git a/packages/main/src/themes/sap_horizon_hcw/SliderBase-parameters.css b/packages/main/src/themes/sap_horizon_hcw/SliderBase-parameters.css
@@ -20,7 +20,7 @@
 	--_ui5_range_slider_handle_active_background: var(--sapSlider_Active_RangeHandleBackground);
 	--_ui5_slider_inner_height: 0.25rem;
 	--_ui5_slider_progress_border: solid 0.0625rem var(--sapContent_MeasureIndicatorColor);
-	--_ui5_slider_progress_border_radius: 0.375rem;
+	--_ui5_slider_progress_border_radius: 0.25rem;
 	--_ui5_slider_progress_background: var(--sapSlider_Selected_Background);
 	--_ui5_slider_progress_container_background: var(--sapSlider_Background);
 	--_ui5_slider_progress_container_dot_display: block;