From e4a13ddd393fbb58b7eb87c5b9dae83ec22c9fc3 Mon Sep 17 00:00:00 2001
From: didimmova <d.dimova11@gmail.com>
Date: Mon, 17 Mar 2025 11:36:55 +0200
Subject: [PATCH 1/2] feat(carousel): improve carousel theme and add missed
 properties

---
 .../components/carousel/_carousel-theme.scss  | 54 ++++++++++++++++---
 1 file changed, 48 insertions(+), 6 deletions(-)

diff --git a/projects/igniteui-angular/src/lib/core/styles/components/carousel/_carousel-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/carousel/_carousel-theme.scss
index d90e486d0b9..ac4a2edaebd 100644
--- a/projects/igniteui-angular/src/lib/core/styles/components/carousel/_carousel-theme.scss
+++ b/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.
@@ -57,10 +61,14 @@
     $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,
@@ -84,17 +92,47 @@
     }
 
     @if not($button-arrow-color) and $button-background {
-        $button-arrow-color: text-contrast($button-background);
+        $button-arrow-color: adaptive-contrast(var(--button-background));
+    }
+
+    @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-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-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: hsl(from adaptive-contrast(var(--indicator-background)) h s calc(l * 0.8));
+    }
+
+    @if not($indicator-hover-dot-color) and $indicator-dot-color {
+        $indicator-hover-dot-color: hsl(from var(--indicator-dot-color) h s calc(l * 1.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)
     }
 
     @return extend($theme, (
@@ -113,10 +151,14 @@
         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,
@@ -139,7 +181,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 {

From 1c99138a0ddac6bf3807a944a9907bfdd274c6ff Mon Sep 17 00:00:00 2001
From: didimmova <d.dimova11@gmail.com>
Date: Wed, 19 Mar 2025 10:22:40 +0200
Subject: [PATCH 2/2] feat(carousel): improve carousel theme

---
 .../components/carousel/_carousel-theme.scss  | 88 ++++++++++++++-----
 1 file changed, 64 insertions(+), 24 deletions(-)

diff --git a/projects/igniteui-angular/src/lib/core/styles/components/carousel/_carousel-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/carousel/_carousel-theme.scss
index ac4a2edaebd..986ea179ce3 100644
--- a/projects/igniteui-angular/src/lib/core/styles/components/carousel/_carousel-theme.scss
+++ b/projects/igniteui-angular/src/lib/core/styles/components/carousel/_carousel-theme.scss
@@ -58,6 +58,7 @@
     $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,
@@ -84,7 +85,25 @@
     }
 
     $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');
@@ -92,31 +111,35 @@
     }
 
     @if not($button-arrow-color) and $button-background {
-        $button-arrow-color: adaptive-contrast(var(--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: hsl(from var(--button-background) h s calc(l * 0.9));
+        $button-hover-background: var(--button-background);
     }
 
     @if not($button-hover-arrow-color) and $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 {
-        $button-disabled-arrow-color: hsla(from adaptive-contrast(var(--button-disabled-background))  h s l / .4);
+        $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: hsl(from adaptive-contrast(var(--indicator-background)) h s calc(l * 0.8));
+        $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: hsl(from var(--indicator-dot-color) h s calc(l * 1.1));
+        $indicator-hover-dot-color: hsla(from var(--indicator-dot-color) h s l / 1);
     }
 
     @if not($indicator-border-color) and $indicator-dot-color {
@@ -132,7 +155,39 @@
     }
 
     @if not($indicator-active-border-color) and $indicator-active-dot-color {
-        $indicator-active-border-color: var(--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 $variant == 'indigo' {
+        @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));
+        }
     }
 
     @return extend($theme, (
@@ -148,6 +203,7 @@
         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,
@@ -163,10 +219,6 @@
         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')
-        )),
     ));
 }
 
@@ -248,25 +300,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: '';
@@ -281,10 +325,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');
-                }
             }
         }