@syncfusion/ej2-calendars 33.2.15 → 34.2.2

package/styles/calendar/_layout.scss

@@ -1,4 +1,4 @@
-@use 'ej2-base/styles/common/mixin' as *;
+@use 'variables' as *;
 @include export-module('calendar-layout') { /*! calendar layout */
 
   #{&}ejs-calendar {
@@ -6,27 +6,27 @@
   }
 
   #{&}.e-calendar.e-disabled {
-    #{if(&, '&', '*')} .e-header {
-      #{if(&, '&', '*')} .e-prev,
-      #{if(&, '&', '*')} .e-next {
+    & .e-header {
+      & .e-prev,
+      & .e-next {
         cursor: $calendar-cursor-default-style;
         pointer-events: $calendar-none-style;
         touch-action: $calendar-none-style;
       }
 
-      #{if(&, '&', '*')} .e-title {
+      & .e-title {
         cursor: $calendar-cursor-default-style;
         pointer-events: $calendar-none-style;
         touch-action: $calendar-none-style;
       }
     }
 
-    #{if(&, '&', '*')} .e-content td {
+    & .e-content td {
       pointer-events: $calendar-none-style;
       touch-action: $calendar-none-style;
     }
 
-    #{if(&, '&', '*')} .e-btn.e-today {
+    & .e-btn.e-today {
       pointer-events: $calendar-none-style;
       touch-action: $calendar-none-style;
     }
@@ -40,14 +40,14 @@
     overflow: auto;
     user-select: $calendar-none-style;
 
-    #{if(&, '&', '*')}.e-rtl .e-header .e-title {
+    &.e-rtl .e-header .e-title {
       float: $calendar-float-right-style;
       text-align: $calendar-float-right-style;
     }
-    #{if(&, '&', '*')}.e-rtl .e-header .e-icon-container {
+    &.e-rtl .e-header .e-icon-container {
       float: $calendar-float-left-style;
     }
-    #{if(&, '&', '*')} .e-header {
+    & .e-header {
       background: $calendar-none-style;
       display: table;
       font-weight: $calendar-spanicon-font-weight-style;
@@ -55,14 +55,14 @@
       text-align: center;
       width: $calendar-full-width;
 
-      #{if(&, '&', '*')} button {
+      & button {
         background: transparent;
         border: $border-zero;
         margin-right: $calendar-icon-button-margin;
         padding: $padding-zero;
         text-decoration: $calendar-none-style;
       }
-      #{if(&, '&', '*')} span {
+      & span {
         cursor: $calendar-cursor-pointer-style;
         display: inline-block;
         font-size: $calendar-icon-font-size-style;
@@ -71,26 +71,26 @@
         padding: $calendar-icon-padding;
         vertical-align: middle;
 
-        #{if(&, '&', '*')}.e-disabled {
+        &.e-disabled {
           cursor: $calendar-cursor-default-style;
         }
       }
     }
-    #{if(&, '&', '*')} .e-week-header {
+    & .e-week-header {
       padding: $calendar-thead-padding;
     }
-    #{if(&, '&', '*')} th {
+    & th {
       cursor: $calendar-cursor-default-style;
       font-size: $calendar-header-font-size;
       font-weight: normal;
       text-align: center;
     }
-    #{if(&, '&', '*')} .e-content {
-      #{if(&, '&', '*')} .e-selected ,
-      #{if(&, '&', '*')} .e-state-hover {
+    & .e-content {
+      & .e-selected,
+      & .e-state-hover {
         border-radius: $calendar-zero-border-radius;
       }
-      #{if(&, '&', '*')} span.e-day {
+      & span.e-day {
         border-radius: $calendar-zero-border-radius;
         cursor: $calendar-cursor-pointer-style;
         display: $calendar-inline-block-style;
@@ -101,29 +101,29 @@
         text-decoration: $calendar-none-style;
         vertical-align: middle;
       }
-      #{if(&, '&', '*')} th,
-      #{if(&, '&', '*')} td {
+      & th,
+      & td {
         box-sizing: border-box;
       }
-      #{if(&, '&', '*')} td.e-disabled {
+      & td.e-disabled {
         opacity: $calendar-disable-opacity;
         pointer-events: $calendar-none-style;
         touch-action: $calendar-none-style;
       }
-      #{if(&,'&','*')} td.e-disabled.e-today {
+      & td.e-disabled.e-today {
         @if $skin-name == 'fabric' or $skin-name == 'fabric-dark' or $skin-name == 'material' or $skin-name == 'material-dark' or $skin-name == 'highcontrast' or $skin-name == 'Material3' or $skin-name == 'fluent2' {
           opacity: 1;
-          #{if(&,'&','*')} span.e-day {
+          & span.e-day {
             box-shadow: $calendar-disabled-today-box-shadow;
             color: $calendar-disabled-today-font-color;
           }
         }
       }
-      #{if(&, '&', '*')} td {
+      & td {
         cursor: pointer;
         padding: $calendar-yeardeacde-span-padding;
         text-align: center;
-        #{if(&, '&', '*')}.e-week-number {
+        &.e-week-number {
           color: $calendar-week-number-font-color;
           font-size: $calendar-week-number-font-size-style;
           font-style: $calendar-week-number-font-style;
@@ -136,12 +136,12 @@
             border-right: $calendar-week-number-border;
           }
         }
-        #{if(&, '&', '*')}.e-overlay {
+        &.e-overlay {
           background: $calendar-none-style;
           width: initial;
         }
       }
-      #{if(&, '&', '*')} td:hover {
+      & td:hover {
         @if skin-name == 'fluent2' {
           border-radius: $calendar-td-hover-border-radius;
           background: $calendar-hover-border-color;
@@ -159,29 +159,29 @@
         table-layout: fixed;
         width: $calendar-full-width;
       }
-      #{if(&, '&', '*')} td.e-other-month > span.e-day,
-      #{if(&, '&', '*')} td.e-other-year > span.e-day {
+      & td.e-other-month > span.e-day,
+      & td.e-other-year > span.e-day {
         display: $calendar-other-month-display-style;
         font-weight: $calendar-link-font-weight-style;
       }
-      #{if(&, '&', '*')} tr.e-month-hide {
+      & tr.e-month-hide {
         display: $calendar-other-month-row-display-style;
         font-weight: $calendar-link-font-weight-style;
       }
-      #{if(&, '&', '*')} tr.e-month-hide,
-      #{if(&, '&', '*')} td.e-other-month,
-      #{if(&, '&', '*')} td.e-other-year {
+      & tr.e-month-hide,
+      & td.e-other-month,
+      & td.e-other-year {
         pointer-events: $calendar-pointer-events;
         touch-action: $calendar-pointer-events;
       }
-      #{if(&, '&', '*')} tr.e-month-hide,
-      #{if(&, '&', '*')} td.e-other-month.e-disabled,
-      #{if(&, '&', '*')} td.e-other-year.e-disabled {
+      & tr.e-month-hide,
+      & td.e-other-month.e-disabled,
+      & td.e-other-year.e-disabled {
         pointer-events: $calendar-none-style;
         touch-action: $calendar-none-style;
       }
-      #{if(&, '&', '*')} td.e-week-number:hover span.e-day,
-      #{if(&, '&', '*')} td.e-week-number:hover {
+      & td.e-week-number:hover span.e-day,
+      & td.e-week-number:hover {
         @if ($skin-name != 'Material3' and $skin-name != 'fluent2') {
           background-color: $calendar-bg-color;
         }
@@ -194,15 +194,15 @@
         }
       }
     }
-    #{if(&, '&', '*')} .e-header {
-      #{if(&, '&', '*')} .e-prev,
-      #{if(&, '&', '*')} .e-next {
+    & .e-header {
+      & .e-prev,
+      & .e-next {
         border-radius: $calendar-border-radius;
         display: inline-block;
         font-size: $calendar-next-prev-icon-size;
         vertical-align: middle;
       }
-      #{if(&, '&', '*')} .e-title {
+      & .e-title {
         cursor: $calendar-cursor-pointer-style;
         display: $calendar-inline-block-style;
         float: $calendar-float-left-style;
@@ -213,26 +213,26 @@
         border: $calendar-none-style;
         border-radius: $calendar-title-border-radius;
       }
-      #{if(&, '&', '*')} .e-title {
+      & .e-title {
         margin-left: $calendar-title-margin-left-style;
       }
-      #{if(&, '&', '*')} .e-prev:hover,
-      #{if(&, '&', '*')} .e-next:hover {
+      & .e-prev:hover,
+      & .e-next:hover {
         cursor: $calendar-cursor-pointer-style;
       }
-      #{if(&, '&', '*')} .e-prev.e-overlay,
-      #{if(&, '&', '*')} .e-next.e-overlay {
+      & .e-prev.e-overlay,
+      & .e-next.e-overlay {
         background: $calendar-none-style;
       }
     }
-    #{if(&, '&', '*')} .e-header.e-decade .e-title,
-    #{if(&, '&', '*')} .e-header.e-year .e-title {
+    & .e-header.e-decade .e-title,
+    & .e-header.e-year .e-title {
       margin-left: $calendar-decade-title-left-margin-style;
     }
-    #{if(&, '&', '*')} .e-header.e-decade .e-title {
+    & .e-header.e-decade .e-title {
       cursor: $calendar-cursor-default-style;
     }
-    #{if(&, '&', '*')} .e-header .e-icon-container {
+    & .e-header .e-icon-container {
       display: $calendar-inline-block-style;
       float: $calendar-float-right-style;
       padding-top: $calendar-icon-padding-top;
@@ -241,7 +241,7 @@
         top: $calendar-header-icon-top;
       }
     }
-    #{if(&, '&', '*')} .e-footer-container {
+    & .e-footer-container {
       text-transform: uppercase;
     }
   }
@@ -275,48 +275,48 @@
       min-height: $calendar-normal-min-height;
     }
 
-    #{if(&, '&', '*')}.e-calendar-day-header-lg {
+    &.e-calendar-day-header-lg {
       max-width: $calendar-lg-day-header-format-max-width;
       min-width: $calendar-lg-day-header-format-min-width;
     }
-    #{if(&, '&', '*')}.e-week-number {
+    &.e-week-number {
       min-width: $calendar-weeknumber-min-width;
     }
 
-    #{if(&, '&', '*')}.e-week {
+    &.e-week {
       max-width: $calendar-week-normal-max-width;
       min-width: $calendar-week-normal-min-width;
     }
-    #{if(&, '&', '*')} .e-header .e-title {
+    & .e-header .e-title {
       line-height: $calendar-normal-header-height;
     }
-    #{if(&, '&', '*')}.e-rtl .e-header .e-title {
+    &.e-rtl .e-header .e-title {
       text-align: $calendar-float-right-style;
       text-indent: $calendar-rtl-text-indent;
     }
-    #{if(&, '&', '*')} .e-header {
+    & .e-header {
       height: $calendar-normal-header-height;
 
-      #{if(&, '&', '*')}.e-month {
+      &.e-month {
         padding: $calendar-normal-header-padding;
       }
 
-      #{if(&, '&', '*')}.e-year,
-      #{if(&, '&', '*')}.e-decade {
+      &.e-year,
+      &.e-decade {
         padding: $calendar-yeardecade-header-padding;
       }
     }
-    #{if(&, '&', '*')} th {
+    & th {
       font-weight: $calendar-normal-day-header-font-weight;
       height: $calendar-normal-day-header-height;
       text-transform: $calendar-normal-day-header-text;
     }
-    #{if(&, '&', '*')} .e-content {
-      #{if(&, '&', '*')} .e-selected ,
-      #{if(&, '&', '*')} .e-state-hover {
+    & .e-content {
+      & .e-selected,
+      & .e-state-hover {
         border-radius: $calendar-zero-border-radius;
       }
-      #{if(&, '&', '*')} span.e-day {
+      & span.e-day {
         border: $calendar-default-border-color;
         font-size: $calendar-date-font-size;
         font-weight: $calendar-link-font-weight-style;
@@ -325,31 +325,31 @@
         width: $calendar-normal-month-view-width;
       }
     }
-    #{if(&, '&', '*')} .e-content.e-month td.e-today span.e-day {
+    & .e-content.e-month td.e-today span.e-day {
       line-height: $calendar-normal-month-view-line-height;
     }
-    #{if(&, '&', '*')} .e-content td.e-today span.e-day {
+    & .e-content td.e-today span.e-day {
       @if $skin-name == 'FluentUI' {
         height: 25px;
         width: 25px;
         line-height: 25px;
       }
     }
-    #{if(&, '&', '*')} .e-content.e-year table,
-    #{if(&, '&', '*')} .e-content.e-decade table {
+    & .e-content.e-year table,
+    & .e-content.e-decade table {
       border-spacing: 0;
       padding: $calendar-yeardecade-padding;
     }
-    #{if(&, '&', '*')} .e-content.e-month td {
+    & .e-content.e-month td {
       height: $calendar-normal-month-view-height;
       padding: $calendar-normal-month-cell-padding;
     }
-    #{if(&, '&', '*')} .e-content .tfooter > tr > td {
+    & .e-content .tfooter > tr > td {
       height: $calendar-normal-today-button-height;
       line-height: $calendar-normal-today-button-height;
     }
-    #{if(&, '&', '*')} .e-content.e-year td,
-    #{if(&, '&', '*')} .e-content.e-decade td {
+    & .e-content.e-year td,
+    & .e-content.e-decade td {
       @if ($skin-name != 'Material3' and $skin-name != 'fluent2') {
         height: $calendar-normal-year-decade-height;
         padding: $calendar-normal-year-decade-padding;
@@ -360,16 +360,16 @@
         width: $calendar-normal-year-decade-width;
       }
     }
-    #{if(&, '&', '*')} .e-content.e-year td .e-selected,
-    #{if(&, '&', '*')} .e-content.e-decade td .e-selected {
+    & .e-content.e-year td .e-selected,
+    & .e-content.e-decade td .e-selected {
       @if $skin-name == 'tailwind3' {
         background: $calendar-active-bg-color;
         border-radius: $calendar-active-content-border-radius;
       }
     }
 
-    #{if(&, '&', '*')} .e-content.e-year td > span.e-day,
-    #{if(&, '&', '*')} .e-content.e-decade td > span.e-day {
+    & .e-content.e-year td > span.e-day,
+    & .e-content.e-decade td > span.e-day {
       @if ($skin-name != 'Material3' and $skin-name != 'fluent2') {
         font-weight: $calendar-yeardecade-font-weight;
         height: $calendar-normal-year-decade-height;
@@ -383,28 +383,28 @@
         width: $calendar-normal-year-decade-width;
       }
     }
-    #{if(&, '&', '*')} .e-content.e-year td.e-selected:not(.e-focused-date) > span.e-day,
-    #{if(&, '&', '*')} .e-content.e-decade td.e-selected:not(.e-focused-date) > span.e-day,
-    #{if(&, '&', '*')} .e-content.e-year td.e-selected:not(.e-focused-date):hover > span.e-day,
-    #{if(&, '&', '*')} .e-content.e-decade td.e-selected:not(.e-focused-date):hover > span.e-day {
+    & .e-content.e-year td.e-selected:not(.e-focused-date) > span.e-day,
+    & .e-content.e-decade td.e-selected:not(.e-focused-date) > span.e-day,
+    & .e-content.e-year td.e-selected:not(.e-focused-date):hover > span.e-day,
+    & .e-content.e-decade td.e-selected:not(.e-focused-date):hover > span.e-day {
       @if ($skin-name == 'FluentUI') {
         box-shadow: $calendar-none-style;
       }
     }
-    #{if(&, '&', '*')} .e-header .e-icon-container {
-      #{if(&, '&', '*')} .e-prev,
-      #{if(&, '&', '*')} .e-next {
+    & .e-header .e-icon-container {
+      & .e-prev,
+      & .e-next {
         height: $calendar-normal-icon-size;
         width: $calendar-normal-icon-size;
       }
 
-      #{if(&, '&', '*')} .e-prev {
+      & .e-prev {
         @if $skin-name == 'tailwind' {
           margin: $calendar-normal-down-icon-margin;
         }
       }
     }
-    #{if(&, '&', '*')} .e-footer-container {
+    & .e-footer-container {
       @if ($skin-name != 'Material3' and $skin-name != 'fluent2') {
         background-color: $calendar-footer-background;
       }
@@ -425,7 +425,7 @@
       padding: $calendar-footer-container-padding;
       width: $calendar-full-width;
     }
-    #{if(&, '&', '*')}.e-rtl .e-header .e-title {
+    &.e-rtl .e-header .e-title {
       @if $skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3' {
         text-indent: $calendar-rtl-bigger-small-text-indent;
       }
@@ -445,33 +445,33 @@
       min-width: $calendar-small-min-width;
       padding: $calendar-small-popup-padding;
     }
-    #{if(&, '&', '*')} .e-footer-container {
+    & .e-footer-container {
       @if $skin-name == 'tailwind' {
         padding: $calendar-small-footer-container-padding;
       }
     }
 
-    #{if(&, '&', '*')}.e-calendar-day-header-lg {
+    &.e-calendar-day-header-lg {
       max-width: $calendar-lg-day-header-format-max-width;
       min-width: $calendar-lg-day-header-format-min-width;
     }
-    #{if(&, '&', '*')}.e-week-number .e-content table {
+    &.e-week-number .e-content table {
       @if $skin-name == 'FluentUI' {
         padding: 0 5px;
       }
     }
-    #{if(&, '&', '*')} .e-content {
-      #{if(&, '&', '*')} span.e-day {
+    & .e-content {
+      & span.e-day {
         font-size: $calendar-small-date-font-size;
         height: $calendar-small-month-view-height;
         line-height: $calendar-small-month-view-height;
         width: $calendar-small-month-view-width;
       }
 
-      #{if(&, '&', '*')}.e-month td.e-today span.e-day {
+      &.e-month td.e-today span.e-day {
         line-height: $calendar-small-month-view-line-height;
       }
-      #{if(&, '&', '*')} td.e-today span.e-day {
+      & td.e-today span.e-day {
         @if $skin-name == 'FluentUI' {
           height: 21px;
           width: 21px;
@@ -480,82 +480,82 @@
       }
     }
 
-    #{if(&, '&', '*')} .e-content.e-month td {
+    & .e-content.e-month td {
       height: $calendar-small-month-view-height;
     }
 
-    #{if(&, '&', '*')} .e-header {
+    & .e-header {
       height: $calendar-small-header-height;
-      #{if(&, '&', '*')} button{
-        #{if(&, '&', '*')} span {
+      & button{
+        & span {
           font-size: $calendar-small-icon-font-size-style;
           padding: $calendar-small-icon-padding;
           line-height: $line-height;
         }
       }
 
-      #{if(&, '&', '*')} .e-title {
+      & .e-title {
         font-size: $calendar-small-title-font-size;
         line-height: $calendar-small-header-height;
       }
 
-      #{if(&, '&', '*')}.e-month,
-      #{if(&, '&', '*')}.e-year,
-      #{if(&, '&', '*')}.e-decade {
+      &.e-month,
+      &.e-year,
+      &.e-decade {
         @if $skin-name == 'tailwind' {
           padding: $calendar-small-header-padding;
         }
       }
     }
 
-    #{if(&, '&', '*')} .e-content.e-month table,
-    #{if(&, '&', '*')} .e-content.e-year table,
-    #{if(&, '&', '*')} .e-content.e-decade table {
+    & .e-content.e-month table,
+    & .e-content.e-year table,
+    & .e-content.e-decade table {
       @if $skin-name == 'tailwind' {
         padding: $calendar-small-table-padding;
       }
     }
 
-    #{if(&, '&', '*')}.e-rtl .e-header .e-title {
+    &.e-rtl .e-header .e-title {
       @if $skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3' {
         text-indent: $calendar-rtl-text-indent;
       }
     }
 
-    #{if(&, '&', '*')} .e-header .e-icon-container {
-      #{if(&, '&', '*')} .e-prev,
-      #{if(&, '&', '*')} .e-next {
+    & .e-header .e-icon-container {
+      & .e-prev,
+      & .e-next {
         height: $calendar-small-icon-size;
         width: $calendar-small-icon-size;
       }
 
-      #{if(&, '&', '*')} .e-prev {
+      & .e-prev {
         @if $skin-name == 'tailwind' {
           margin: $calendar-small-down-icon-margin;
         }
       }
     }
 
-    #{if(&, '&', '*')} th {
+    & th {
       font-size: $calendar-small-font-size;
       height: $calendar-small-day-header-height;
     }
 
-    #{if(&, '&', '*')} .e-header .e-title {
+    & .e-header .e-title {
       @if $skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3' {
         margin-left: $calendar-title-margin-small-left-style;
       }
     }
 
-    #{if(&, '&', '*')} .e-content.e-year td > span.e-day,
-    #{if(&, '&', '*')} .e-content.e-decade td > span.e-day {
+    & .e-content.e-year td > span.e-day,
+    & .e-content.e-decade td > span.e-day {
       @if $skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3' {
         width: $calendar-small-year-decade-width;
       }
     }
 
-    #{if(&, '&', '*')} .e-content.e-year td > span.e-day,
-    #{if(&, '&', '*')} .e-content.e-decade td > span.e-day {
+    & .e-content.e-year td > span.e-day,
+    & .e-content.e-decade td > span.e-day {
       @if $skin-name == 'tailwind' {
         height: $calendar-small-year-decade-height;
         line-height: $calendar-small-year-decade-height;
@@ -565,11 +565,11 @@
   }
 
   #{&}.e-calendar {
-    #{if(&, '&', '*')} .e-btn.e-today.e-flat.e-disabled,
-    #{if(&, '&', '*')} .e-btn.e-today.e-flat.e-disabled:hover,
-    #{if(&, '&', '*')} .e-btn.e-today.e-flat.e-disabled:active,
-    #{if(&, '&', '*')} .e-btn.e-today.e-flat.e-disabled:focus,
-    #{if(&, '&', '*')} .e-btn.e-today.e-flat.e-disabled:hover:active {
+    & .e-btn.e-today.e-flat.e-disabled,
+    & .e-btn.e-today.e-flat.e-disabled:hover,
+    & .e-btn.e-today.e-flat.e-disabled:active,
+    & .e-btn.e-today.e-flat.e-disabled:focus,
+    & .e-btn.e-today.e-flat.e-disabled:hover:active {
       background: $calendar-today-disabled-background-style;
       border-color: $calendar-today-disabled-border-style;
       box-shadow: $calendar-today-disabled-box-shadow;

package/styles/calendar/_material-dark-definition.scss

@@ -1,5 +1,4 @@
-@use 'ej2-base/styles/definition/material-dark' as *;
-@forward 'ej2-base/styles/definition/material-dark';
+@use '@syncfusion/ej2-base/styles/common/base-variables' as *;
 
 //default
 $calendar-title-hover-color: $grey-dark-font !default;

package/styles/calendar/_material-definition.scss

@@ -1,6 +1,5 @@
 @use 'sass:color';
-@use 'ej2-base/styles/definition/material' as *;
-@forward 'ej2-base/styles/definition/material';
+@use '@syncfusion/ej2-base/styles/common/base-variables' as *;
 
 /*! calendar material theme variables */
 $calendar-title-hover-color: rgba($grey-light-font, .75) !default;

package/styles/calendar/_material3-dark-definition.scss

@@ -1,5 +1,5 @@
-@use 'ej2-base/styles/definition/material3-dark' as *;
-@forward 'ej2-base/styles/definition/material3-dark';
+@use '@syncfusion/ej2-base/styles/common/base-variables' as *;
+
 $calendar-title-hover-color: rgba($content-text-color) !default;
 $calendar-icon-hover-color: rgba($icon-color) !default;
 $calendar-default-border-color: none !default;

package/styles/calendar/_material3-definition.scss

@@ -1,5 +1,5 @@
-@use 'ej2-base/styles/definition/material3' as *;
-@forward 'ej2-base/styles/definition/material3';
+@use '@syncfusion/ej2-base/styles/common/base-variables' as *;
+
 $calendar-title-hover-color: rgba($content-text-color) !default;
 $calendar-icon-hover-color: rgba($icon-color) !default;
 $calendar-default-border-color: none !default;

package/styles/calendar/_tailwind-dark-definition.scss

@@ -1,6 +1,5 @@
 @use 'sass:color';
-@use 'ej2-base/styles/definition/tailwind-dark' as *;
-@forward 'ej2-base/styles/definition/tailwind-dark';
+@use '@syncfusion/ej2-base/styles/common/base-variables' as *;
 
 /*! calendar tailwind theme variables */
 //month view

package/styles/calendar/_tailwind-definition.scss

@@ -1,6 +1,5 @@
 @use 'sass:color';
-@use 'ej2-base/styles/definition/tailwind' as *;
-@forward 'ej2-base/styles/definition/tailwind';
+@use '@syncfusion/ej2-base/styles/common/base-variables' as *;
 
 /*! calendar tailwind theme variables */
 //month view

package/styles/calendar/_tailwind3-definition.scss

@@ -1,5 +1,4 @@
-@use 'ej2-base/styles/definition/tailwind3' as *;
-@forward 'ej2-base/styles/definition/tailwind3';
+@use '@syncfusion/ej2-base/styles/common/base-variables' as *;
 
 /*! calendar bootstrap5 theme variables */
 //month view