feat(carousel): improve carousel theme and add missed properties (#15525)

Author: didimmova

projects/igniteui-angular/src/lib/core/styles/components/carousel/_carousel-theme.scss

@@ -21,9 +21,13 @@
 /// @param {Color} $button-disabled-arrow-color [null] - The previous/next buttons disabled arrow color.
 /// @param {Color} $button-border-color [null] - The previous/next buttons idle border color.
 /// @param {Color} $button-hover-border-color [null] - The previous/next buttons hover border color.
+/// @param {Color} $button-focus-border-color [null] - The navigation buttons border color on focus.
 /// @param {Color} $button-disabled-border-color [null] - The previous/next buttons disabled border color.
+/// @param {Color} $indicator-background [null] - The indicators container background color.
+/// @param {Color} $label-indicator-background [null] - The label indicator container background color.
 /// @param {Color} $indicator-dot-color [null] - The idle indicator dot color.
 /// @param {Color} $indicator-hover-dot-color [null] - The hover indicator dot color.
+/// @param {Color} $indicator-focus-color [null] - The indicators border and dot color on focus.
 /// @param {Color} $indicator-border-color [null] - The idle indicator border color.
 /// @param {Color} $indicator-active-dot-color [null] - The active indicator dot color.
 /// @param {Color} $indicator-active-border-color [null] - The active indicator border color.
@@ -54,13 +58,18 @@
     $button-disabled-background: null,
     $button-arrow-color: null,
     $button-hover-arrow-color: null,
+    $button-focus-arrow-color: null,
     $button-disabled-arrow-color: null,
     $button-border-color: null,
     $button-hover-border-color: null,
+    $button-focus-border-color: null,
     $button-disabled-border-color: null,
 
+    $indicator-background: null,
+    $label-indicator-background: null,
     $indicator-dot-color: null,
     $indicator-hover-dot-color: null,
+    $indicator-focus-color: null,
     $indicator-border-color: null,
     $indicator-active-dot-color: null,
     $indicator-active-border-color: null,
@@ -76,24 +85,106 @@
     }
 
     $theme: digest-schema($carousel-schema);
-    $meta: map.get($theme, '_meta');
+    $variant: map.get($theme, '_meta', 'theme');
+
+    @if $variant == 'indigo' {
+        @if not($button-hover-background) and $button-background {
+            $button-hover-background: hsl(from var(--button-background) h s calc(l * 0.9));
+        }
+
+        @if not($button-border-color) and $button-background {
+            $button-border-color: hsl(from var(--button-background) h s calc(l * 0.9));
+        }
+
+        @if not($button-hover-border-color) and $button-border-color {
+            $button-hover-border-color: hsl(from var(--button-border-color) h s calc(l * 0.9));
+        }
+
+        @if not($indicator-active-dot-color) and not($indicator-background) and $button-background {
+            $indicator-active-dot-color: var(--button-background);
+        }
+    }
 
     @if not($button-shadow) {
         $button-elevation: map.get($carousel-schema, 'button-elevation');
         $button-shadow: elevation($button-elevation);
     }
 
     @if not($button-arrow-color) and $button-background {
-        $button-arrow-color: text-contrast($button-background);
+        $button-arrow-color: hsla(from (adaptive-contrast(var(--button-background)) h s l / 0.85));
+    }
+
+    @if not($button-hover-background) and $button-background {
+        $button-hover-background: var(--button-background);
     }
 
     @if not($button-hover-arrow-color) and $button-hover-background {
-        $button-hover-arrow-color: text-contrast($button-hover-background);
+        $button-hover-arrow-color: adaptive-contrast(var(--button-hover-background));
+    }
+
+    @if not($button-focus-arrow-color) and $button-hover-arrow-color {
+        $button-focus-arrow-color: var(--button-hover-arrow-color);
+    }
+
+    @if not($button-disabled-background) and $button-background {
+        $button-disabled-background: var(--button-background);
     }
 
     @if not($button-disabled-arrow-color) and $button-disabled-background {
-        @if meta.type-of($button-disabled-background) == 'color' {
-            $button-disabled-arrow-color: rgba(text-contrast($button-disabled-background), .3);
+        $button-disabled-arrow-color: hsla(from adaptive-contrast(var(--button-disabled-background)) h s l / .4);
+    }
+
+    @if not($indicator-dot-color) and $indicator-background {
+        $indicator-dot-color: hsla(from adaptive-contrast(var(--indicator-background)) h s l / .8);
+    }
+
+    @if not($indicator-hover-dot-color) and $indicator-dot-color {
+        $indicator-hover-dot-color: hsla(from var(--indicator-dot-color) h s l / 1);
+    }
+
+    @if not($indicator-border-color) and $indicator-dot-color {
+        $indicator-border-color: var(--indicator-dot-color);
+    }
+
+    @if not($indicator-active-dot-color) and $indicator-background {
+        $indicator-active-dot-color: hsl(from adaptive-contrast(var(--indicator-background)) h s calc(l * 0.9));
+    }
+
+    @if not($indicator-active-hover-dot-color) and $indicator-active-dot-color {
+        $indicator-active-hover-dot-color: hsl(from var(--indicator-active-dot-color) h s calc(l * 1.1));
+    }
+
+    @if not($indicator-active-border-color) and $indicator-active-dot-color {
+        $indicator-active-border-color: var(--indicator-active-dot-color);
+    }
+
+    @if $variant == 'material' {
+        @if not($button-focus-border-color) and $button-focus-arrow-color {
+            $button-focus-border-color: var(--button-focus-arrow-color);
+        }
+    }
+
+    @if $variant == 'fluent' or $variant == 'bootstrap' {
+        @if not($button-focus-border-color) and $button-background {
+            $button-focus-border-color: hsla(from adaptive-contrast(var(--button-background)) h s l / 0.5);
+        }
+    }
+
+    @if $variant == 'indigo' {
+        @if not($button-focus-border-color) and $indicator-active-dot-color {
+            $button-focus-border-color: var(--indicator-active-dot-color);
+        }
+
+        @if not($indicator-focus-color) and $indicator-active-hover-dot-color {
+            $indicator-focus-color: hsla(from var(--indicator-active-hover-dot-color) h s l / .5);
+        }
+    } @else {
+        @if not($indicator-focus-color) and not($indicator-background) and $button-background {
+            $indicator-focus-color: var(--button-background);
+        }
+
+        @if not($indicator-focus-color) and $indicator-background {
+            $indicator-focus-color: adaptive-contrast(var(--indicator-background));
         }
     }
 
@@ -110,21 +201,22 @@
         button-hover-background: $button-hover-background,
         button-arrow-color: $button-arrow-color,
         button-hover-arrow-color: $button-hover-arrow-color,
+        button-focus-arrow-color: $button-focus-arrow-color,
         button-disabled-arrow-color: $button-disabled-arrow-color,
         button-border-color: $button-border-color,
         button-hover-border-color: $button-hover-border-color,
+        button-focus-border-color: $button-focus-border-color,
         button-disabled-border-color: $button-disabled-border-color,
 
+        indicator-background: $indicator-background,
+        label-indicator-background: $label-indicator-background,
         indicator-dot-color: $indicator-dot-color,
         indicator-hover-dot-color: $indicator-hover-dot-color,
+        indicator-focus-color: $indicator-focus-color,
         indicator-border-color: $indicator-border-color,
         indicator-active-dot-color: $indicator-active-dot-color,
         indicator-active-border-color: $indicator-active-border-color,
         indicator-active-hover-dot-color: $indicator-active-hover-dot-color,
-        theme: map.get($schema, '_meta', 'theme'),
-        _meta: map.merge(if($meta, $meta, ()), (
-            variant: map.get($schema, '_meta', 'theme')
-        )),
     ));
 }
 
@@ -139,7 +231,7 @@
     $indicator-border-style: rem(2px) solid;
     $btn-indent: rem(3px);
 
-    $variant: map.get($theme, '_meta', 'variant');
+    $variant: map.get($theme, '_meta', 'theme');
     $not-bootstrap-theme: $variant != 'bootstrap';
 
     %igx-carousel-display {
@@ -206,25 +298,17 @@
             border: rem(2px) solid var-get($theme, 'button-focus-border-color');
 
             igx-icon {
-                color: var-get($theme, 'button-focus-border-color');
+                color: var-get($theme, 'button-focus-arrow-color');
             }
 
             @if $variant == 'bootstrap' {
                 box-shadow: 0 0 0 rem(4px) var-get($theme, 'button-focus-border-color');
                 border-color: var-get($theme, 'button-border-color');
-
-                igx-icon {
-                    color: var-get($theme, 'button-arrow-color');
-                }
             }
 
             @if $variant == 'fluent' {
                 border: none;
 
-                igx-icon {
-                    color: var-get($theme, 'indicator-focus-color');
-                }
-
                 &::after {
                     position: absolute;
                     content: '';
@@ -239,10 +323,6 @@
 
             @if $variant == 'indigo' {
                 box-shadow: 0 0 0 rem(3px) var-get($theme, 'indicator-focus-color');
-
-                igx-icon {
-                    color: var-get($theme, 'button-arrow-color');
-                }
             }
         }