Merge pull request #7818 from IgniteUI/SIvanova/fix-dark-indigo-carousel

fix(carousel): fix carousel docs & buttons low contrast

Author: simeonoff

projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_carousel.scss

@@ -51,22 +51,32 @@ $_dark-bootstrap-carousel: extend($_bootstrap-carousel, $_base-dark-carousel);
 /// Generates a dark indigo carousel schema based on a mix of $_indigo-carousel and $_base-dark-carousel
 /// @type {Map}
 /// @prop {Color} slide-background [#222] - The slide background color.
-/// @prop {Color} button-background [igx-color: ('grays', 500)] - The previous/next buttons idle background color.
-/// @prop {Color} button-hover-background [igx-color: ('grays', 300)] - The previous/next buttons hover background color.
-/// @prop {Color} indicator-dot-color [igx-color: ('grays', 600)] - The idle indicator dot color.
-/// @prop {Color} indicator-active-dot-color [igx-color: ('grays', 900)] - The active indicator dot color.
+/// @prop {Map} button-background [igx-color: ('grays', 400)] - The previous/next buttons idle background color.
+/// @prop {Map} button-hover-background [igx-color: ('grays', 200)] - The previous/next buttons hover background color.
+/// @prop {Map} button-arrow-color [igx-color: ('grays', 800)] - The previous/next buttons idle arrow color.
+/// @prop {Map} button-hover-arrow-color [igx-color: ('grays', 900)] - The previous/next buttons hover arrow color.
+/// @prop {Map} indicator-dot-color [igx-color: ('grays', 600)] - The idle indicator dot color.
+/// @prop {Map} indicator-active-dot-color [igx-color: ('grays', 900)] - The active indicator dot color.
 /// @requires extend
 /// @requires $_indigo-carousel
 /// @requires $_base-dark-carousel
 $_dark-indigo-carousel: extend($_indigo-carousel, (
     slide-background: #222,
 
     button-background: (
-        igx-color: ('grays' 500),
+        igx-color: ('grays' 400),
     ),
 
     button-hover-background: (
-        igx-color: ('grays' 300),
+        igx-color: ('grays' 200),
+    ),
+
+    button-arrow-color: (
+        igx-color: ('grays', 800)
+    ),
+
+    button-hover-arrow-color: (
+        igx-color: ('grays', 900)
     ),
 
     indicator-dot-color: (

projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_carousel.scss

@@ -62,6 +62,7 @@ $_light-carousel: extend(
 /// @type {Map}
 /// @requires {function} extend
 /// @requires {map} $_light-carousel
+/// @requires {map} $_square-shape-carousel
 /// @requires {map} $_fluent-elevation-carousel
 /// @see $default-palette
 $_fluent-carousel: extend(
@@ -74,26 +75,40 @@ $_fluent-carousel: extend(
 /// @type {Map}
 /// @requires {function} extend
 /// @requires {map} $_light-carousel
+/// @requires {map} $_bootstrap-shape-carousel
+/// @requires {map} $_bootstrap-elevation-carousel
 $_bootstrap-carousel: extend(
     $_light-carousel,
     $_bootstrap-shape-carousel,
-    $_fluent-elevation-carousel, (
+    $_bootstrap-elevation-carousel, (
         variant: 'bootstrap'
     )
 );
 
 /// Generates an indigo carousel schema.
 /// @type {Map}
+/// @prop {Map} button-background [igx-color: 'surface', rgba: .4] - The previous/next buttons idle background color.
+/// @prop {Map} button-hover-background [igx-color: 'surface', rgba: .65] - The previous/next buttons hover background color.
+/// @prop {Color} button-disabled-background [transparent] - The previous/next buttons disabled background color.
+/// @prop {Map} button-arrow-color [igx-color: ('grays', 600)] - The previous/next buttons idle arrow color.
+/// @prop {Map} button-hover-arrow-color [igx-color: ('grays', 700)] - The previous/next buttons hover arrow color.
+/// @prop {Map} button-disabled-arrow-color [igx-color: ('grays' 400)] - The previous/next buttons disabled color.
+/// @prop {Map} indicator-dot-color [igx-color: 'surface', rgba: .6] - The idle indicator dot color.
+/// @prop {Map} indicator-active-dot-color [igx-color: 'surface'] - The active indicator dot color.
+/// @prop {Number} border-radius [0] - The border radius fraction, between 0-1 to be used for carousel.
+///
 /// @requires {function} extend
 /// @requires {map} $_light-carousel
+/// @requires {map} $_default-shape-carousel
+/// @requires {map} $_indigo-elevation-carousel
 $_indigo-carousel: extend(
     $_light-carousel,
-    $_square-shape-carousel,
+    $_default-shape-carousel,
     $_indigo-elevation-carousel, (
         variant: 'indigo-design',
 
         button-background: (
-            igx-color: #fff,
+            igx-color: 'surface',
             rgba: .4
         ),
 
@@ -102,7 +117,7 @@ $_indigo-carousel: extend(
         ),
 
         button-hover-background: (
-            igx-color: #fff,
+            igx-color: 'surface',
             rgba: .65,
         ),
 
@@ -117,11 +132,13 @@ $_indigo-carousel: extend(
         ),
 
         indicator-dot-color: (
-            igx-color: #fff,
+            igx-color: 'surface',
             rgba: .6
         ),
 
-        indicator-active-dot-color: #fff,
+        indicator-active-dot-color:(
+            igx-color: 'surface'
+        ),
     )
 );