@progress/kendo-theme-fluent 5.12.1-dev.0 → 5.12.1-dev.2

package/scss/button/_variables.scss

@@ -1,29 +1,28 @@
 @use "sass:color";
 @use "sass:map";
 @use "../core/" as *;
-@use "../core/color-system" as *;
 
 /// Width of the border around the button.
 /// @group button
-$kendo-button-border-width: map-get( $kendo-spacing, hair ) !default;
+$kendo-button-border-width: 1px !default;
 
 /// Horizontal padding of the button.
 /// @group button
-$kendo-button-padding-x-sm: map-get( $kendo-spacing, 5 ) !default;
-$kendo-button-padding-x-md: map-get( $kendo-spacing, 5 ) !default;
-$kendo-button-padding-x-lg: map-get( $kendo-spacing, 5 ) !default;
+$kendo-button-padding-x-sm: map.get( $kendo-spacing, 5 ) !default;
+$kendo-button-padding-x-md: map.get( $kendo-spacing, 5 ) !default;
+$kendo-button-padding-x-lg: map.get( $kendo-spacing, 5 ) !default;
 
 /// Vertical padding of the button.
 /// @group button
-$kendo-button-padding-y-sm: map-get( $kendo-spacing, 1  ) !default;
-$kendo-button-padding-y-md: map-get( $kendo-spacing, 2 ) - map-get( $kendo-spacing, thin ) !default;
-$kendo-button-padding-y-lg: map-get( $kendo-spacing, 2 ) !default;
+$kendo-button-padding-y-sm: map.get( $kendo-spacing, 1 ) !default;
+$kendo-button-padding-y-md: map.get( $kendo-spacing, 1.5 ) !default;
+$kendo-button-padding-y-lg: map.get( $kendo-spacing, 2 ) !default;
 
 /// Font sizes of the button.
 /// @group button
 $kendo-button-font-size-sm: var( --kendo-font-size, inherit ) !default;
-$kendo-button-font-size-md: var( --kendo-font-size, inherit) !default;
-$kendo-button-font-size-lg: var( --kendo-font-size, inherit) !default;
+$kendo-button-font-size-md: var( --kendo-font-size, inherit ) !default;
+$kendo-button-font-size-lg: var( --kendo-font-size, inherit ) !default;
 
 /// Line heights used along with $font-size.
 /// @group button
@@ -40,10 +39,16 @@ $kendo-button-font-weight: var( --kendo-font-weight-bold, normal ) !default;
 /// Calculated height of the button.
 /// @group button
 $kendo-button-calc-size: calc( ( #{$kendo-button-line-height-md} * 1em ) + ( #{$kendo-button-padding-y-md} * 2 ) + ( #{$kendo-button-border-width} * 2 ) ) !default;
+$kendo-button-calc-size-sm: calc( ( #{$kendo-button-line-height-sm} * 1em ) + ( #{$kendo-button-padding-y-sm} * 2 ) + ( #{$kendo-button-border-width} * 2 ) ) !default;
+$kendo-button-calc-size-md: calc( ( #{$kendo-button-line-height-md} * 1em ) + ( #{$kendo-button-padding-y-md} * 2 ) + ( #{$kendo-button-border-width} * 2 ) ) !default;
+$kendo-button-calc-size-lg: calc( ( #{$kendo-button-line-height-lg} * 1em ) + ( #{$kendo-button-padding-y-lg} * 2 ) + ( #{$kendo-button-border-width} * 2 ) ) !default;
 
 /// Calculated inner height of the button. Without the border width.
 /// @group button
 $kendo-button-inner-calc-size: calc( ( #{$kendo-button-line-height-md} * 1em ) + ( #{$kendo-button-padding-y-md} * 2 ) ) !default;
+$kendo-button-inner-calc-size-sm: calc( ( #{$kendo-button-line-height-sm} * 1em ) + ( #{$kendo-button-padding-y-sm} * 2 ) ) !default;
+$kendo-button-inner-calc-size-md: calc( ( #{$kendo-button-line-height-md} * 1em ) + ( #{$kendo-button-padding-y-md} * 2 ) ) !default;
+$kendo-button-inner-calc-size-lg: calc( ( #{$kendo-button-line-height-lg} * 1em ) + ( #{$kendo-button-padding-y-lg} * 2 ) ) !default;
 
 /// Sizes map for the button.
 /// @group button
@@ -70,31 +75,31 @@ $kendo-button-sizes: (
 
 /// Content spacing of the button.
 /// @group button
-$kendo-button-spacing: map-get( $kendo-spacing, 2 ) !default;
+$kendo-button-spacing: map.get( $kendo-spacing, 2 ) !default;
 
 /// Offset of the focused button.
 /// @group button
-$kendo-button-focus-offset: map-get( $kendo-spacing, thin ) !default;
+$kendo-button-focus-offset: map.get( $kendo-spacing, 0.5 ) !default; // sass-lint:disable-line leading-zero
 /// Outline width of the focused button.
 /// @group button
-$kendo-button-focus-outline-width: map-get( $kendo-spacing, hair ) !default;
+$kendo-button-focus-outline-width: 1px !default;
 /// Outline style of the focused button.
 /// @group button
 $kendo-button-focus-outline-style: solid !default;
 
 /// Offset of the flat focused button.
 /// @group button
-$kendo-button-flat-focus-offset: map-get( $kendo-spacing, hair ) !default;
+$kendo-button-flat-focus-offset: 1px !default;
 /// Outline width of the flat focused button.
 /// @group button
-$kendo-button-flat-focus-outline-width: map-get( $kendo-spacing, thin ) !default;
+$kendo-button-flat-focus-outline-width: map.get( $kendo-spacing, 0.5 ) !default; // sass-lint:disable-line leading-zero
 
 /// Offset of the link focused button.
 /// @group button
 $kendo-button-link-focus-offset: 0 !default;
 /// Outline width of the flat focused button.
 /// @group button
-$kendo-button-link-focus-outline-width: map-get( $kendo-spacing, hair ) !default;
+$kendo-button-link-focus-outline-width: 1px !default;
 
 // Theme variations for the button.
 
@@ -113,9 +118,9 @@ $kendo-button-brand-colors: (
 // Color matrix for the base button
 $_tc-base-matrix: (
     solid: (
-        normal: ($white, 160, 110),
+        normal: ($kendo-color-white, 160, 110),
         hover: (20, 190, 110),
-        focus: ($white, 160, 110, 130),
+        focus: ($kendo-color-white, 160, 110, 130),
         focus-hover: (20, 190, 110, 130),
         active: (30, 190, 110),
         active-hover: (20, 190, 110),
@@ -123,10 +128,10 @@ $_tc-base-matrix: (
     ),
     outline: (
         normal: (transparent, 160, currentColor),
-        hover: (190, $white, 190),
+        hover: (190, $kendo-color-white, 190),
         focus: (transparent, 160, currentColor, inherit),
-        focus-hover: (190, $white, 190, inherit),
-        active: (190, $white, 190),
+        focus-hover: (190, $kendo-color-white, 190, inherit),
+        active: (190, $kendo-color-white, 190),
         active-hover: (20, 190, 110),
         disabled: (initial, var( --kendo-disabled-text, inherit ), 90)
     ),
@@ -148,17 +153,17 @@ $_tc-base-matrix: (
         active-hover: (transparent, 190, transparent),
         disabled: (initial, var( --kendo-disabled-text, inherit ), transparent)
     )
-);
+) !default;
 
 // Color matrix for primary, error, success, info, secondary, tertiary buttons
 $_tc-brand-matrix: (
     solid: (
-        normal: (100, $white, 100),
-        hover: (110, $white, 110),
-        focus: (100, $white, 100, inherit),
-        focus-hover: (110, $white, 110, inherit),
-        active: (120, $white, 120),
-        active-hover: (110, $white, 110),
+        normal: (100, $kendo-color-white, 100),
+        hover: (110, $kendo-color-white, 110),
+        focus: (100, $kendo-color-white, 100, inherit),
+        focus-hover: (110, $kendo-color-white, 110, inherit),
+        active: (120, $kendo-color-white, 120),
+        active-hover: (110, $kendo-color-white, 110),
         disabled: (var( --kendo-disabled-bg, inherit ), var( --kendo-disabled-text, inherit ), var( --kendo-disabled-border, inherit ))
     ),
     flat: (
@@ -172,11 +177,11 @@ $_tc-brand-matrix: (
     ),
     outline: (
         normal: (transparent, 100, currentColor),
-        hover: (100, $white, 100),
+        hover: (100, $kendo-color-white, 100),
         focus: (transparent, 100, 100, inherit),
-        focus-hover: (100, $white, 100, inherit),
-        active: (100, $white, 100),
-        active-hover: (100, $white, 100),
+        focus-hover: (100, $kendo-color-white, 100, inherit),
+        active: (100, $kendo-color-white, 100),
+        active-hover: (100, $kendo-color-white, 100),
         disabled: (initial, var( --kendo-disabled-text, inherit ), var( --kendo-disabled-text, inherit ))
     ),
     link: (
@@ -197,15 +202,15 @@ $_tc-brand-matrix: (
         active-hover: (transparent, 110, transparent),
         disabled: (initial, var( --kendo-disabled-text, inherit ), transparent)
     )
-);
+) !default;
 
 // Color matrix for warning buttons
 $_tc-warning-matrix: (
     solid: (
         normal: (100, get-theme-color-var( neutral-160 ), 100),
         hover: (110, get-theme-color-var( neutral-190 ), 110),
-        focus: (100, get-theme-color-var( neutral-160 ), 100, $white),
-        focus-hover: (110, get-theme-color-var( neutral-190 ), 110, $white),
+        focus: (100, get-theme-color-var( neutral-160 ), 100, $kendo-color-white),
+        focus-hover: (110, get-theme-color-var( neutral-190 ), 110, $kendo-color-white),
         active: (120, get-theme-color-var( neutral-190 ), 120),
         active-hover: (110, get-theme-color-var( neutral-190 ), 110),
         disabled: (var( --kendo-disabled-bg, inherit ), var( --kendo-disabled-text, inherit ), var( --kendo-disabled-border, inherit ))
@@ -221,11 +226,11 @@ $_tc-warning-matrix: (
     ),
     outline: (
         normal: (transparent, 100, currentColor),
-        hover: (100, $black, 100),
+        hover: (100, $kendo-color-black, 100),
         focus: (transparent, 100, 100, inherit),
-        focus-hover: (100, $black, 100, inherit),
-        active: (100, $black, 100),
-        active-hover: (100, $black, 100),
+        focus-hover: (100, $kendo-color-black, 100, inherit),
+        active: (100, $kendo-color-black, 100),
+        active-hover: (100, $kendo-color-black, 100),
         disabled: (initial, var( --kendo-disabled-text, inherit ), var( --kendo-disabled-text, inherit ))
     ),
     link: (
@@ -246,17 +251,17 @@ $_tc-warning-matrix: (
         active-hover: (transparent, 110, transparent),
         disabled: (initial, var( --kendo-disabled-text, inherit ), transparent)
     )
-);
+) !default;
 
 // Color matrix for dark buttons
 $_tc-dark-matrix: (
     solid: (
-        normal: (160, $white, 160),
-        hover: (170, $white, 170),
-        focus: (160, $white, 160, $white),
-        focus-hover: (170, $white, 170, $white),
-        active: (180, $white, 180),
-        active-hover: (170, $white, 170),
+        normal: (160, $kendo-color-white, 160),
+        hover: (170, $kendo-color-white, 170),
+        focus: (160, $kendo-color-white, 160, $kendo-color-white),
+        focus-hover: (170, $kendo-color-white, 170, $kendo-color-white),
+        active: (180, $kendo-color-white, 180),
+        active-hover: (170, $kendo-color-white, 170),
         disabled: (var( --kendo-disabled-bg, inherit ), var( --kendo-disabled-text, inherit ), var( --kendo-disabled-border, inherit ))
     ),
     flat: (
@@ -270,11 +275,11 @@ $_tc-dark-matrix: (
     ),
     outline: (
         normal: (transparent, 160, currentColor),
-        hover: (160, $white, 160),
+        hover: (160, $kendo-color-white, 160),
         focus: (transparent, 160, 160, inherit),
-        focus-hover: (160, $white, 160, inherit),
-        active: (160, $white, 160),
-        active-hover: (160, $white, 160),
+        focus-hover: (160, $kendo-color-white, 160, inherit),
+        active: (160, $kendo-color-white, 160),
+        active-hover: (160, $kendo-color-white, 160),
         disabled: (initial, var( --kendo-disabled-text, inherit ), var( --kendo-disabled-text, inherit ))
     ),
     link: (
@@ -295,15 +300,15 @@ $_tc-dark-matrix: (
         active-hover: (transparent, 170, transparent),
         disabled: (initial, var( --kendo-disabled-text, inherit ), transparent)
     )
-);
+) !default;
 
 // Color matrix for light buttons
 $_tc-light-matrix: (
     solid: (
         normal: (50, 160, 50),
         hover: (60, 190, 60),
-        focus: (50, 160, 50, $white),
-        focus-hover: (60, 190, 60, $white),
+        focus: (50, 160, 50, $kendo-color-white),
+        focus-hover: (60, 190, 60, $kendo-color-white),
         active: (70, 190, 70),
         active-hover: (60, 190, 60),
         disabled: (var( --kendo-disabled-bg, inherit ), var( --kendo-disabled-text, inherit ), var( --kendo-disabled-border, inherit ))
@@ -319,11 +324,11 @@ $_tc-light-matrix: (
     ),
     outline: (
         normal: (transparent, 50, currentColor),
-        hover: (50, $white, 50),
+        hover: (50, $kendo-color-white, 50),
         focus: (transparent, 50, 50, inherit),
-        focus-hover: (50, $white, 50, inherit),
-        active: (50, $white, 50),
-        active-hover: (50, $white, 50),
+        focus-hover: (50, $kendo-color-white, 50, inherit),
+        active: (50, $kendo-color-white, 50),
+        active-hover: (50, $kendo-color-white, 50),
         disabled: (initial, var( --kendo-disabled-text, inherit ), var( --kendo-disabled-text, inherit ))
     ),
     link: (
@@ -344,10 +349,10 @@ $_tc-light-matrix: (
         active-hover: (transparent, 60, transparent),
         disabled: (initial, var( --kendo-disabled-text, inherit ), transparent)
     )
-);
+) !default;
 
 /// Theme colors map for the button.
-$kendo-button-theme-colors: ();
+$kendo-button-theme-colors: () !default;
 
 // Map for base theme color
 @each $fill-mode, $ui-states in $_tc-base-matrix {

package/scss/button/index.scss

@@ -8,9 +8,9 @@ $_kendo-module-meta: (
 
 
 // Component
-@forward "_variables.scss";
-@use "_layout.scss" as *;
-@use "_theme.scss" as *;
+@forward "./_variables.scss";
+@use "./_layout.scss" as *;
+@use "./_theme.scss" as *;
 
 // Register
 @use "../core/module-system/" as module;

package/scss/calendar/_layout.scss

@@ -1,6 +1,6 @@
-@use "../core/color-system" as *;
-@use "../core/mixins" as *;
-@use "_variables.scss" as *;
+@use "sass:map";
+@use "../core/" as *;
+@use "./_variables.scss" as *;
 
 @mixin kendo-calendar--layout() {
 
@@ -23,7 +23,7 @@
         flex-flow: column nowrap;
         user-select: none;
         -webkit-touch-callout: none;
-        -webkit-tap-highlight-color: $rgba-transparent;
+        -webkit-tap-highlight-color: $kendo-color-rgba-transparent;
 
 
         // Nested calendar
@@ -151,13 +151,6 @@
         .k-calendar-title {
             font-weight: bold;
         }
-        .k-today,
-        .k-nav-today,
-        .k-calendar-nav-today {
-            text-decoration: none;
-            cursor: pointer;
-            outline: none;
-        }
 
         .k-calendar-nav {
             display: flex;
@@ -465,12 +458,12 @@
 
     // Calendar sizes
     @each $size, $size-props in $kendo-calendar-sizes {
-        $_font-size: map-get( $size-props, font-size );
-        $_line-height: map-get( $size-props, line-height );
-        $_cell-size: map-get( $size-props, cell-size );
-        $_cell-padding-x: map-get( $size-props, cell-padding-x );
-        $_cell-padding-y: map-get( $size-props, cell-padding-y );
-        $_cell-font-size: map-get( $size-props, cell-font-size );
+        $_font-size: map.get( $size-props, font-size );
+        $_line-height: map.get( $size-props, line-height );
+        $_cell-size: map.get( $size-props, cell-size );
+        $_cell-padding-x: map.get( $size-props, cell-padding-x );
+        $_cell-padding-y: map.get( $size-props, cell-padding-y );
+        $_cell-font-size: map.get( $size-props, cell-font-size );
 
         $_month-cell-size: $_cell-size;
         $_year-cell-size: ( 2 * $_cell-size );
@@ -509,10 +502,6 @@
     .k-rtl .k-calendar,
     .k-calendar[dir="rtl"] {
 
-        .k-nav-prev,
-        .k-nav-next,
-        .k-prev-view,
-        .k-next-view,
         .k-calendar-nav-prev,
         .k-calendar-nav-next {
             transform: scaleX(-1);

package/scss/calendar/_theme.scss

@@ -1,6 +1,5 @@
-@use "../core/color-system" as *;
-@use "../core/mixins" as *;
-@use "_variables.scss" as *;
+@use "../core/" as *;
+@use "./_variables.scss" as *;
 
 @mixin kendo-calendar--theme() {
     .k-calendar {
@@ -19,25 +18,6 @@
             );
         }
 
-        // Today navigation
-        .k-nav-today,
-        .k-calendar-nav-today {
-            color: var( --kendo-calendar-today-nav-text, #{$kendo-calendar-today-nav-text});
-
-            &:hover,
-            &.k-hover,
-            &:focus,
-            &.k-focus {
-                color: var( --kendo-calendar-today-nav-hover-text, #{$kendo-calendar-today-nav-hover-text});
-            }
-
-            &.k-disabled {
-                @include disabled(
-                    $color: var( --kendo-disabled-text, inherit )
-                );
-            }
-        }
-
 
         // Header cells
         .k-calendar-th {
@@ -144,7 +124,7 @@
 
             li:hover,
             li.k-hover {
-                color: var( --kendo-calendar-today-nav-hover-text, #{$kendo-calendar-today-nav-hover-text} );
+                color: var( --kendo-calendar-navigation-hover-text, #{$kendo-calendar-navigation-hover-text} );
             }
         }
         .k-calendar-navigation-highlight {

package/scss/calendar/_variables.scss

@@ -1,5 +1,5 @@
-@use "../core/color-system" as *;
-@use "../core/_variables.scss" as *;
+@use "sass:map";
+@use "../core/" as *;
 
 /// Width of the border around the calendar.
 /// @group calendar
@@ -30,10 +30,10 @@ $kendo-calendar-border: var( --kendo-component-border, initial) !default;
 
 /// Horizontal padding of the calendar header.
 /// @group calendar
-$kendo-calendar-header-padding-x: map-get( $kendo-spacing, 3 ) !default;
+$kendo-calendar-header-padding-x: map.get( $kendo-spacing, 3 ) !default;
 /// Vertical padding of the calendar header.
 /// @group calendar
-$kendo-calendar-header-padding-y: map-get( $kendo-spacing, 3 ) map-get( $kendo-spacing, 1 ) !default;
+$kendo-calendar-header-padding-y: map.get( $kendo-spacing, 3 ) map.get( $kendo-spacing, 1 ) !default;
 /// Width of the bottom border of the calendar header.
 /// @group calendar
 $kendo-calendar-header-border-width: 1px !default;
@@ -41,38 +41,31 @@ $kendo-calendar-header-min-width: ($kendo-calendar-cell-size * 8) !default;
 
 /// Background color of the calendar header.
 /// @group calendar
-$kendo-calendar-header-bg: get-theme-color-var( neutral-10 ) !default; // $header-bg
+$kendo-calendar-header-bg: get-theme-color-var( neutral-10 ) !default; // $kendo-component-header-bg
 /// Text color of the calendar header.
 /// @group calendar
-$kendo-calendar-header-text: $kendo-calendar-text !default; // $header-text
+$kendo-calendar-header-text: $kendo-calendar-text !default; // $kendo-component-header-text
 /// Border color of the calendar header.
 /// @group calendar
-$kendo-calendar-header-border: $kendo-calendar-border !default; // $header-border
+$kendo-calendar-header-border: $kendo-calendar-border !default; // $kendo-component-header-border
 
 /// Spacing between the navigation buttons of the calendar.
 /// @group calendar
-$kendo-calendar-nav-gap: map-get( $kendo-spacing, 1 ) !default;
-
-/// Text color of the Today link in the calendar.
-/// @group calendar
-$kendo-calendar-today-nav-text: var( --kendo-link-text, initial ) !default;
-/// Text color of the Today link when hovered in the calendar.
-/// @group calendar
-$kendo-calendar-today-nav-hover-text: var( --kendo-link-hover-text, initial ) !default;
+$kendo-calendar-nav-gap: 0 !default;
 
 /// Horizontal padding of the calendar footer.
 /// @group calendar
-$kendo-calendar-footer-padding-x: map-get( $kendo-spacing, 3 ) !default;
+$kendo-calendar-footer-padding-x: map.get( $kendo-spacing, 3 ) !default;
 /// Vertical padding of the calendar footer.
 /// @group calendar
-$kendo-calendar-footer-padding-y: map-get( $kendo-spacing, 3 ) !default;
+$kendo-calendar-footer-padding-y: map.get( $kendo-spacing, 3 ) !default;
 
 /// Font size of the calendar cell.
 /// @group calendar
 $kendo-calendar-cell-font-size: var( --kendo-font-size-sm, inherit ) !default;
 /// Horizontal padding of the calendar cell.
 /// @group calendar
-$kendo-calendar-cell-padding-x: map-get( $kendo-spacing, 1 ) + map-get( $kendo-spacing, thin ) !default;
+$kendo-calendar-cell-padding-x: map.get( $kendo-spacing, 1.5 ) !default;
 /// Vertical padding of the calendar cell.
 /// @group calendar
 $kendo-calendar-cell-padding-y: $kendo-calendar-cell-padding-x !default;
@@ -110,10 +103,10 @@ $kendo-calendar-header-cell-text: inherit !default;
 
 /// Horizontal padding of the calendar captions.
 /// @group calendar
-$kendo-calendar-caption-padding-x: map-get( $kendo-spacing, 3 ) !default;
+$kendo-calendar-caption-padding-x: map.get( $kendo-spacing, 3 ) !default;
 /// Vertical padding of the calendar captions.
 /// @group calendar
-$kendo-calendar-caption-padding-y: map-get( $kendo-spacing, 1 ) !default;
+$kendo-calendar-caption-padding-y: map.get( $kendo-spacing, 1 ) !default;
 /// Height of the calendar captions.
 /// @group calendar
 $kendo-calendar-caption-height: $kendo-calendar-cell-size !default;
@@ -135,10 +128,10 @@ $kendo-calendar-view-height: ($kendo-calendar-cell-size * 7) !default;
 
 /// Bottom padding of calendar views.
 /// @group calendar
-$kendo-calendar-view-padding-block-end: map-get( $kendo-spacing, 3 ) !default;
+$kendo-calendar-view-padding-block-end: map.get( $kendo-spacing, 3 ) !default;
 /// Spacing between the views in the multiview calendar.
 /// @group calendar
-$kendo-calendar-view-gap: map-get( $kendo-spacing, 4 ) !default;
+$kendo-calendar-view-gap: map.get( $kendo-spacing, 4 ) !default;
 
 /// Background color of the calendar weekend cell.
 /// @group calendar
@@ -149,13 +142,13 @@ $kendo-calendar-weekend-text: inherit !default;
 
 /// Text color of the calendar today cell.
 /// @group calendar
-$kendo-calendar-today-text: $white !default; // use contrast function
+$kendo-calendar-today-text: $kendo-color-white !default; // use contrast function
 /// Background color of the calendar today cell.
 /// @group calendar
 $kendo-calendar-today-bg: get-theme-color-var( primary-100 ) !default;
 /// Text color of the calendar today cell when hovered.
 /// @group calendar
-$kendo-calendar-today-hover-text: $white !default;  // use contrast function
+$kendo-calendar-today-hover-text: $kendo-color-white !default;  // use contrast function
 /// Background color of the calendar today cell when hovered.
 /// @group calendar
 $kendo-calendar-today-hover-bg: get-theme-color-var( primary-120 ) !default;
@@ -237,18 +230,20 @@ $kendo-calendar-navigation-text: $kendo-calendar-header-text !default;
 /// @group calendar
 $kendo-calendar-navigation-border: $kendo-calendar-header-border !default;
 
+$kendo-calendar-navigation-hover-text: $kendo-link-hover-text !default;
+
 
 // Infinite calendar
 /// Background color of the navigation in the infinite calendar.
 /// @group calendar
-$kendo-infinite-calendar-header-padding-x: map-get( $kendo-spacing, 3 ) !default;
+$kendo-infinite-calendar-header-padding-x: map.get( $kendo-spacing, 3 ) !default;
 /// Background color of the navigation in the infinite calendar.
 /// @group calendar
-$kendo-infinite-calendar-header-padding-y: map-get( $kendo-spacing, 3 ) map-get( $kendo-spacing, 1 ) !default;
+$kendo-infinite-calendar-header-padding-y: map.get( $kendo-spacing, 3 ) map.get( $kendo-spacing, 1 ) !default;
 
 /// Horizontal padding of the infinite calendar.
 /// @group calendar
-$kendo-infinite-calendar-view-padding-x: map-get( $kendo-spacing, 3 ) !default;
+$kendo-infinite-calendar-view-padding-x: map.get( $kendo-spacing, 3 ) !default;
 /// Vertical padding of the infinite calendar.
 /// @group calendar
 $kendo-infinite-calendar-view-padding-y: 0px !default;
@@ -271,22 +266,22 @@ $kendo-calendar-range-border: get-theme-color-var( neutral-130 ) !default;
 $kendo-calendar-sm-font-size: $kendo-font-size-sm !default;
 $kendo-calendar-sm-line-height: $kendo-line-height-sm !default;
 $kendo-calendar-sm-cell-size: 24px !default;
-$kendo-calendar-sm-cell-padding-x: map-get( $kendo-spacing, thin) !default;
-$kendo-calendar-sm-cell-padding-y: map-get( $kendo-spacing, thin) !default;
+$kendo-calendar-sm-cell-padding-x: map.get( $kendo-spacing, 0.5 ) !default; // sass-lint:disable-line leading-zero
+$kendo-calendar-sm-cell-padding-y: map.get( $kendo-spacing, 0.5 ) !default; // sass-lint:disable-line leading-zero
 $kendo-calendar-sm-cell-font-size: $kendo-font-size-sm !default;
 
 $kendo-calendar-md-font-size: $kendo-font-size-md !default;
 $kendo-calendar-md-line-height: $kendo-line-height-md !default;
 $kendo-calendar-md-cell-size: 28px !default;
-$kendo-calendar-md-cell-padding-x: map-get( $kendo-spacing, 1 ) !default;
-$kendo-calendar-md-cell-padding-y: map-get( $kendo-spacing, 1 ) !default;
+$kendo-calendar-md-cell-padding-x: map.get( $kendo-spacing, 1 ) !default;
+$kendo-calendar-md-cell-padding-y: map.get( $kendo-spacing, 1 ) !default;
 $kendo-calendar-md-cell-font-size: $kendo-font-size-sm !default;
 
 $kendo-calendar-lg-font-size: $kendo-font-size-md !default;
 $kendo-calendar-lg-line-height: $kendo-line-height-md !default;
 $kendo-calendar-lg-cell-size: 32px !default;
-$kendo-calendar-lg-cell-padding-x: map-get( $kendo-spacing, 1 ) !default;
-$kendo-calendar-lg-cell-padding-y: map-get( $kendo-spacing, 1 ) !default;
+$kendo-calendar-lg-cell-padding-x: map.get( $kendo-spacing, 1 ) !default;
+$kendo-calendar-lg-cell-padding-y: map.get( $kendo-spacing, 1 ) !default;
 $kendo-calendar-lg-cell-font-size: $kendo-font-size-md !default;
 
 $kendo-calendar-sizes: (

package/scss/calendar/index.scss

@@ -8,9 +8,9 @@ $_kendo-module-meta: (
 
 
 // Component
-@forward "_variables.scss";
-@use "_layout.scss" as *;
-@use "_theme.scss" as *;
+@forward "./_variables.scss";
+@use "./_layout.scss" as *;
+@use "./_theme.scss" as *;
 
 // Register
 @use "../core/module-system/" as module;

package/scss/captcha/_layout.scss

@@ -1,4 +1,4 @@
-@use "_variables.scss" as *;
+@use "./_variables.scss" as *;
 
 @mixin kendo-captcha--layout() {
 

package/scss/captcha/_theme.scss

@@ -1,5 +1,5 @@
-@use "../core/mixins" as *;
-@use "_variables.scss" as *;
+@use "../core/" as *;
+@use "./_variables.scss" as *;
 
 @mixin kendo-captcha--theme() {
 

package/scss/captcha/_variables.scss

@@ -1,10 +1,10 @@
+@use "sass:map";
 @use "sass:math";
-@use "../core/color-system" as *;
-@use "../core/_variables.scss" as *;
+@use "../core/" as *;
 
 /// Spacer of the captcha.
 /// @group captcha
-$kendo-captcha-spacer: map-get( $kendo-spacing, 2 ) !default;
+$kendo-captcha-spacer: map.get( $kendo-spacing, 2 ) !default;
 
 /// Default width of the captcha.
 /// @group captcha

package/scss/captcha/index.scss

@@ -12,9 +12,9 @@ $_kendo-module-meta: (
 
 
 // Component
-@forward "_variables.scss";
-@use "_layout.scss" as *;
-@use "_theme.scss" as *;
+@forward "./_variables.scss";
+@use "./_layout.scss" as *;
+@use "./_theme.scss" as *;
 
 // Register
 @use "../core/module-system/" as module;

package/scss/card/_layout.scss

@@ -1,8 +1,6 @@
-@use "_variables.scss" as *;
-@use "../core/variables" as *;
-@use "../core/mixins" as *;
-@use "../core/color-system" as *;
+@use "../core/" as *;
 @use "../typography/variables.scss" as *;
+@use "./_variables.scss" as *;
 
 @mixin kendo-card--layout() {
 
@@ -31,7 +29,7 @@
         position: relative;
         overflow: hidden;
         -webkit-touch-callout: none;
-        -webkit-tap-highlight-color: $rgba-transparent;
+        -webkit-tap-highlight-color: $kendo-color-rgba-transparent;
 
         *,
         *::before,

package/scss/card/_theme.scss

@@ -1,5 +1,6 @@
-@use "_variables.scss" as *;
-@use "../core/mixins" as *;
+@use "sass:map";
+@use "../core/" as *;
+@use "./_variables.scss" as *;
 
 @mixin kendo-card--theme() {
 
@@ -77,9 +78,9 @@
     // Card theme colors
     @each $theme-color, $color-props in $kendo-card-theme-colors {
 
-        $_text-color: map-get( $color-props, text );
-        $_bg: map-get( $color-props, bg );
-        $_border-color: map-get( $color-props, border );
+        $_text-color: map.get( $color-props, text );
+        $_bg: map.get( $color-props, bg );
+        $_border-color: map.get( $color-props, border );
 
         .k-card-#{$theme-color} {
             --kendo-card-text: var( --kendo-card-#{$theme-color}-text, #{$_text-color} );