fix(ui5-bar): provide responsive paddings support (#9820)

- Responsive paddings concept is now applied.

Fixes: #7359

Author: unazko

packages/main/src/themes/Bar.css

@@ -7,6 +7,7 @@
 }
 
 .ui5-bar-root {
+	container-type: size;
 	display: flex;
 	align-items: center;
 	justify-content: space-between;
@@ -72,4 +73,17 @@
 
 ::slotted(*) {
 	margin: 0 0.25rem;
+}
+
+@container (width < 600px) {
+	* {
+		--_ui5_bar-start-container-padding-start: var(--_ui5_bar-start-container-padding-start_S);
+		--_ui5_bar-end-container-padding-end: var(--_ui5_bar-end-container-padding-end_S)
+	}
+}
+@container (width > 1439px) {
+	* {
+		--_ui5_bar-start-container-padding-start: var(--_ui5_bar-start-container-padding-start_XL);
+		--_ui5_bar-end-container-padding-end: var(--_ui5_bar-end-container-padding-end_XL);
+	}
 }

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

@@ -1,8 +1,12 @@
 :root {
 	--_ui5_bar_base_height: 2.75rem;
 	--_ui5_bar_subheader_height: 3rem;
-	--_ui5_bar-start-container-padding-start: 0.75rem;
+	--_ui5_bar-start-container-padding-start: 2rem;
 	--_ui5_bar-mid-container-padding-start-end: 0.5rem;
-	--_ui5_bar-end-container-padding-end: 0.75rem;
+	--_ui5_bar-end-container-padding-end: 2rem;
+	--_ui5_bar-start-container-padding-start_S: 1rem;
+	--_ui5_bar-start-container-padding-start_XL: 3rem;
+	--_ui5_bar-end-container-padding-end_S: 1rem;
+	--_ui5_bar-end-container-padding-end_XL: 3rem;
 	--_ui5_bar_subheader_margin-top: -0.0625rem;
 }