feat(carousel): use new button-focus-arrow-color prop (#1612)

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

Author: didimmova

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

@@ -7,7 +7,6 @@ igc-button::part(focused),
 igc-button::part(focused):hover {
     box-shadow: 0 0 0 rem(4px) var-get($theme, 'button-focus-border-color');
     border-color: var-get($theme, 'button-border-color');
-    color: var-get($theme, 'button-arrow-color');
 }
 
 :host {

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

@@ -28,7 +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');
-    color: var-get($theme, 'button-focus-border-color');
+    color: var-get($theme, 'button-focus-arrow-color');
 }
 
 igc-button[disabled]::part(base) {

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

@@ -7,7 +7,6 @@ $btn-indent: rem(3px);
 igc-button::part(focused),
 igc-button::part(focused):hover {
     border: none;
-    color: var-get($theme, 'indicator-focus-color');
 
     &::after {
         position: absolute;
@@ -24,4 +23,4 @@ igc-button::part(focused):hover {
 [part='label indicators'],
 [part='label indicators start'] {
     border-radius: rem(2px);
-}
+}

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

@@ -13,7 +13,6 @@ igc-button::part(base) {
 igc-button::part(focused),
 igc-button::part(focused):hover {
     box-shadow: 0 0 0 rem(3px) var-get($theme, 'indicator-focus-color');
-    color: var-get($theme, 'button-arrow-color');
 }
 
 [part~='navigation'] {
@@ -104,4 +103,4 @@ igc-button::part(focused):hover {
 igc-carousel-indicator {
     min-width: rem(16px);
     min-height: rem(16px);
-}
+}