fix(ui5-color-palette): Adapt components with responsive paddings (#4985)

Fixes: #4869

Author: Todor-ads

packages/main/src/themes/ColorPalette.css

@@ -24,6 +24,7 @@
 	width: 18.5rem;
 	max-width: 19.5rem;
 	max-height: 13rem;
+	padding: 0.375rem 0.625rem;
 }
 
 .ui5-cp-recent-colors-wrapper {
@@ -43,6 +44,7 @@
 	flex-flow: wrap;
 	max-height: var(--_ui5_color-palette-row-height);
 	overflow: hidden;
+	padding: var(--_ui5_color-palette-swatch-container-padding);
 }
 
 .ui5-cp-separator {

packages/main/src/themes/ColorPalettePopover.css

@@ -15,3 +15,7 @@
 [ui5-responsive-popover]::part(content) {
 	padding: 0;
 }
+
+.ui5-cp-item-container {
+	padding: 0.3125rem 0.6875rem;
+}

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

@@ -23,6 +23,7 @@
 	 --_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;
+	 --_ui5_color-palette-swatch-container-padding: 0.3125rem 0.6875rem;
 
 	 /* DateTimePicker */
 	--_ui5_datetime_picker_width: 40.0625rem;
@@ -166,6 +167,7 @@
 	--_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-swatch-container-padding: 0.1875rem 0.8125rem;
 	--_ui5_color-palette-item-hover-margin: 0;
 	--_ui5_color-palette-row-height: 7.5rem;
 	--_ui5_color-palette-button-height: 2rem;