fix(ui5-color-picker): align the slider to horizon spec (#5209)

tsanislavgatev · web-flow · commit fd97a4223490 · 2022-05-17T13:46:42.000+03:00
* fix(ui5-color-picker): align the slider to horizon spec

* fix(ui5-color-picker): include of size params in high contrast topics
diff --git a/packages/main/src/themes/ColorPicker.css b/packages/main/src/themes/ColorPicker.css
@@ -71,7 +71,7 @@
 
 [ui5-slider]::part(handle)::after {
     content: "";
-    border: 1px solid #fff;
+    border: 2px solid #fff;
     display: block;
     height: 1.25rem;
     border-radius: 1rem;
@@ -192,6 +192,27 @@
     outline-offset: 0.0625rem;
 }
 
+.ui5-color-picker-alpha-slider::part(handle):focus::before,
+.ui5-color-picker-hue-slider::part(handle):focus::before {
+    content: "";
+    border: var(--_ui5_color_picker_slider_handle_inline_focus);
+    display: block;
+    height: 1.625rem;
+    border-radius: 1rem;
+    width: 1.05rem;
+    box-sizing: border-box;
+    top: -3px;
+    position: absolute;
+    bottom: 2px;
+    left: -3px;
+    right: -3px;
+}
+
+.ui5-color-picker-alpha-slider::part(handle)::before,
+.ui5-color-picker-hue-slider::part(handle)::before {
+    display: none;
+}
+
 .ui5-color-picker-alpha-slider::part(handle):focus,
 .ui5-color-picker-hue-slider::part(handle):focus {
     margin-top: var(--_ui5_color_picker_slider_handle_focus_margin_top);
diff --git a/packages/main/src/themes/base/ColorPicker-parameters.css b/packages/main/src/themes/base/ColorPicker-parameters.css
@@ -9,4 +9,5 @@
     --_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;
 }
diff --git a/packages/main/src/themes/base/sizes-parameters.css b/packages/main/src/themes/base/sizes-parameters.css
@@ -208,6 +208,7 @@
 	--_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;
diff --git a/packages/main/src/themes/sap_horizon/ColorPicker-parameters.css b/packages/main/src/themes/sap_horizon/ColorPicker-parameters.css
@@ -8,4 +8,5 @@
     --_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);
 }
diff --git a/packages/main/src/themes/sap_horizon/sizes-parameters.css b/packages/main/src/themes/sap_horizon/sizes-parameters.css
@@ -38,4 +38,5 @@
 	--_ui5_color-palette-button-height: 2rem;
 	--_ui5_color-palette-item-before-focus-offset: -0.25rem;
 	--_ui5_color-palette-item-after-focus-offset: -0.125rem;
+	--_ui5_color_picker_slider_container_margin_top: -9px;
 }
diff --git a/packages/main/src/themes/sap_horizon_dark/ColorPicker-parameters.css b/packages/main/src/themes/sap_horizon_dark/ColorPicker-parameters.css
@@ -8,4 +8,5 @@
     --_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);
 }
diff --git a/packages/main/src/themes/sap_horizon_dark/sizes-parameters.css b/packages/main/src/themes/sap_horizon_dark/sizes-parameters.css
@@ -36,4 +36,5 @@
 	--_ui5_color-palette-button-height: 2rem;
 	--_ui5_color-palette-item-before-focus-offset: -0.25rem;
 	--_ui5_color-palette-item-after-focus-offset: -0.125rem;
+	--_ui5_color_picker_slider_container_margin_top: -9px;
 }
diff --git a/packages/main/src/themes/sap_horizon_hcb/parameters-bundle.css b/packages/main/src/themes/sap_horizon_hcb/parameters-bundle.css
@@ -1,4 +1,4 @@
-@import "../base/sizes-parameters.css";
+@import "./sizes-parameters.css";
 @import "../base/rtl-parameters.css";
 @import "./Avatar-parameters.css";
 @import "../base/AvatarGroup-parameters.css";
diff --git a/packages/main/src/themes/sap_horizon_hcb/sizes-parameters.css b/packages/main/src/themes/sap_horizon_hcb/sizes-parameters.css
@@ -5,4 +5,5 @@
 .sapUiSizeCompact {
 	/* SplitButton */
 	--_ui5_split_button_text_button_width: 2.25rem;
+	--_ui5_color_picker_slider_container_margin_top: -10px;
 }
diff --git a/packages/main/src/themes/sap_horizon_hcw/parameters-bundle.css b/packages/main/src/themes/sap_horizon_hcw/parameters-bundle.css
@@ -1,4 +1,4 @@
-@import "../base/sizes-parameters.css";
+@import "./sizes-parameters.css";
 @import "../base/rtl-parameters.css";
 @import "./Avatar-parameters.css";
 @import "../base/AvatarGroup-parameters.css";
diff --git a/packages/main/src/themes/sap_horizon_hcw/sizes-parameters.css b/packages/main/src/themes/sap_horizon_hcw/sizes-parameters.css
@@ -5,4 +5,5 @@
 .sapUiSizeCompact {
 	/* SplitButton */
 	--_ui5_split_button_text_button_width: 2.25rem;
+	--_ui5_color_picker_slider_container_margin_top: -10px;
 }

Original file line number	Diff line number	Diff line change
`@@ -9,4 +9,5 @@`
`9`	`9`	`--_ui5_color_picker_circle_inner_border: 0.0625rem solid var(--sapField_BorderColor);`
`10`	`10`	`--_ui5_color_picker_circle_inner_circle_size: 0.5625rem;`
`11`	`11`	`--_ui5_color_picker_slider_container_margin_top: -10px;`
	`12`	`+ --_ui5_color_picker_slider_handle_inline_focus: none;`
`12`	`13`	`}`
Original file line number	Diff line number	Diff line change
`@@ -8,4 +8,5 @@`
`8`	`8`	`--_ui5_color_picker_slider_handle_margin_top: -.1875rem;`
`9`	`9`	`--_ui5_color_picker_slider_handle_focus_margin_top: var(--_ui5_color_picker_slider_handle_margin_top);`
`10`	`10`	`--_ui5_color_picker_slider_container_margin_top: -11px;`
	`11`	`+ --_ui5_color_picker_slider_handle_inline_focus: 1px solid var(--sapContent_ContrastFocusColor);`
`11`	`12`	`}`
Original file line number	Diff line number	Diff line change
`@@ -38,4 +38,5 @@`
`38`	`38`	`--_ui5_color-palette-button-height: 2rem;`
`39`	`39`	`--_ui5_color-palette-item-before-focus-offset: -0.25rem;`
`40`	`40`	`--_ui5_color-palette-item-after-focus-offset: -0.125rem;`
	`41`	`+ --_ui5_color_picker_slider_container_margin_top: -9px;`
`41`	`42`	`}`
Original file line number	Diff line number	Diff line change
`@@ -36,4 +36,5 @@`
`36`	`36`	`--_ui5_color-palette-button-height: 2rem;`
`37`	`37`	`--_ui5_color-palette-item-before-focus-offset: -0.25rem;`
`38`	`38`	`--_ui5_color-palette-item-after-focus-offset: -0.125rem;`
	`39`	`+ --_ui5_color_picker_slider_container_margin_top: -9px;`
`39`	`40`	`}`
Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,4 @@`
`1`		`-@import "../base/sizes-parameters.css";`
	`1`	`+@import "./sizes-parameters.css";`
`2`	`2`	`@import "../base/rtl-parameters.css";`
`3`	`3`	`@import "./Avatar-parameters.css";`
`4`	`4`	`@import "../base/AvatarGroup-parameters.css";`
Original file line number	Diff line number	Diff line change
`@@ -5,4 +5,5 @@`
`5`	`5`	`.sapUiSizeCompact {`
`6`	`6`	`/* SplitButton */`
`7`	`7`	`--_ui5_split_button_text_button_width: 2.25rem;`
	`8`	`+ --_ui5_color_picker_slider_container_margin_top: -10px;`
`8`	`9`	`}`