fix(ui5-color-palette): align space between swatches (#3912)

Author: Todor-ads

packages/main/src/themes/ColorPaletteItem.css

@@ -5,6 +5,7 @@
 	border-radius: 0.25rem;
 	display: inline-block;
 	margin: var(--_ui5_color-palette-item-margin);
+	box-sizing: border-box;
 }
 
 :host(:not([_disabled]):hover) {
@@ -28,6 +29,12 @@
 	height: 100%;
 }
 
+.ui5-cp-item:hover {
+	border: 1px solid var(--sapGroup_ContentBackground);
+	border-radius: 0.25rem; 
+	box-sizing: border-box;
+}
+
 :host(:not([_disabled])) .ui5-cp-item:focus{
 	outline: none;
 }
@@ -40,10 +47,10 @@
 	content: "";
 	box-sizing: border-box;
 	position: absolute;
-	left: 0.125rem;
-	top: 0.125rem;
-	right: 0.125rem;
-	bottom: 0.125rem;
+	left: 0.0625rem;
+	top: 0.0625rem;
+	right: 0.0625rem;
+	bottom: 0.0625rem;
 	border: 0.0625rem solid white;
 	pointer-events: none;
 }
@@ -52,10 +59,10 @@
 	content: "";
 	box-sizing: border-box;
 	position: absolute;
-	left: 0.125rem;
-	top: 0.125rem;
-	right: 0.125rem;
-	bottom: 0.125rem;
+	left: 0.0625rem;
+	top: 0.0625rem;
+	right: 0.0625rem;
+	bottom: 0.0625rem;
 	border: 0.0625rem dotted black;
 	pointer-events: none;
 }

packages/main/src/themes/base/ColorPalette-parameters.css

@@ -1,13 +1,9 @@
 :root {
-	--_ui5_color-palette-item-height: 1.75rem;
 	--_ui5_color-palette-item-container-sides-padding: 0.3125rem;
 	--_ui5_color-palette-item-container-rows-padding: 0.6875rem;
 	--_ui5_color-palette-item-focus-height: 1.5rem;
 	--_ui5_color-palette-item-container-padding: var(--_ui5_color-palette-item-container-sides-padding) var(--_ui5_color-palette-item-container-rows-padding);
-	--_ui5_color-palette-item-hover-height: 2.25rem;
-	--_ui5_color-palette-item-margin: calc(var(--_ui5_color-palette-item-hover-height) - var(--_ui5_color-palette-item-height));
-	--_ui5_color-palette-item-hover-margin: calc(var(--_ui5_color-palette-item-margin) / 2);
-	--_ui5_color-palette-row-width: 14.5rem;
+	--_ui5_color-palette-item-hover-margin: 0;
 	--_ui5_color-palette-row-height: 9.5rem;
 	--_ui5_color-palette-button-height: 3rem;
 }

packages/main/src/themes/base/sizes-parameters.css

@@ -16,7 +16,13 @@
 	--_ui5_day_picker_item_height: 2.875rem;
 	--_ui5_day_picker_empty_height: 3rem;
 
-	/* DateTimePicker */
+	/* ColorPalette */
+	 --_ui5_color-palette-item-height: 1.75rem;
+	 --_ui5_color-palette-item-hover-height: 2.375rem;
+	 --_ui5_color-palette-item-margin: calc((var(--_ui5_color-palette-item-hover-height) - var(--_ui5_color-palette-item-height)) / 2);
+	 --_ui5_color-palette-row-width: 12rem;
+	 
+	 /* DateTimePicker */
 	--_ui5_datetime_picker_width: 40.0625rem;
 	--_ui5_datetime_picker_height: 25rem;
 	--_ui5_datetime_timeview_width: 17rem;
@@ -140,9 +146,10 @@
 	--_ui5_color-palette-item-focus-height: 1rem;
 	--_ui5_color-palette-item-container-sides-padding: 0.1875rem;
 	--_ui5_color-palette-item-container-rows-padding: 0.8125rem;
-	--_ui5_color-palette-item-hover-height: 1.65rem;
-	--_ui5_color-palette-item-hover-margin: 0.3125rem;
-	--_ui5_color-palette-row-width: 12rem;
+	--_ui5_color-palette-item-hover-height: 1.625rem;
+	--_ui5_color-palette-item-margin: calc((var(--_ui5_color-palette-item-hover-height) - var(--_ui5_color-palette-item-height)) / 2);
+	--_ui5_color-palette-row-width: 8.125rem;
+	--_ui5_color-palette-item-hover-margin: 0;
 	--_ui5_color-palette-row-height: 7.5rem;
 	--_ui5_color-palette-button-height: 2rem;