npm - @syncfusion/blazor-themes - Versions diffs - 24.1.47 → 24.2.3 - Mend

@syncfusion/blazor-themes 24.1.47 → 24.2.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (145) hide show

package/SCSS-Themes/calendars/calendar/bootstrap4.scss CHANGED Viewed

@@ -29,6 +29,16 @@ $calendar-title-font-size: 16px !default;
 $calendar-title-margin-left-style: 8px !default;
 $calendar-title-font-weight-style: 600 !default;
 $calendar-title-decoration-style: none !default;
+$calendar-header-title-padding: 0 5px !default;
+// Focus related styles
+$calendar-title-focus-box-shadow: 0 0 0 1px $gray-900 !default;
+$calendar-title-focus-background: none !default;
+$calendar-title-active-background: $gray-900 !default;
+$calendar-icon-focus-box-shadow: 0 0 0 1px $gray-900 !default;
+$calendar-title-border-radius: 4px !default;
+$calendar-title-hover-bg-color: none !default;
+$calendar-focused-cell-box-shadow: 0 0 0 1px $gray-900 !default;
 //header color
 $calendar-header-font-color: $gray-900 !default;
@@ -431,6 +441,9 @@ $calendar-small-font-size: 12px !default;
         font-size: $calendar-title-font-size;
         font-weight: $calendar-title-font-weight-style;
         text-align: $calendar-float-left-style;
+        padding: $calendar-header-title-padding;
+        border: $calendar-none-style;
+        border-radius: $calendar-title-border-radius;
       }
       #{if(&, '&', '*')} .e-title {
         margin-left: $calendar-title-margin-left-style;
@@ -1050,11 +1063,25 @@ $calendar-small-font-size: 12px !default;
           color: $calendar-title-font-color;
         }
         #{if(&, '&', '*')} .e-title:hover {
-          color: $calendar-title-hover-color;
+          background: $calendar-title-hover-bg-color;
           cursor: pointer;
           text-decoration: $calendar-title-decoration-style;
         }
+        #{if(&, '&', '*')} .e-title:focus{
+          box-shadow: $calendar-title-focus-box-shadow;
+          background: $calendar-title-focus-background;
+          @if $skin-name == 'highcontrast' {
+            text-decoration: none;
+          }
+          @else {
+            text-decoration: $calendar-title-decoration-style;
+          }
+        }
+        #{if(&, '&', '*')} .e-title:active{
+          box-shadow: $calendar-box-shadow;
+          background: $calendar-title-active-background;
+          text-decoration: $calendar-title-decoration-style;
+        }
         #{if(&, '&', '*')} .e-prev:hover > span,
         #{if(&, '&', '*')} .e-next:hover > span {
           border: $calendar-icon-hover-border-color;
@@ -1066,7 +1093,10 @@ $calendar-small-font-size: 12px !default;
         #{if(&, '&', '*')} .e-next:hover {
           background: $calendar-icon-hover-bg-color;
         }
+        #{if(&, '&', '*')} .e-prev:focus,
+        #{if(&, '&', '*')} .e-next:focus {
+          box-shadow: $calendar-icon-focus-box-shadow;
+        }
         #{if(&, '&', '*')} .e-prev:active,
         #{if(&, '&', '*')} .e-next:active {
           background: $calendar-active-state-icon-bg-color;
@@ -1550,6 +1580,10 @@ $calendar-small-font-size: 12px !default;
       color: $calendar-today-disabled-color;
     }
   }
+  .e-calendar .e-cell.e-focused-cell {
+    box-shadow: $calendar-focused-cell-box-shadow;
+    border-radius: $calendar-border-radius;
+  }
 }

package/SCSS-Themes/calendars/calendar/bootstrap5-dark.scss CHANGED Viewed

@@ -28,6 +28,7 @@ $calendar-title-font-size: $text-base !default;
 $calendar-title-margin-left-style: 2px !default;
 $calendar-title-font-weight-style: $font-weight-bold !default;
 $calendar-title-decoration-style: none !default;
+$calendar-header-title-padding: 3px 5px !default;
 // common size properties
 $calendar-wrapper-border-radius: 4px !default;
@@ -160,13 +161,20 @@ $calendar-header-icon-color: $icon-color !default;
 $calendar-title-font-color: $content-text-color-alt1 !default;
 $calendar-icon-font-color: $content-text-color-alt1 !default;
 $calendar-active-icon-color: $secondary-text-color !default;
-$calendar-title-hover-color: $content-text-color-alt3 !default;
+$calendar-title-hover-color: $content-bg-color-alt2 !default;
+$calendar-title-border-radius: 4px !default;
+$calendar-title-hover-bg-color: $content-bg-color-alt2 !default;
+$calendar-title-focus-box-shadow: 0 0 0 1px $content-text-color-alt3 !default;
+$calendar-icon-focus-box-shadow: 0 0 0 1px $content-text-color-alt3 !default;
+$calendar-title-focus-background: none !default;
+$calendar-title-active-background: $content-bg-color-alt4 !default;
 $calendar-icon-hover-color: $secondary-text-color !default;
 $calendar-icon-hover-bg-color: $secondary-bg-color-hover !default;
 $calendar-device-icon-hover-bg-color: $secondary-bg-color-hover !default;
 $calendar-default-border-color: none !default;
 $calendar-icon-hover-border-color: $content-bg-color-hover !default;
 $calendar-active-state-icon-bg-color: $secondary-border-color-pressed !default;
+$calendar-focused-cell-box-shadow: 0 0 0 1px $content-text-color-alt3 !default;
 //popup styles
 $calendar-border-style: 1px solid $border-light !default;
@@ -453,6 +461,9 @@ $today-button-text-active-color: $primary-text-pressed !default;
         font-size: $calendar-title-font-size;
         font-weight: $calendar-title-font-weight-style;
         text-align: $calendar-float-left-style;
+        padding: $calendar-header-title-padding;
+        border: $calendar-none-style;
+        border-radius: $calendar-title-border-radius;
       }
       #{if(&, '&', '*')} .e-title {
         margin-left: $calendar-title-margin-left-style;
@@ -1072,11 +1083,25 @@ $today-button-text-active-color: $primary-text-pressed !default;
           color: $calendar-title-font-color;
         }
         #{if(&, '&', '*')} .e-title:hover {
-          color: $calendar-title-hover-color;
+          background: $calendar-title-hover-bg-color;
           cursor: pointer;
           text-decoration: $calendar-title-decoration-style;
         }
+        #{if(&, '&', '*')} .e-title:focus{
+          box-shadow: $calendar-title-focus-box-shadow;
+          background: $calendar-title-focus-background;
+          @if $skin-name == 'highcontrast' {
+            text-decoration: none;
+          }
+          @else {
+            text-decoration: $calendar-title-decoration-style;
+          }
+        }
+        #{if(&, '&', '*')} .e-title:active{
+          box-shadow: $calendar-box-shadow;
+          background: $calendar-title-active-background;
+          text-decoration: $calendar-title-decoration-style;
+        }
         #{if(&, '&', '*')} .e-prev:hover > span,
         #{if(&, '&', '*')} .e-next:hover > span {
           border: $calendar-icon-hover-border-color;
@@ -1088,7 +1113,10 @@ $today-button-text-active-color: $primary-text-pressed !default;
         #{if(&, '&', '*')} .e-next:hover {
           background: $calendar-icon-hover-bg-color;
         }
+        #{if(&, '&', '*')} .e-prev:focus,
+        #{if(&, '&', '*')} .e-next:focus {
+          box-shadow: $calendar-icon-focus-box-shadow;
+        }
         #{if(&, '&', '*')} .e-prev:active,
         #{if(&, '&', '*')} .e-next:active {
           background: $calendar-active-state-icon-bg-color;
@@ -1572,6 +1600,10 @@ $today-button-text-active-color: $primary-text-pressed !default;
       color: $calendar-today-disabled-color;
     }
   }
+  .e-calendar .e-cell.e-focused-cell {
+    box-shadow: $calendar-focused-cell-box-shadow;
+    border-radius: $calendar-border-radius;
+  }
 }

package/SCSS-Themes/calendars/calendar/bootstrap5.scss CHANGED Viewed

@@ -28,6 +28,7 @@ $calendar-title-font-size: $text-base !default;
 $calendar-title-margin-left-style: 2px !default;
 $calendar-title-font-weight-style: $font-weight-bold !default;
 $calendar-title-decoration-style: none !default;
+$calendar-header-title-padding: 3px 5px !default;
 // common size properties
 $calendar-wrapper-border-radius: 4px !default;
@@ -160,13 +161,20 @@ $calendar-header-icon-color: $icon-color !default;
 $calendar-title-font-color: $content-text-color-alt1 !default;
 $calendar-icon-font-color: $content-text-color-alt1 !default;
 $calendar-active-icon-color: $secondary-text-color !default;
-$calendar-title-hover-color: $content-text-color-alt3 !default;
+$calendar-title-hover-color: $content-bg-color-alt2 !default;
+$calendar-title-border-radius: 4px !default;
+$calendar-title-hover-bg-color: $content-bg-color-alt2 !default;
+$calendar-title-focus-box-shadow: 0 0 0 1px $content-text-color-alt3 !default;
+$calendar-icon-focus-box-shadow: 0 0 0 1px $content-text-color-alt3 !default;
+$calendar-title-focus-background: none !default;
+$calendar-title-active-background: $content-bg-color-alt4 !default;
 $calendar-icon-hover-color: $secondary-text-color !default;
 $calendar-icon-hover-bg-color: $secondary-bg-color-hover !default;
 $calendar-device-icon-hover-bg-color: $secondary-bg-color-hover !default;
 $calendar-default-border-color: none !default;
 $calendar-icon-hover-border-color: $content-bg-color-hover !default;
 $calendar-active-state-icon-bg-color: $secondary-border-color-pressed !default;
+$calendar-focused-cell-box-shadow: 0 0 0 1px $content-text-color-alt3 !default;
 //popup styles
 $calendar-border-style: 1px solid $border-light !default;
@@ -453,6 +461,9 @@ $today-button-text-active-color: $primary-text-pressed !default;
         font-size: $calendar-title-font-size;
         font-weight: $calendar-title-font-weight-style;
         text-align: $calendar-float-left-style;
+        padding: $calendar-header-title-padding;
+        border: $calendar-none-style;
+        border-radius: $calendar-title-border-radius;
       }
       #{if(&, '&', '*')} .e-title {
         margin-left: $calendar-title-margin-left-style;
@@ -1072,11 +1083,25 @@ $today-button-text-active-color: $primary-text-pressed !default;
           color: $calendar-title-font-color;
         }
         #{if(&, '&', '*')} .e-title:hover {
-          color: $calendar-title-hover-color;
+          background: $calendar-title-hover-bg-color;
           cursor: pointer;
           text-decoration: $calendar-title-decoration-style;
         }
+        #{if(&, '&', '*')} .e-title:focus{
+          box-shadow: $calendar-title-focus-box-shadow;
+          background: $calendar-title-focus-background;
+          @if $skin-name == 'highcontrast' {
+            text-decoration: none;
+          }
+          @else {
+            text-decoration: $calendar-title-decoration-style;
+          }
+        }
+        #{if(&, '&', '*')} .e-title:active{
+          box-shadow: $calendar-box-shadow;
+          background: $calendar-title-active-background;
+          text-decoration: $calendar-title-decoration-style;
+        }
         #{if(&, '&', '*')} .e-prev:hover > span,
         #{if(&, '&', '*')} .e-next:hover > span {
           border: $calendar-icon-hover-border-color;
@@ -1088,7 +1113,10 @@ $today-button-text-active-color: $primary-text-pressed !default;
         #{if(&, '&', '*')} .e-next:hover {
           background: $calendar-icon-hover-bg-color;
         }
+        #{if(&, '&', '*')} .e-prev:focus,
+        #{if(&, '&', '*')} .e-next:focus {
+          box-shadow: $calendar-icon-focus-box-shadow;
+        }
         #{if(&, '&', '*')} .e-prev:active,
         #{if(&, '&', '*')} .e-next:active {
           background: $calendar-active-state-icon-bg-color;
@@ -1572,6 +1600,10 @@ $today-button-text-active-color: $primary-text-pressed !default;
       color: $calendar-today-disabled-color;
     }
   }
+  .e-calendar .e-cell.e-focused-cell {
+    box-shadow: $calendar-focused-cell-box-shadow;
+    border-radius: $calendar-border-radius;
+  }
 }

package/SCSS-Themes/calendars/calendar/fabric-dark.scss CHANGED Viewed

@@ -60,6 +60,7 @@ $calendar-normal-max-width: 232px !default;
 $calendar-normal-min-width: 232px !default;
 $calendar-small-max-width: $calendar-normal-max-width !default;
 $calendar-small-min-width: $calendar-normal-min-width !default;
+$calendar-header-title-padding: 0 5px !default;
 // newly added
 $calendar-active-today-hover-font-color: $neutral-light-fontalt !default;
@@ -171,6 +172,15 @@ $calendar-today-disabled-box-shadow: none !default;
 $calendar-today-disabled-color: $neutral-tertiary-alt !default;
 $calendar-week-number-font-weight: 500 !default;
+// Focus related styles
+$calendar-title-focus-box-shadow: 0 0 0 1px $neutral-lighter !default;
+$calendar-title-focus-background: none !default;
+$calendar-title-active-background: none !default;
+$calendar-icon-focus-box-shadow: 0 0 0 1px $neutral-lighter !default;
+$calendar-title-border-radius: 0 !default;
+$calendar-title-hover-bg-color: none !default;
+$calendar-focused-cell-box-shadow: 0 0 0 1px $neutral-lighter !default;
 //table related styles
 $calendar-rtl-text-indent: 4px !default;
@@ -395,6 +405,9 @@ $calendar-small-font-size: 12px !default;
         font-size: $calendar-title-font-size;
         font-weight: $calendar-title-font-weight-style;
         text-align: $calendar-float-left-style;
+        padding: $calendar-header-title-padding;
+        border: $calendar-none-style;
+        border-radius: $calendar-title-border-radius;
       }
       #{if(&, '&', '*')} .e-title {
         margin-left: $calendar-title-margin-left-style;
@@ -1014,11 +1027,25 @@ $calendar-small-font-size: 12px !default;
           color: $calendar-title-font-color;
         }
         #{if(&, '&', '*')} .e-title:hover {
-          color: $calendar-title-hover-color;
+          background: $calendar-title-hover-bg-color;
           cursor: pointer;
           text-decoration: $calendar-title-decoration-style;
         }
+        #{if(&, '&', '*')} .e-title:focus{
+          box-shadow: $calendar-title-focus-box-shadow;
+          background: $calendar-title-focus-background;
+          @if $skin-name == 'highcontrast' {
+            text-decoration: none;
+          }
+          @else {
+            text-decoration: $calendar-title-decoration-style;
+          }
+        }
+        #{if(&, '&', '*')} .e-title:active{
+          box-shadow: $calendar-box-shadow;
+          background: $calendar-title-active-background;
+          text-decoration: $calendar-title-decoration-style;
+        }
         #{if(&, '&', '*')} .e-prev:hover > span,
         #{if(&, '&', '*')} .e-next:hover > span {
           border: $calendar-icon-hover-border-color;
@@ -1030,7 +1057,10 @@ $calendar-small-font-size: 12px !default;
         #{if(&, '&', '*')} .e-next:hover {
           background: $calendar-icon-hover-bg-color;
         }
+        #{if(&, '&', '*')} .e-prev:focus,
+        #{if(&, '&', '*')} .e-next:focus {
+          box-shadow: $calendar-icon-focus-box-shadow;
+        }
         #{if(&, '&', '*')} .e-prev:active,
         #{if(&, '&', '*')} .e-next:active {
           background: $calendar-active-state-icon-bg-color;
@@ -1514,6 +1544,10 @@ $calendar-small-font-size: 12px !default;
       color: $calendar-today-disabled-color;
     }
   }
+  .e-calendar .e-cell.e-focused-cell {
+    box-shadow: $calendar-focused-cell-box-shadow;
+    border-radius: $calendar-border-radius;
+  }
 }

package/SCSS-Themes/calendars/calendar/fabric.scss CHANGED Viewed

@@ -70,7 +70,7 @@ $calendar-normal-month-view-line-height: $calendar-normal-month-view-height !def
 $calendar-normal-day-header-height: $calendar-normal-month-view-height !default;
 $calendar-normal-day-header-text: none !default;
 $calendar-normal-year-decade-height: 45px !default;
-$calendar-normal-header-height: 36px !default;
+$calendar-normal-header-height: 32px !default;
 $calendar-normal-icon-size: 30px !default;
 $calendar-normal-today-button-height: 36px !default;
 $calendar-border-radius: 0 !default;
@@ -85,6 +85,7 @@ $calendar-prev-icon: '\e85e' !default;
 $calendar-next-icon: '\e84f' !default;
 $calendar-date-font-size: 12px !default;
 $calendar-title-font-weight-style: 300 !default;
+$calendar-header-title-padding: 0 5px !default;
 //$calendar-yeardecade-bg-color: $neutral-lighter !default;
 $calendar-yeardecade-hover-color: $neutral-tertiary-alt !default;
@@ -160,6 +161,15 @@ $calendar-bigger-icon-margin: 0 !default;
 $calendar-selected-border-color: none !default;
 $calendar-week-number-font-weight: 500 !default;
+// Focus related styles
+$calendar-title-focus-box-shadow: 0 0 0 1px $neutral-black !default;
+$calendar-title-focus-background: none !default;
+$calendar-title-active-background: none !default;
+$calendar-icon-focus-box-shadow: 0 0 0 1px $neutral-black !default;
+$calendar-title-border-radius: 0 !default;
+$calendar-title-hover-bg-color: none !default;
+$calendar-focused-cell-box-shadow: 0 0 0 1px $neutral-black !default;
 //today
 $calendar-footer-container-padding: 0 10px 10px 10px !default;
 $calendar-footer-border: none !default;
@@ -393,6 +403,9 @@ $calendar-small-font-size: 12px !default;
         font-size: $calendar-title-font-size;
         font-weight: $calendar-title-font-weight-style;
         text-align: $calendar-float-left-style;
+        padding: $calendar-header-title-padding;
+        border: $calendar-none-style;
+        border-radius: $calendar-title-border-radius;
       }
       #{if(&, '&', '*')} .e-title {
         margin-left: $calendar-title-margin-left-style;
@@ -1012,11 +1025,25 @@ $calendar-small-font-size: 12px !default;
           color: $calendar-title-font-color;
         }
         #{if(&, '&', '*')} .e-title:hover {
-          color: $calendar-title-hover-color;
+          background: $calendar-title-hover-bg-color;
           cursor: pointer;
           text-decoration: $calendar-title-decoration-style;
         }
+        #{if(&, '&', '*')} .e-title:focus{
+          box-shadow: $calendar-title-focus-box-shadow;
+          background: $calendar-title-focus-background;
+          @if $skin-name == 'highcontrast' {
+            text-decoration: none;
+          }
+          @else {
+            text-decoration: $calendar-title-decoration-style;
+          }
+        }
+        #{if(&, '&', '*')} .e-title:active{
+          box-shadow: $calendar-box-shadow;
+          background: $calendar-title-active-background;
+          text-decoration: $calendar-title-decoration-style;
+        }
         #{if(&, '&', '*')} .e-prev:hover > span,
         #{if(&, '&', '*')} .e-next:hover > span {
           border: $calendar-icon-hover-border-color;
@@ -1028,7 +1055,10 @@ $calendar-small-font-size: 12px !default;
         #{if(&, '&', '*')} .e-next:hover {
           background: $calendar-icon-hover-bg-color;
         }
+        #{if(&, '&', '*')} .e-prev:focus,
+        #{if(&, '&', '*')} .e-next:focus {
+          box-shadow: $calendar-icon-focus-box-shadow;
+        }
         #{if(&, '&', '*')} .e-prev:active,
         #{if(&, '&', '*')} .e-next:active {
           background: $calendar-active-state-icon-bg-color;
@@ -1512,6 +1542,10 @@ $calendar-small-font-size: 12px !default;
       color: $calendar-today-disabled-color;
     }
   }
+  .e-calendar .e-cell.e-focused-cell {
+    box-shadow: $calendar-focused-cell-box-shadow;
+    border-radius: $calendar-border-radius;
+  }
 }

package/SCSS-Themes/calendars/calendar/fluent-dark.scss CHANGED Viewed

@@ -28,6 +28,16 @@ $calendar-title-font-size: $text-sm !default;
 $calendar-title-margin-left-style: 6px !default;
 $calendar-title-font-weight-style: $font-weight-medium !default;
 $calendar-title-decoration-style: none !default;
+$calendar-header-title-padding: 0 5px !default;
+// Focus related styles
+$calendar-title-focus-box-shadow: 0 0 0 1px $content-text-color-alt3 !default;
+$calendar-title-focus-background: none !default;
+$calendar-title-active-background: $secondary-bg-color-hover !default;
+$calendar-icon-focus-box-shadow: 0 0 0 1px $content-text-color-alt3 !default;
+$calendar-title-border-radius: 2px !default;
+$calendar-title-hover-bg-color: $secondary-bg-color-hover !default;
+$calendar-focused-cell-box-shadow: 0 0 0 1px $content-text-color-alt3 !default;
 // common size properties
 $calendar-wrapper-border-radius: 0 !default;
@@ -143,7 +153,7 @@ $calendar-date-font-size: $text-xs !default;
 $calendar-bigger-day-font-size: $text-base !default;
 $calendar-link-font-weight-style: $font-weight-normal !default;
 $calendar-disable-font-weight-style: $font-weight-normal !default;
-$calendar-border-radius: 0 !default;
+$calendar-border-radius: 2px !default;
 //week header font size
 $calendar-bigger-week-header-font-size: $text-sm !default;
@@ -455,6 +465,9 @@ $calendar-week-number-border: 1px solid $content-text-color-alt3 !default;
         font-size: $calendar-title-font-size;
         font-weight: $calendar-title-font-weight-style;
         text-align: $calendar-float-left-style;
+        padding: $calendar-header-title-padding;
+        border: $calendar-none-style;
+        border-radius: $calendar-title-border-radius;
       }
       #{if(&, '&', '*')} .e-title {
         margin-left: $calendar-title-margin-left-style;
@@ -1074,11 +1087,25 @@ $calendar-week-number-border: 1px solid $content-text-color-alt3 !default;
           color: $calendar-title-font-color;
         }
         #{if(&, '&', '*')} .e-title:hover {
-          color: $calendar-title-hover-color;
+          background: $calendar-title-hover-bg-color;
           cursor: pointer;
           text-decoration: $calendar-title-decoration-style;
         }
+        #{if(&, '&', '*')} .e-title:focus{
+          box-shadow: $calendar-title-focus-box-shadow;
+          background: $calendar-title-focus-background;
+          @if $skin-name == 'highcontrast' {
+            text-decoration: none;
+          }
+          @else {
+            text-decoration: $calendar-title-decoration-style;
+          }
+        }
+        #{if(&, '&', '*')} .e-title:active{
+          box-shadow: $calendar-box-shadow;
+          background: $calendar-title-active-background;
+          text-decoration: $calendar-title-decoration-style;
+        }
         #{if(&, '&', '*')} .e-prev:hover > span,
         #{if(&, '&', '*')} .e-next:hover > span {
           border: $calendar-icon-hover-border-color;
@@ -1090,7 +1117,10 @@ $calendar-week-number-border: 1px solid $content-text-color-alt3 !default;
         #{if(&, '&', '*')} .e-next:hover {
           background: $calendar-icon-hover-bg-color;
         }
+        #{if(&, '&', '*')} .e-prev:focus,
+        #{if(&, '&', '*')} .e-next:focus {
+          box-shadow: $calendar-icon-focus-box-shadow;
+        }
         #{if(&, '&', '*')} .e-prev:active,
         #{if(&, '&', '*')} .e-next:active {
           background: $calendar-active-state-icon-bg-color;
@@ -1574,6 +1604,10 @@ $calendar-week-number-border: 1px solid $content-text-color-alt3 !default;
       color: $calendar-today-disabled-color;
     }
   }
+  .e-calendar .e-cell.e-focused-cell {
+    box-shadow: $calendar-focused-cell-box-shadow;
+    border-radius: $calendar-border-radius;
+  }
 }

package/SCSS-Themes/calendars/calendar/fluent.scss CHANGED Viewed

@@ -28,6 +28,16 @@ $calendar-title-font-size: $text-sm !default;
 $calendar-title-margin-left-style: 6px !default;
 $calendar-title-font-weight-style: $font-weight-medium !default;
 $calendar-title-decoration-style: none !default;
+$calendar-header-title-padding: 0 5px !default;
+// Focus related styles
+$calendar-title-focus-box-shadow: 0 0 0 1px $content-text-color-alt3 !default;
+$calendar-title-focus-background: none !default;
+$calendar-title-active-background: $secondary-bg-color-hover !default;
+$calendar-icon-focus-box-shadow: 0 0 0 1px $content-text-color-alt3 !default;
+$calendar-title-border-radius: 2px !default;
+$calendar-title-hover-bg-color: $secondary-bg-color-hover !default;
+$calendar-focused-cell-box-shadow: 0 0 0 1px $content-text-color-alt3 !default;
 // common size properties
 $calendar-wrapper-border-radius: 0 !default;
@@ -143,7 +153,7 @@ $calendar-date-font-size: $text-xs !default;
 $calendar-bigger-day-font-size: $text-base !default;
 $calendar-link-font-weight-style: $font-weight-normal !default;
 $calendar-disable-font-weight-style: $font-weight-normal !default;
-$calendar-border-radius: 0 !default;
+$calendar-border-radius: 2px !default;
 //week header font size
 $calendar-bigger-week-header-font-size: $text-sm !default;
@@ -455,6 +465,9 @@ $calendar-week-number-border: 1px solid $content-text-color-alt3 !default;
         font-size: $calendar-title-font-size;
         font-weight: $calendar-title-font-weight-style;
         text-align: $calendar-float-left-style;
+        padding: $calendar-header-title-padding;
+        border: $calendar-none-style;
+        border-radius: $calendar-title-border-radius;
       }
       #{if(&, '&', '*')} .e-title {
         margin-left: $calendar-title-margin-left-style;
@@ -1074,11 +1087,25 @@ $calendar-week-number-border: 1px solid $content-text-color-alt3 !default;
           color: $calendar-title-font-color;
         }
         #{if(&, '&', '*')} .e-title:hover {
-          color: $calendar-title-hover-color;
+          background: $calendar-title-hover-bg-color;
           cursor: pointer;
           text-decoration: $calendar-title-decoration-style;
         }
+        #{if(&, '&', '*')} .e-title:focus{
+          box-shadow: $calendar-title-focus-box-shadow;
+          background: $calendar-title-focus-background;
+          @if $skin-name == 'highcontrast' {
+            text-decoration: none;
+          }
+          @else {
+            text-decoration: $calendar-title-decoration-style;
+          }
+        }
+        #{if(&, '&', '*')} .e-title:active{
+          box-shadow: $calendar-box-shadow;
+          background: $calendar-title-active-background;
+          text-decoration: $calendar-title-decoration-style;
+        }
         #{if(&, '&', '*')} .e-prev:hover > span,
         #{if(&, '&', '*')} .e-next:hover > span {
           border: $calendar-icon-hover-border-color;
@@ -1090,7 +1117,10 @@ $calendar-week-number-border: 1px solid $content-text-color-alt3 !default;
         #{if(&, '&', '*')} .e-next:hover {
           background: $calendar-icon-hover-bg-color;
         }
+        #{if(&, '&', '*')} .e-prev:focus,
+        #{if(&, '&', '*')} .e-next:focus {
+          box-shadow: $calendar-icon-focus-box-shadow;
+        }
         #{if(&, '&', '*')} .e-prev:active,
         #{if(&, '&', '*')} .e-next:active {
           background: $calendar-active-state-icon-bg-color;
@@ -1574,6 +1604,10 @@ $calendar-week-number-border: 1px solid $content-text-color-alt3 !default;
       color: $calendar-today-disabled-color;
     }
   }
+  .e-calendar .e-cell.e-focused-cell {
+    box-shadow: $calendar-focused-cell-box-shadow;
+    border-radius: $calendar-border-radius;
+  }
 }