Merge branch 'master' into apetrov/new-design-system-samples

Author: adrianptrv

src/app/layouts/carousel/carousel-styling-sample/carousel-styling-sample.component.html

@@ -7,7 +7,7 @@
         </igx-slide>
         <igx-slide>
             <div class="slide-content-wrapper">
-                <img src="assets/images/carousel/16:9-CulturalDip.png">
+                <img src="assets/images/carousel/16-9-CulturalDip.png">
             </div>
         </igx-slide>
         <igx-slide>

src/app/layouts/carousel/carousel-styling-sample/carousel-styling-sample.component.scss

@@ -1,8 +1,8 @@
 @use "layout.scss";
 @use "igniteui-angular/theming" as *;
 
-// Create expansion panel theme
-$custom-panel-theme: carousel-theme(
+// Create a carousel theme.
+$custom-carousel-theme: carousel-theme(
   $button-background: rgb(124 50 221 / 60%),
   $button-arrow-color: #c5bcd0,
   $button-hover-arrow-color: #F3E8FF,
@@ -11,5 +11,5 @@ $custom-panel-theme: carousel-theme(
   $button-shadow: var(--ig-elevation-5)
 );
 
-// Apply the custom themes to the components mixins.
-@include css-vars($custom-panel-theme); 
+// Apply the custom theme.
+@include css-vars($custom-carousel-theme); 

src/app/layouts/carousel/carousel-tailwind-sample/carousel-tailwind-sample.component.html

@@ -1,13 +1,13 @@
 <div class="carousel-container">
-    <igx-carousel class=" ![--indicator-background:#a7b6de] ![--button-background:#a7b6de] ![--button-hover-background:#8d9abc] ![--indicator-border-color:#3E4853] ![--indicator-active-border-color:#000000]  ![--button-hover-arrow-color:#000000] ![--button-arrow-color:#3E4853]">
+    <igx-carousel class="!light-carousel ![--indicator-background:#a7b6de] ![--button-background:#a7b6de] ![--button-hover-background:#8d9abc] ![--indicator-border-color:#3E4853] ![--button-arrow-color:#3E4853]">
         <igx-slide>
             <div class="slide-content-wrapper">
                 <img src="assets/images/carousel/[email protected]">
             </div>
         </igx-slide>
         <igx-slide>
             <div class="slide-content-wrapper">
-                <img src="assets/images/carousel/16:9-CulturalDip.png">
+                <img src="assets/images/carousel/16-9-CulturalDip.png">
             </div>
         </igx-slide>
         <igx-slide>