From de9565a8d932f495aff761b5f80564b8d7fdcf52 Mon Sep 17 00:00:00 2001
From: desig9stein <mspopovv@gmail.com>
Date: Tue, 9 Jul 2024 16:31:49 +0300
Subject: [PATCH 1/4] refactor(calendar): update the indigo theme to match the
 latest design from the UI kits

---
 .../calendar/_calendar-component.scss         | 12 ++-
 .../components/calendar/_calendar-theme.scss  | 99 +++++++++++++++----
 2 files changed, 90 insertions(+), 21 deletions(-)

diff --git a/projects/igniteui-angular/src/lib/core/styles/components/calendar/_calendar-component.scss b/projects/igniteui-angular/src/lib/core/styles/components/calendar/_calendar-component.scss
index d738d990602..f9ebf1a9814 100644
--- a/projects/igniteui-angular/src/lib/core/styles/components/calendar/_calendar-component.scss
+++ b/projects/igniteui-angular/src/lib/core/styles/components/calendar/_calendar-component.scss
@@ -219,10 +219,14 @@
             @extend %date-range-selected-special-last !optional;
         }
 
-        @include e(date, $mods: ('selected', 'special', 'first', 'last')) {
+        @include e(date, $mods: ('range', 'selected', 'special', 'first', 'last')) {
             @extend %date-selected-special-first-last !optional;
         }
 
+        @include e(date, $mods: ('selected', 'special', 'range', 'first', 'last')) {
+            @extend %date-selected-special-range-first-last !optional;
+        }
+
         @include e(date, $mods: ('range', 'selected', 'active')) {
             @extend %date-range-selected-active !optional;
         }
@@ -307,16 +311,22 @@
             @extend %date-special-current !optional;
         }
 
+        @include e(date, $mods: ('special', 'current', 'selected')) {
+            @extend %date-special-current-selected !optional;
+        }
+
         @include e(date, $mods: ('special' 'active')) {
             @extend %date-special-active !optional;
         }
 
         @include e(date, $mods: ('special', 'current', 'active')) {
             @extend %date-special-current !optional;
+            @extend %date-special-current-active !optional;
         }
 
         @include e(date, $mods: ('special', 'current', 'active', 'range')) {
             @extend %date-special-current !optional;
+            @extend %date-special-current-active !optional;
         }
 
         @include e(date, 'first') {
diff --git a/projects/igniteui-angular/src/lib/core/styles/components/calendar/_calendar-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/calendar/_calendar-theme.scss
index b243ddf3658..08fac878202 100644
--- a/projects/igniteui-angular/src/lib/core/styles/components/calendar/_calendar-theme.scss
+++ b/projects/igniteui-angular/src/lib/core/styles/components/calendar/_calendar-theme.scss
@@ -1036,7 +1036,7 @@
     }
 
     %pickers-display--vertical,
-    %body-display--vertical  {
+    %body-display--vertical {
         display: contents;
     }
 
@@ -1169,8 +1169,8 @@
             }
         }
 
-        // TODO hide the 7 row anly of all the children have hidden class on them,
-        //  I need a wat to know if the calendar is in multi view to achieve this
+        // TODO Hide the 7th row only if all its children have the hidden class.
+        //  To implement this, we need to know if the calendar is in multi-view state.
         //&:nth-child(7) {
         //    > %date:has(:not(%date-hidden)) {
         //        display: none;
@@ -1363,7 +1363,7 @@
                 box-shadow: inset 0 0 0 $border-size var-get($theme, 'ym-current-outline-focus-color');
             } @else {
                 box-shadow: inset 0 0 0 $border-size var(--content-background),
-                    0 0 0 rem(1px) var-get($theme, 'ym-current-outline-focus-color');
+                0 0 0 rem(1px) var-get($theme, 'ym-current-outline-focus-color');
             }
         }
     }
@@ -1581,7 +1581,7 @@
                 }
             }
 
-            @if $variant == 'bootstrap' {
+            @if $variant == 'bootstrap' or $variant == 'indigo-design' {
                 &::after {
                     border-color: var-get($theme, 'date-special-border-color');
                 }
@@ -1589,6 +1589,14 @@
         }
     }
 
+    %date-selected-special-range-first-last {
+        @if $variant == 'indigo-design' {
+            &::after {
+                border-color: var-get($theme, 'date-selected-special-border-color');
+            }
+        }
+    }
+
     %date-selected-special-range-active {
         %date-inner {
             color: var-get($theme, 'date-special-focus-foreground');
@@ -1701,6 +1709,16 @@
                 }
             }
 
+            @if $variant == 'indigo-design' {
+                background: var-get($theme, 'date-current-background');
+                border-color: var-get($theme, 'date-current-border-color');
+
+                &:hover {
+                    background: var-get($theme, 'date-current-hover-background');
+                    border-color: var-get($theme, 'date-current-hover-border-color');
+                }
+            }
+
             @if $variant == 'fluent' {
                 color: var-get($theme, 'date-current-foreground');
 
@@ -1713,6 +1731,25 @@
         }
     }
 
+    @if $variant == 'indigo-design' {
+        %date-special-current-active {
+            %date-inner {
+                border-color: var-get($theme, 'date-current-focus-border-color');
+            }
+        }
+    }
+
+    @if $variant == 'indigo-design' {
+        %date-special-current-selected {
+            %date-inner {
+                &::after {
+                    width: calc($date-inner-size - #{rem(4px)});
+                    height: calc($date-inner-size - #{rem(4px)});
+                }
+            }
+        }
+    }
+
     %date-selected {
         %date-inner {
             color: var-get($theme, 'date-selected-foreground');
@@ -1741,6 +1778,9 @@
                 @if $variant == 'material' or $variant == 'bootstrap' {
                     border-color: var-get($theme, 'date-selected-foreground');
                 }
+                @if $variant == 'indigo-design' {
+                    border-color: var-get($theme, 'date-selected-special-border-color');
+                }
             }
         }
     }
@@ -1906,6 +1946,7 @@
                 }
 
                 @if $variant == 'indigo-design' {
+                    background: var-get($theme, 'date-selected-current-range-hover-background');
                     border-color: var-get($theme, 'date-current-hover-border-color');
                 }
             }
@@ -1928,7 +1969,7 @@
                 }
 
                 @if $variant == 'indigo-design' {
-                    border-color: transparent;
+                    border-color: var-get($theme, 'date-special-range-border-color');
                 }
             }
         }
@@ -1936,9 +1977,15 @@
 
     %date-selected-current-range-special-active:not(%date-selected-current-range-special-first),
     %date-selected-current-range-special-active:not(%date-selected-current-range-special-last) {
-        @if not $bootstrap-theme {
-            %date-inner {
+        %date-inner {
+            @if not $bootstrap-theme {
+                color: var-get($theme, 'date-special-focus-foreground');
+            }
+
+            @if $variant == 'indigo-design' {
                 color: var-get($theme, 'date-special-focus-foreground');
+                background: var-get($theme, 'date-selected-current-range-focus-background');
+                border-color: var-get($theme, 'date-current-focus-border-color');
             }
         }
     }
@@ -1970,6 +2017,8 @@
                 background: var-get($theme, 'date-selected-background');
 
                 &::after {
+                    width: calc($date-inner-size - #{rem(4px)});
+                    height: calc($date-inner-size - #{rem(4px)});
                     border-color: var-get($theme, 'date-selected-current-border-color');
                 }
 
@@ -1990,10 +2039,12 @@
     %date-selected-current-range-special-active-last {
         @if $variant == 'indigo-design' {
             %date-inner {
-                color: var-get($theme, 'date-selected-focus-foreground');
-                background: var-get($theme, 'date-selected-focus-background');
+                color: var-get($theme, 'date-selected-focus-foreground') !important;
+                background: var-get($theme, 'date-selected-focus-background') !important;
 
                 &::after {
+                    width: calc($date-inner-size - #{rem(4px)});
+                    height: calc($date-inner-size - #{rem(4px)});
                     border-color: var-get($theme, 'date-selected-current-focus-border-color');
                 }
             }
@@ -2108,12 +2159,16 @@
     %date-range-selected-special-last {
         %date-inner {
             &::after {
+                width: $date-inner-size;
+                height: $date-inner-size;
+
                 @if $variant == 'material' or $variant == 'bootstrap' {
                     border-color: var-get($theme, 'date-selected-foreground');
                 }
 
-                width: $date-inner-size;
-                height: $date-inner-size;
+                @if $variant == 'indigo-design' {
+                    border-color: var-get($theme, 'date-selected-special-border-color');
+                }
             }
         }
     }
@@ -2124,6 +2179,16 @@
                 @if $variant == 'material' or $variant == 'bootstrap' {
                     border-color: var-get($theme, 'date-selected-foreground');
                 }
+
+                @if $variant == 'indigo-design' {
+                    // stylelint-disable max-nesting-depth
+                    &::after {
+                        width: calc($date-inner-size - #{rem(4px)});
+                        height: calc($date-inner-size - #{rem(4px)});
+                        border-color: var-get($theme, 'date-special-border-color');
+                    }
+                    // stylelint-enable max-nesting-depth
+                }
             }
         }
     }
@@ -2380,12 +2445,9 @@
     %date-first-preview-special {
         %date-inner {
             &::after {
-                @if $variant != 'fluent' {
+                @if $variant == 'material' or $variant == 'bootstrap' {
                     width: var-get($theme, 'inner-size');
                     height: var-get($theme, 'inner-size');
-                }
-
-                @if $variant == 'material' or $variant == 'bootstrap' {
                     border-color: var-get($theme, 'date-selected-foreground');
                 }
             }
@@ -2431,12 +2493,9 @@
     %date-last-preview-special {
         %date-inner {
             &::after {
-                @if $variant != 'fluent' {
+                @if $variant == 'material' or $variant == 'bootstrap' {
                     width: var-get($theme, 'inner-size');
                     height: var-get($theme, 'inner-size');
-                }
-
-                @if $variant == 'material' or $variant == 'bootstrap' {
                     border-color: var-get($theme, 'date-selected-foreground');
                 }
             }

From 5079c400670590404b52698815809d0315ae521a Mon Sep 17 00:00:00 2001
From: desig9stein <mspopovv@gmail.com>
Date: Thu, 11 Jul 2024 17:05:43 +0300
Subject: [PATCH 2/4] refactor(calendar): fix inner border size and colors

---
 .../calendar/_calendar-component.scss         | 16 +++-
 .../components/calendar/_calendar-theme.scss  | 91 ++++++++++++-------
 2 files changed, 74 insertions(+), 33 deletions(-)

diff --git a/projects/igniteui-angular/src/lib/core/styles/components/calendar/_calendar-component.scss b/projects/igniteui-angular/src/lib/core/styles/components/calendar/_calendar-component.scss
index f9ebf1a9814..3e1fa03252c 100644
--- a/projects/igniteui-angular/src/lib/core/styles/components/calendar/_calendar-component.scss
+++ b/projects/igniteui-angular/src/lib/core/styles/components/calendar/_calendar-component.scss
@@ -223,8 +223,16 @@
             @extend %date-selected-special-first-last !optional;
         }
 
-        @include e(date, $mods: ('selected', 'special', 'range', 'first', 'last')) {
-            @extend %date-selected-special-range-first-last !optional;
+        @include e(date, $mods: ('selected', 'special', 'current', 'first', 'last')) {
+            @extend %date-selected-special-current-first-last !optional;
+        }
+
+        @include e(date, $mods: ('selected', 'special', 'current', 'preview', 'first')) {
+            @extend %date-selected-special-current-last !optional;
+        }
+
+        @include e(date, $mods: ('selected', 'special', 'current', 'preview', 'last')) {
+            @extend %date-selected-special-current-first !optional;
         }
 
         @include e(date, $mods: ('range', 'selected', 'active')) {
@@ -315,6 +323,10 @@
             @extend %date-special-current-selected !optional;
         }
 
+        @include e(date, $mods: ('special', 'current', 'selected', 'active')) {
+            @extend %date-special-current-selected-active !optional;
+        }
+
         @include e(date, $mods: ('special' 'active')) {
             @extend %date-special-active !optional;
         }
diff --git a/projects/igniteui-angular/src/lib/core/styles/components/calendar/_calendar-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/calendar/_calendar-theme.scss
index 08fac878202..3fd38d03a83 100644
--- a/projects/igniteui-angular/src/lib/core/styles/components/calendar/_calendar-theme.scss
+++ b/projects/igniteui-angular/src/lib/core/styles/components/calendar/_calendar-theme.scss
@@ -282,6 +282,10 @@
     $date-selected-current-hover-outline: null,
     $date-selected-current-focus-outline: null,
 
+    $date-selected-special-border-color: null,
+    $date-selected-special-hover-border-color: null,
+    $date-selected-special-focus-border-color: null,
+
     $date-current-foreground: null,
     $date-current-background: null,
     $date-current-hover-foreground: null,
@@ -636,6 +640,10 @@
         date-selected-current-hover-outline: $date-selected-current-hover-outline,
         date-selected-current-focus-outline: $date-selected-current-focus-outline,
 
+        date-selected-special-border-color: $date-selected-special-border-color,
+        date-selected-special-hover-border-color: $date-selected-special-hover-border-color,
+        date-selected-special-focus-border-color: $date-selected-special-focus-border-color,
+
         date-special-foreground: $date-special-foreground,
         date-special-background: $date-special-background,
         date-special-hover-foreground: $date-special-hover-foreground,
@@ -1589,10 +1597,14 @@
         }
     }
 
-    %date-selected-special-range-first-last {
+    %date-selected-special-current-first,
+    %date-selected-special-current-last,
+    %date-selected-special-current-first-last {
         @if $variant == 'indigo-design' {
-            &::after {
-                border-color: var-get($theme, 'date-selected-special-border-color');
+            %date-inner {
+                &::after {
+                    border-color: var-get($theme, 'date-selected-special-border-color');
+                }
             }
         }
     }
@@ -1637,6 +1649,13 @@
                     background: var-get($theme, 'date-current-background');
                 }
             }
+
+            @if $variant == 'indigo-design' {
+                &::after {
+                    width: $date-size;
+                    height: $date-size;
+                }
+            }
         }
     }
 
@@ -1717,6 +1736,11 @@
                     background: var-get($theme, 'date-current-hover-background');
                     border-color: var-get($theme, 'date-current-hover-border-color');
                 }
+
+                &::after {
+                    width: calc($date-inner-size - #{rem(4px)});
+                    height: calc($date-inner-size - #{rem(4px)});
+                }
             }
 
             @if $variant == 'fluent' {
@@ -1734,6 +1758,8 @@
     @if $variant == 'indigo-design' {
         %date-special-current-active {
             %date-inner {
+                color: var-get($theme, 'date-current-hover-foreground');
+                background: var-get($theme, 'date-current-focus-background');
                 border-color: var-get($theme, 'date-current-focus-border-color');
             }
         }
@@ -1748,6 +1774,14 @@
                 }
             }
         }
+
+        %date-special-current-selected-active {
+            %date-inner {
+                &::after {
+                    border-color: var-get($theme, 'date-selected-special-border-color');
+                }
+            }
+        }
     }
 
     %date-selected {
@@ -1794,6 +1828,12 @@
                 border-color: var-get($theme, 'date-selected-current-border-color');
             }
 
+            &::after {
+                @if $variant == 'indigo-design' {
+                    border-color: var-get($theme, 'date-current-border-color');
+                }
+            }
+
             &:hover {
                 color: var-get($theme, 'date-selected-current-hover-foreground');
                 background: var-get($theme, 'date-selected-current-hover-background');
@@ -1803,16 +1843,10 @@
                 } @else {
                     // stylelint-disable-next-line
                     &::after {
-                        border-color: var-get($theme, 'date-selected-current-hover-border-color');
+                        border-color: var-get($theme, 'date-current-hover-border-color');
                     }
                 }
             }
-
-            &::after {
-                @if $variant == 'indigo-design' {
-                    border-color: var-get($theme, 'date-selected-current-border-color');
-                }
-            }
         }
     }
 
@@ -1827,7 +1861,7 @@
 
             &::after {
                 @if $variant == 'indigo-design' {
-                    border-color: var-get($theme, 'date-selected-current-focus-border-color');
+                    border-color: var-get($theme, 'date-current-focus-border-color');
                 }
             }
         }
@@ -1911,10 +1945,16 @@
 
     %date-selected-current-range-first,
     %date-selected-current-range-last {
-        %date-inner {
-            @if $variant == 'indigo-design' {
+        @if $variant == 'indigo-design' {
+            %date-inner {
                 &::after {
-                    border-color: var-get($theme, 'date-selected-current-border-color');
+                border-color: var-get($theme, 'date-current-border-color');
+                }
+
+                &:hover {
+                    &::after {
+                        border-color: var-get($theme, 'date-current-hover-border-color');
+                    }
                 }
             }
         }
@@ -1960,6 +2000,11 @@
                     height: sizable(rem(22px), rem(24px), rem(28px));
                 }
 
+                @if $variant == 'indigo-design' {
+                    width:  calc($date-inner-size - #{rem(4px)});
+                    height:  calc($date-inner-size - #{rem(4px)});
+                }
+
                 @if $variant == 'fluent' {
                     border-color: var-get($theme, 'date-current-foreground');
                 }
@@ -1983,7 +2028,6 @@
             }
 
             @if $variant == 'indigo-design' {
-                color: var-get($theme, 'date-special-focus-foreground');
                 background: var-get($theme, 'date-selected-current-range-focus-background');
                 border-color: var-get($theme, 'date-current-focus-border-color');
             }
@@ -2128,15 +2172,6 @@
             width: $date-size;
             border-radius: var-get($theme, 'date-border-radius');
         }
-
-        %date-inner {
-            &::after {
-                @if $variant == 'indigo-design' {
-                    width: $date-inner-size;
-                    height: $date-inner-size;
-                }
-            }
-        }
     }
 
     %date-range-selected-first-disabled,
@@ -2181,13 +2216,7 @@
                 }
 
                 @if $variant == 'indigo-design' {
-                    // stylelint-disable max-nesting-depth
-                    &::after {
-                        width: calc($date-inner-size - #{rem(4px)});
-                        height: calc($date-inner-size - #{rem(4px)});
-                        border-color: var-get($theme, 'date-special-border-color');
-                    }
-                    // stylelint-enable max-nesting-depth
+                    border-color: var-get($theme, 'date-current-border-color');
                 }
             }
         }

From 1638fc36851cb0af3de3a0e992b36ae61afd1c3c Mon Sep 17 00:00:00 2001
From: desig9stein <mspopovv@gmail.com>
Date: Tue, 16 Jul 2024 17:03:36 +0300
Subject: [PATCH 3/4] refactor(calendar): fix inner border size and colors

---
 .../calendar/_calendar-component.scss         |  4 ++
 .../components/calendar/_calendar-theme.scss  | 66 ++++++++++---------
 2 files changed, 39 insertions(+), 31 deletions(-)

diff --git a/projects/igniteui-angular/src/lib/core/styles/components/calendar/_calendar-component.scss b/projects/igniteui-angular/src/lib/core/styles/components/calendar/_calendar-component.scss
index 3e1fa03252c..8fda2e15836 100644
--- a/projects/igniteui-angular/src/lib/core/styles/components/calendar/_calendar-component.scss
+++ b/projects/igniteui-angular/src/lib/core/styles/components/calendar/_calendar-component.scss
@@ -146,6 +146,10 @@
             @extend %date-selected-special !optional;
         }
 
+        @include e(date, $mods: ('selected', 'special', 'active')) {
+            @extend %date-selected-special-active !optional;
+        }
+
         @include e(date, $mods: ('selected', 'range')) {
             @extend %date-selected-range !optional;
         }
diff --git a/projects/igniteui-angular/src/lib/core/styles/components/calendar/_calendar-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/calendar/_calendar-theme.scss
index 3fd38d03a83..e8ed273dea9 100644
--- a/projects/igniteui-angular/src/lib/core/styles/components/calendar/_calendar-theme.scss
+++ b/projects/igniteui-angular/src/lib/core/styles/components/calendar/_calendar-theme.scss
@@ -112,6 +112,10 @@
 /// @param {Color} $date-selected-current-hover-outline [null] - The :hover outline of the current selected date.
 /// @param {Color} $date-selected-current-focus-outline [null] - The :focus outline of the current selected date.
 ///
+/// @param {Color} $date-selected-special-border-color: [null] - The border color of the selected special date,
+/// @param {Color} $date-selected-special-hover-border-color: [null] - The :hover border color of the selected special date,
+/// @param {Color} $date-selected-special-focus-border-color: [null] - The :focus border color of the selected special date,
+///
 /// @param {Color} $date-current-foreground [null] - The foreground of the current date.
 /// @param {Color} $date-current-background [null] - The background color of the current date.
 /// @param {Color} $date-current-hover-foreground [null] - The :hover text color of the current date.
@@ -1550,6 +1554,28 @@
         }
     }
 
+    %date-selected-special {
+        %date-inner {
+            &::after {
+                border-color: var-get($theme, 'date-selected-special-border-color');
+            }
+
+            &:hover {
+                &::after {
+                    border-color: var-get($theme, 'date-selected-special-hover-border-color');
+                }
+            }
+        }
+    }
+
+    %date-selected-special-active {
+        %date-inner {
+            &::after {
+                border-color: var-get($theme, 'date-selected-special-focus-border-color');
+            }
+        }
+    }
+
     %date-selected-range {
         %date-inner {
             &::after {
@@ -1600,11 +1626,9 @@
     %date-selected-special-current-first,
     %date-selected-special-current-last,
     %date-selected-special-current-first-last {
-        @if $variant == 'indigo-design' {
-            %date-inner {
-                &::after {
-                    border-color: var-get($theme, 'date-selected-special-border-color');
-                }
+        %date-inner {
+            &::after {
+                border-color: var-get($theme, 'date-selected-special-border-color');
             }
         }
     }
@@ -1774,12 +1798,12 @@
                 }
             }
         }
+    }
 
-        %date-special-current-selected-active {
-            %date-inner {
-                &::after {
-                    border-color: var-get($theme, 'date-selected-special-border-color');
-                }
+    %date-special-current-selected-active {
+        %date-inner {
+            &::after {
+                border-color: var-get($theme, 'date-selected-special-border-color');
             }
         }
     }
@@ -1806,19 +1830,6 @@
         }
     }
 
-    %date-selected-special {
-        %date-inner {
-            &::after {
-                @if $variant == 'material' or $variant == 'bootstrap' {
-                    border-color: var-get($theme, 'date-selected-foreground');
-                }
-                @if $variant == 'indigo-design' {
-                    border-color: var-get($theme, 'date-selected-special-border-color');
-                }
-            }
-        }
-    }
-
     %date-selected-current {
         %date-inner {
             color: var-get($theme, 'date-selected-current-foreground');
@@ -2196,14 +2207,7 @@
             &::after {
                 width: $date-inner-size;
                 height: $date-inner-size;
-
-                @if $variant == 'material' or $variant == 'bootstrap' {
-                    border-color: var-get($theme, 'date-selected-foreground');
-                }
-
-                @if $variant == 'indigo-design' {
-                    border-color: var-get($theme, 'date-selected-special-border-color');
-                }
+                border-color: var-get($theme, 'date-selected-special-border-color');
             }
         }
     }

From b4358ba15b850624a51548cdf5f68ab1e7129083 Mon Sep 17 00:00:00 2001
From: desig9stein <mspopovv@gmail.com>
Date: Mon, 22 Jul 2024 10:26:25 +0300
Subject: [PATCH 4/4] build(deps): bump igniteui-theming to latest beta

---
 package-lock.json | 8 ++++----
 package.json      | 2 +-
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index aac0b951732..5f59998e84f 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -25,7 +25,7 @@
         "@types/source-map": "0.5.2",
         "express": "^4.19.2",
         "fflate": "^0.8.1",
-        "igniteui-theming": "^10.0.0",
+        "igniteui-theming": "v10.1.0-beta.3",
         "igniteui-trial-watermark": "^3.0.2",
         "lodash-es": "^4.17.21",
         "rxjs": "^7.8.0",
@@ -12899,9 +12899,9 @@
       }
     },
     "node_modules/igniteui-theming": {
-      "version": "10.0.0",
-      "resolved": "https://registry.npmjs.org/igniteui-theming/-/igniteui-theming-10.0.0.tgz",
-      "integrity": "sha512-76usU65w0amIGDAmwrxfrPKz1W0Bzfe+24/q5fxyKCyKWzbLxCUyNHdfHY//tHBEKQF5Y3uSTFbY872J4cXxpw==",
+      "version": "10.1.0-beta.3",
+      "resolved": "https://registry.npmjs.org/igniteui-theming/-/igniteui-theming-10.1.0-beta.3.tgz",
+      "integrity": "sha512-JqGKOgLJLgs77OLJqaSNqcXpAi9L9E0CGEI4ttvZ7RJC54KkGhlQfAO8I5TH11//TbQ2NnQDrlvquEo2Qn4b2w==",
       "peerDependencies": {
         "sass": "^1.58.1"
       }
diff --git a/package.json b/package.json
index a4f1c71831b..1de1b81675c 100644
--- a/package.json
+++ b/package.json
@@ -80,7 +80,7 @@
     "@types/source-map": "0.5.2",
     "express": "^4.19.2",
     "fflate": "^0.8.1",
-    "igniteui-theming": "^10.0.0",
+    "igniteui-theming": "v10.1.0-beta.3",
     "igniteui-trial-watermark": "^3.0.2",
     "lodash-es": "^4.17.21",
     "rxjs": "^7.8.0",