fix(calendar): Make all date states to react to radius factor (#16031)

Author: desig9stein

package-lock.json

@@ -74,7 +74,7 @@
     "@types/source-map": "0.5.2",
     "express": "^5.1.0",
     "fflate": "^0.8.1",
-    "igniteui-theming": "^18.0.1",
+    "igniteui-theming": "^19.1.2",
     "igniteui-trial-watermark": "^3.1.0",
     "lodash-es": "^4.17.21",
     "rxjs": "^7.8.2",
@@ -120,7 +120,7 @@
     "ig-typedoc-theme": "^6.0.0",
     "igniteui-dockmanager": "^1.16.1",
     "igniteui-sassdoc-theme": "^2.0.0",
-    "igniteui-webcomponents": "6.0.1",
+    "igniteui-webcomponents": "6.1.1",
     "jasmine": "^5.6.0",
     "jasmine-core": "^5.6.0",
     "karma": "^6.4.4",

package.json

@@ -73,7 +73,7 @@
         "tslib": "^2.3.0",
         "igniteui-trial-watermark": "^3.1.0",
         "lodash-es": "^4.17.21",
-        "igniteui-theming": "^18.0.1",
+        "igniteui-theming": "^19.1.2",
         "@igniteui/material-icons-extended": "^3.1.0"
     },
     "peerDependencies": {

projects/igniteui-angular/package.json

@@ -157,6 +157,8 @@
 /// @param {List} $border-radius [null] - The border radius used for the calendar.
 /// @param {List} $date-border-radius [null] - The border radius used for the date.
 /// @param {List} $date-range-border-radius [null] - The border radius used for the date range selection.
+/// @param {List} $date-current-border-radius [null] - The border radius used for the current date .
+/// @param {List} $date-special-border-radius [null] - The border radius used for the special date.
 /// @param {List} $ym-border-radius [null] - The border radius used for the month/year.
 ///
 /// @param {Color} $actions-divider-color [null] - The border color used for the date-picker actions divider.
@@ -310,6 +312,8 @@
     $date-border-radius: null,
     $week-number-border-radius: null,
     $date-range-border-radius: null,
+    $date-current-border-radius: null,
+    $date-special-border-radius: null,
     $ym-border-radius: null,
 
     $actions-divider-color: null,
@@ -330,6 +334,22 @@
     $theme: digest-schema($calendar-schema);
     $variant: map.get($schema, '_meta', 'theme');
 
+    @if not($date-range-border-radius) and $date-border-radius {
+        $date-range-border-radius: $date-border-radius;
+    }
+
+    @if not($date-border-radius) and $date-range-border-radius {
+        $date-border-radius: $date-range-border-radius;
+    }
+
+    @if not($date-current-border-radius) and $date-border-radius {
+        $date-current-border-radius: $date-border-radius;
+    }
+
+    @if not($date-special-border-radius) and $date-border-radius {
+        $date-special-border-radius: $date-border-radius;
+    }
+
     //base start
     @if not($header-foreground) and $header-background {
         $header-foreground: adaptive-contrast(var(--header-background));
@@ -1031,6 +1051,8 @@
         border-radius: $border-radius,
         date-border-radius: $date-border-radius,
         date-range-border-radius: $date-range-border-radius,
+        date-current-border-radius: $date-current-border-radius,
+        date-special-border-radius: $date-special-border-radius,
         ym-border-radius: $ym-border-radius,
         week-number-border-radius: $week-number-border-radius,
         date-border-color: $date-border-color,
@@ -1827,13 +1849,12 @@
             position: absolute;
             z-index: 0;
             border: $border-size solid transparent;
+            border-radius: calc(var-get($theme, 'date-special-border-radius') - $border-size);
 
             @if $variant == 'fluent' {
-                border-radius: 50%;
                 width: $date-inner-size;
                 height: $date-inner-size;
             } @else {
-                border-radius: inherit;
                 // By default initial size of the inner element is the same as the date size
                 width: $date-size;
                 height: $date-size;
@@ -1964,6 +1985,7 @@
                 background: var-get($theme, 'date-special-range-hover-background');
 
                 @if $variant == 'indigo' {
+                    // stylelint-disable-next-line
                     &::after {
                         border-color: var-get($theme, 'date-special-hover-border-color');
                     }
@@ -2041,9 +2063,13 @@
                     z-index: -1;
                     width: $date-inner-size;
                     height: $date-inner-size;
-                    border-radius: 50%;
+                    border-radius: calc(var-get($theme, 'date-current-border-radius') - ($border-size * 2));
                     background: var-get($theme, 'date-current-background');
                 }
+
+                &::after {
+                    border-radius: calc(var-get($theme, 'date-current-border-radius') - $border-size);
+                }
             }
 
             @if $variant == 'indigo' {
@@ -2089,8 +2115,8 @@
             &::after {
                 border-color: var-get($theme, 'date-special-border-color');
 
-                @if $variant == 'bootstrap' {
-                    border-radius: $date-size;
+                @if $variant == 'bootstrap' or $variant == 'fluent'  {
+                    border-radius: calc(var-get($theme, 'date-special-border-radius') - ($border-size * 2));
                 }
             }
 
@@ -2232,6 +2258,7 @@
                 }
 
                 &:hover {
+                    // stylelint-disable-next-line
                     &::after {
                         border-color: var-get($theme, 'date-selected-special-hover-border-color');
                     }
@@ -2343,6 +2370,7 @@
                 }
 
                 &:hover {
+                    // stylelint-disable-next-line
                     &::after {
                         border-color: var-get($theme, 'date-current-hover-border-color');
                     }