feat(ui5-carousel): implement SAP Horizon theme family (#5061)

* feat(ui5-carousel): implement SAP Horizon theme

* remove temp code

* feat(ui5-carousel): implement SAP Horizon theme

* feat(ui5-carousel): resolve merge conflicts

* feat(ui5-carousel): fix hcb/w themes active dot color

* feat(ui5-carousel): code styling

* feat(ui5-carousel): update hashes

* feat(ui5-carousel): code refactoring

Author: TeodorTaushanov

packages/main/src/themes/Carousel.css

@@ -40,7 +40,7 @@
     display: flex;
     flex-direction: row;
     flex-wrap: nowrap;
-    background: var(--sapBackgroundColor);
+    background: var(--ui5_carousel_background_color);
     transition: transform 0.5s cubic-bezier(.46, 0, .44, 1);
     will-change: transform;
 }
@@ -72,7 +72,7 @@
     width: 100%;
     padding:0 0.5rem;
     position: absolute;
-    top: calc(50% - 2.5rem);
+    top: calc(50% - var(--ui5_carousel_button_size));
     left: 0;
     display: flex;
     justify-content: space-between;
@@ -108,6 +108,10 @@
     outline-offset: .1rem;
 }
 
+.ui5-carousel-navigation-arrows .ui5-carousel-navigation-button {
+    box-shadow: var(--sapContent_Shadow1);
+}
+
 .ui5-carousel-navigation-button--hidden {
     visibility: hidden;
     padding: 0;
@@ -122,19 +126,19 @@
 }
 
 .ui5-carousel-navigation-dot {
-    width: var(--ui5_carousel_width);
-    height: var(--ui5_carousel_height);
-    margin: var(--ui5_carousel_margin);
+    width: var(--ui5_carousel_inactive_dot_size);
+    height: var(--ui5_carousel_inactive_dot_size);
+    margin: var(--ui5_carousel_inactive_dot_margin);
     border-radius: 50%;
-    background-color: var(--ui5_carousel_dot_background);
-    border: var(--ui5_carousel_dot_border);
+    background-color: var(--ui5_carousel_inactive_dot_background);
+    border: var(--ui5_carousel_inactive_dot_border);
     transition: background-color .1s ease-in;
 }
 
 .ui5-carousel-navigation-dot[active] {
     width: .5rem;
     height: .5rem;
     margin: 0 .25rem;
-    background-color: var(--sapSelectedColor);
-    border: var(--ui5_carousel_dot_border);
+    background-color: var(--ui5_carousel_active_dot_background);
+    border: var(--ui5_carousel_active_dot_border);
 }

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

@@ -1,9 +1,10 @@
 :root {
+    --ui5_carousel_background_color: var(--sapBackgroundColor);
     --ui5_carousel_button_size: 2.5rem;
-    --ui5_carousel_height: 0.25rem;
-    --ui5_carousel_width: 0.25rem;
-    --ui5_carousel_margin: 0 0.375rem;
-    --ui5_carousel_border: 1px solid var(--sapContent_ForegroundBorderColor);
-    --ui5_carousel_dot_border: none;
-    --ui5_carousel_dot_background: var(--sapContent_NonInteractiveIconColor);
+    --ui5_carousel_inactive_dot_size: 0.25rem;
+    --ui5_carousel_inactive_dot_margin: 0 0.375rem;
+    --ui5_carousel_inactive_dot_border: none;
+    --ui5_carousel_inactive_dot_background: var(--sapContent_NonInteractiveIconColor);
+    --ui5_carousel_active_dot_border: var(--ui5_carousel_inactive_dot_border);
+    --ui5_carousel_active_dot_background: var(--sapSelectedColor);
 }

packages/main/src/themes/sap_belize/Carousel-parameters.css

@@ -1,9 +1,9 @@
 :root {
     --ui5_carousel_button_size: 2.5rem;
-    --ui5_carousel_height: 0.25rem;
-    --ui5_carousel_width: 0.25rem;
-    --ui5_carousel_margin: 0 0.375rem;
-    --ui5_carousel_border: 1px solid var(--sapContent_ForegroundBorderColor);
-    --ui5_carousel_dot_border: none;
-    --ui5_carousel_dot_background: var(--sapContent_NonInteractiveIconColor);
+    --ui5_carousel_inactive_dot_size: 0.25rem;
+    --ui5_carousel_inactive_dot_margin: 0 0.375rem;
+    --ui5_carousel_inactive_dot_border: none;
+    --ui5_carousel_inactive_dot_background: var(--sapContent_NonInteractiveIconColor);
+    --ui5_carousel_active_dot_border: var(--ui5_carousel_inactive_dot_border);
+    --ui5_carousel_active_dot_background: var(--sapSelectedColor);
 }

packages/main/src/themes/sap_belize_hcb/Carousel-parameters.css

@@ -1,9 +1,9 @@
 :root {
     --ui5_carousel_button_size: 2.5rem;
-    --ui5_carousel_height: 0.25rem;
-    --ui5_carousel_width: 0.25rem;
-    --ui5_carousel_margin: 0 0.375rem;
-    --ui5_carousel_border: 1px solid var(--sapContent_ForegroundBorderColor);
-    --ui5_carousel_dot_border: 1px solid var(--sapContent_ForegroundBorderColor);
-    --ui5_carousel_dot_background: var(--sapContent_NonInteractiveIconColor);
+    --ui5_carousel_inactive_dot_size: 0.25rem;
+    --ui5_carousel_inactive_dot_margin: 0 0.375rem;
+    --ui5_carousel_inactive_dot_border: 1px solid var(--sapContent_ForegroundBorderColor);
+    --ui5_carousel_inactive_dot_background: var(--sapContent_NonInteractiveIconColor);
+    --ui5_carousel_active_dot_border: var(--ui5_carousel_inactive_dot_border);
+    --ui5_carousel_active_dot_background: var(--sapContent_Selected_ForegroundColor);
 }

packages/main/src/themes/sap_belize_hcw/Carousel-parameters.css

@@ -1,9 +1,9 @@
 :root {
     --ui5_carousel_button_size: 2.5rem;
-    --ui5_carousel_height: 0.25rem;
-    --ui5_carousel_width: 0.25rem;
-    --ui5_carousel_margin: 0 0.375rem;
-    --ui5_carousel_border: 1px solid var(--sapContent_ForegroundBorderColor);
-    --ui5_carousel_dot_border: 1px solid var(--sapContent_ForegroundBorderColor);
-    --ui5_carousel_dot_background: var(--sapContent_NonInteractiveIconColor);
+    --ui5_carousel_inactive_dot_size: 0.25rem;
+    --ui5_carousel_inactive_dot_margin: 0 0.375rem;
+    --ui5_carousel_inactive_dot_border: 1px solid var(--sapContent_ForegroundBorderColor);
+    --ui5_carousel_inactive_dot_background: var(--sapContent_NonInteractiveIconColor);
+    --ui5_carousel_active_dot_border: var(--ui5_carousel_inactive_dot_border);
+    --ui5_carousel_active_dot_background: var(--sapContent_Selected_ForegroundColor);
 }

packages/main/src/themes/sap_fiori_3_hcb/Carousel-parameters.css

@@ -1,9 +1,9 @@
 :root {
     --ui5_carousel_button_size: 2.5rem;
-    --ui5_carousel_height: 0.5rem;
-    --ui5_carousel_width: 0.5rem;
-    --ui5_carousel_margin: 0 0.25rem;
-    --ui5_carousel_border: 1px solid #fff;
-    --ui5_carousel_dot_border: 1px solid var(--sapContent_ForegroundBorderColor);
-    --ui5_carousel_dot_background: none;
+    --ui5_carousel_inactive_dot_size: 0.5rem;
+    --ui5_carousel_inactive_dot_margin: 0 0.25rem;
+    --ui5_carousel_inactive_dot_border: 1px solid var(--sapContent_ForegroundBorderColor);
+    --ui5_carousel_inactive_dot_background: none;
+    --ui5_carousel_active_dot_border: var(--ui5_carousel_inactive_dot_border);
+    --ui5_carousel_active_dot_background: var(--sapContent_Selected_ForegroundColor);
 }

packages/main/src/themes/sap_fiori_3_hcw/Carousel-parameters.css

@@ -1,9 +1,9 @@
 :root {
     --ui5_carousel_button_size: 2.5rem;
-    --ui5_carousel_height: 0.5rem;
-    --ui5_carousel_width: 0.5rem;
-    --ui5_carousel_margin: 0 0.25rem;
-    --ui5_carousel_border: 1px solid #fff;
-    --ui5_carousel_dot_border: 1px solid var(--sapContent_ForegroundBorderColor);
-    --ui5_carousel_dot_background: none;
+    --ui5_carousel_inactive_dot_size: 0.5rem;
+    --ui5_carousel_inactive_dot_margin: 0 0.25rem;
+    --ui5_carousel_inactive_dot_border: 1px solid var(--sapContent_ForegroundBorderColor);
+    --ui5_carousel_inactive_dot_background: none;
+    --ui5_carousel_active_dot_border: var(--ui5_carousel_inactive_dot_border);
+    --ui5_carousel_active_dot_background: var(--sapContent_Selected_ForegroundColor);
 }

packages/main/src/themes/sap_horizon_hcb/Carousel-parameters.css

@@ -1,9 +1,9 @@
 :root {
 	--ui5_carousel_button_size: 2.5rem;
-	--ui5_carousel_height: 0.5rem;
-	--ui5_carousel_width: 0.5rem;
-	--ui5_carousel_margin: 0 0.25rem;
-	--ui5_carousel_border: 1px solid #fff;
-	--ui5_carousel_dot_border: 1px solid var(--sapContent_ForegroundBorderColor);
-	--ui5_carousel_dot_background: none;
+	--ui5_carousel_inactive_dot_size: 0.5rem;
+	--ui5_carousel_inactive_dot_margin: 0 0.25rem;
+	--ui5_carousel_inactive_dot_border: 1px solid var(--sapContent_ForegroundBorderColor);
+	--ui5_carousel_inactive_dot_background: none;
+	--ui5_carousel_active_dot_border: var(--ui5_carousel_inactive_dot_border);
+	--ui5_carousel_active_dot_background: var(--sapContent_Selected_ForegroundColor);
 }

packages/main/src/themes/sap_horizon_hcw/Carousel-parameters.css

@@ -1,9 +1,9 @@
 :root {
     --ui5_carousel_button_size: 2.5rem;
-    --ui5_carousel_height: 0.5rem;
-    --ui5_carousel_width: 0.5rem;
-    --ui5_carousel_margin: 0 0.25rem;
-    --ui5_carousel_border: 1px solid #fff;
-    --ui5_carousel_dot_border: 1px solid var(--sapContent_ForegroundBorderColor);
-    --ui5_carousel_dot_background: none;
+    --ui5_carousel_inactive_dot_size: 0.5rem;
+    --ui5_carousel_inactive_dot_margin: 0 0.25rem;
+    --ui5_carousel_inactive_dot_border: 1px solid var(--sapContent_ForegroundBorderColor);
+    --ui5_carousel_inactive_dot_background: none;
+    --ui5_carousel_active_dot_border: var(--ui5_carousel_inactive_dot_border);
+    --ui5_carousel_active_dot_background: var(--sapContent_Selected_ForegroundColor);
 }