feat(carousel): update carousel styles to fit angular (#1883)

* feat(carousel): update carousel styles to fit angular

* fix(carousel): set active indicator dot and border vars

* feat(carousel): fix button background on focus+hover

---------

Co-authored-by: Simeon Simeonoff <[email protected]>

Author: didimmova

src/components/carousel/themes/shared/carousel.common.scss

@@ -28,6 +28,7 @@ igc-button::part(base) {
 igc-button::part(focused),
 igc-button::part(focused):hover {
     border: rem(2px) solid var-get($theme, 'button-focus-border-color');
+    background: var-get($theme, 'button-background');
     color: var-get($theme, 'button-focus-arrow-color');
 }
 
@@ -67,21 +68,25 @@ igc-button[disabled]::part(base) {
 
     &:hover {
         border-color: var-get($theme, 'indicator-active-border-color');
+
+        &::after {
+            background: var-get($theme, 'indicator-hover-dot-color');
+        }
     }
 }
 
 [part='dot active'] {
-    border: rem(2px) solid var(--indicator-active-color);
+    border: rem(2px) solid var(--indicator-border-active-color);
 
     &::after {
-        background: var(--indicator-active-color);
+        background: var(--indicator-dot-active-color);
     }
 
     &:hover {
-        border-color: var(--indicator-active-color);
+        border-color: var(--indicator-active-hover-color);
 
         &::after {
-            background: var(--indicator-active-color);
+            background: var(--indicator-active-hover-color);
         }
     }
 }

src/components/carousel/themes/shared/carousel.indigo.scss

@@ -57,7 +57,7 @@ igc-button::part(focused):hover {
 }
 
 [part='dot active'] {
-    border: rem(2px) solid var-get($theme, 'indicator-active-dot-color');
+    border: rem(2px) solid var-get($theme, 'indicator-active-border-color');
     box-shadow: 0 0 0 rem(3px) var(--dot-shadow-color);
 
     &::after {

src/components/carousel/themes/shared/indicator-container/indicator-container.common.scss

@@ -4,11 +4,15 @@
 $theme: $material;
 
 [part~='base'] {
-    --indicator-active-color: #{var-get($theme, 'indicator-active-border-color')};
+    --indicator-border-active-color: #{var-get($theme, 'indicator-active-border-color')};
+    --indicator-dot-active-color: #{var-get($theme, 'indicator-active-dot-color')};
+    --indicator-active-hover-color: #{var-get($theme, 'indicator-active-hover-dot-color')};
 }
 
 [part='base focused'] {
-    --indicator-active-color: #{var-get($theme, 'indicator-focus-color')};
+    --indicator-border-active-color: #{var-get($theme, 'indicator-focus-color')};
+    --indicator-dot-active-color: #{var-get($theme, 'indicator-focus-color')};
+    --indicator-active-hover-color: #{var-get($theme, 'indicator-focus-color')};
 
     ::slotted(div) {
         &::after {