@progress/kendo-theme-fluent 6.5.0-dev.1 → 6.5.0-dev.2

package/lib/swatches/all.json

@@ -3,7 +3,7 @@
     "name": "All",
     "product": "kendo",
     "base": "@progress/kendo-theme-fluent",
-    "version": "6.5.0-dev.1",
+    "version": "6.5.0-dev.2",
     "api": "modern",
     "previewColors": [
         "#ffffff",

package/lib/swatches/fluent-main.json

@@ -3,7 +3,7 @@
     "name": "Fluent Main",
     "product": "kendo",
     "base": "@progress/kendo-theme-fluent",
-    "version": "6.5.0-dev.1",
+    "version": "6.5.0-dev.2",
     "api": "modern",
     "previewColors": [
         "#ffffff",

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@progress/kendo-theme-fluent",
   "description": "A css variables based theme for Kendo UI that follows the Fluent design system guidelines.",
-  "version": "6.5.0-dev.1",
+  "version": "6.5.0-dev.2",
   "author": "Progress",
   "license": "Apache-2.0",
   "keywords": [
@@ -52,8 +52,8 @@
   },
   "dependencies": {
     "@progress/kendo-font-icons": "1.5.0",
-    "@progress/kendo-theme-core": "6.5.0-dev.1",
-    "@progress/kendo-theme-utils": "6.5.0-dev.1"
+    "@progress/kendo-theme-core": "6.5.0-dev.2",
+    "@progress/kendo-theme-utils": "6.5.0-dev.2"
   },
-  "gitHead": "6669ee878325bbdc367a4efc94ce2315e2b680e5"
+  "gitHead": "a2917c47e4830e54fac051c80e5ae9d26f894fa7"
 }

package/scss/action-sheet/_layout.scss

@@ -260,6 +260,7 @@
     .k-adaptive-actionsheet {
         max-width: 100%;
         width: 100%;
+        font-size: $kendo-adaptive-actionsheet-font-size;
 
         // TMP: this should be moved to action sheet
         display: flex;
@@ -299,6 +300,12 @@
             padding-inline: 0;
         }
 
+        .k-menu-group {
+            height: 100%;
+            overflow: auto;
+            position: static;
+        }
+
         .k-calendar {
             margin-inline: auto;
             border-width: 0;

package/scss/action-sheet/_variables.scss

@@ -114,7 +114,7 @@ $kendo-actionsheet-item-spacing: map.get( $kendo-spacing, 2 ) !default;
 
 /// Color of the action sheet item icon.
 /// @group action-sheet
-$kendo-actionsheet-item-icon-color: get-theme-color-var( primary-110 ) !default;
+$kendo-actionsheet-item-icon-color: k-get-theme-color-var( primary-110 ) !default;
 
 /// Font weight of the action sheet item text.
 /// @group action-sheet
@@ -179,6 +179,9 @@ $kendo-actionsheet-item-disabled-border: var( --kendo-disabled-border, inherit )
 
 // Adaptive Actionsheet
 
+/// Font size of the adaptive action sheet.
+$kendo-adaptive-actionsheet-font-size: $kendo-font-size-lg !default;
+
 /// Border width of the adaptive action sheet titlebar.
 /// @group action-sheet
 $kendo-adaptive-actionsheet-header-border-width: 1px !default;

package/scss/adaptive/_variables.scss

@@ -9,10 +9,10 @@ $kendo-adaptive-border: var( --kendo-component-border, inherit ) !default;
 $kendo-adaptive-content-bg: var( --kendo-component-bg, inherit ) !default;
 $kendo-adaptive-content-text: var( --kendo-component-text, inherit ) !default;
 
-$kendo-adaptive-menu-bg: get-theme-color-var( primary-100 ) !default;
+$kendo-adaptive-menu-bg: k-get-theme-color-var( primary-100 ) !default;
 $kendo-adaptive-menu-text: $kendo-color-white !default;
 
-$kendo-adaptive-menu-clear-text: get-theme-color-var( primary-100 ) !default;
+$kendo-adaptive-menu-clear-text: k-get-theme-color-var( primary-100 ) !default;
 
 $kendo-adaptive-menu-item-border: var( --kendo-component-border, inherit ) !default;
 $kendo-adaptive-menu-title-text: var( --kendo-component-text, inherit ) !default;
@@ -24,10 +24,10 @@ $kendo-adaptive-line-height: var( --kendo-line-height, normal ) !default;
 
 
 // Adaptive Grid
-$kendo-adaptive-grid-sort-text: get-theme-color-var( primary-100 ) !default;
+$kendo-adaptive-grid-sort-text: k-get-theme-color-var( primary-100 ) !default;
 
 
 // Adaptive Scheduler
-$kendo-adaptive-scheduler-current-text: get-theme-color-var( primary-100 ) !default;
+$kendo-adaptive-scheduler-current-text: k-get-theme-color-var( primary-100 ) !default;
 $kendo-adaptive-scheduler-base-text: inherit !default;
 $kendo-adaptive-scheduler-subtle-text: var( --kendo-subtle-text, inherit ) !default;

package/scss/appbar/_variables.scss

@@ -38,7 +38,7 @@ $kendo-appbar-spacing: map.get( $kendo-spacing, 2 ) !default;
 $kendo-appbar-text: var( --kendo-component-text, initial ) !default;
 /// The background color of the AppBar.
 /// @group appbar
-$kendo-appbar-bg: get-theme-color-var( neutral-10 ) !default;
+$kendo-appbar-bg: k-get-theme-color-var( neutral-10 ) !default;
 /// The border color of the AppBar.
 /// @group appbar
 $kendo-appbar-border: var( --kendo-component-border, initial ) !default;
@@ -60,7 +60,7 @@ $_tc-appbar-matrix: (
 ) !default;
 
 $_tc-appbar-warning-matrix: (
-    (normal: (100, get-theme-color-var( neutral-160 ), 100)),
+    (normal: (100, k-get-theme-color-var( neutral-160 ), 100)),
 ) !default;
 
 $_tc-appbar-dark-matrix: (
@@ -79,7 +79,7 @@ $kendo-appbar-theme-colors: () !default;
     @each $brand-color, $palette in $kendo-appbar-brand-colors {
         $kendo-appbar-theme-colors: map.deep-merge(
             $kendo-appbar-theme-colors,
-            generate-theme-variation( $brand-color, $palette, $ui-states )
+            k-generate-theme-variation( $brand-color, $palette, $ui-states )
         );
     };
 }
@@ -87,20 +87,20 @@ $kendo-appbar-theme-colors: () !default;
 @each $ui-states in $_tc-appbar-warning-matrix {
     $kendo-appbar-theme-colors: map.deep-merge(
         $kendo-appbar-theme-colors,
-        generate-theme-variation( warning, warning, $ui-states )
+        k-generate-theme-variation( warning, warning, $ui-states )
     );
 }
 
 @each $ui-states in $_tc-appbar-dark-matrix {
     $kendo-appbar-theme-colors: map.deep-merge(
         $kendo-appbar-theme-colors,
-        generate-theme-variation( dark, neutral, $ui-states )
+        k-generate-theme-variation( dark, neutral, $ui-states )
     );
 }
 
 @each $ui-states in $_tc-appbar-light-matrix {
     $kendo-appbar-theme-colors: map.deep-merge(
         $kendo-appbar-theme-colors,
-        generate-theme-variation( light, neutral, $ui-states )
+        k-generate-theme-variation( light, neutral, $ui-states )
     );
 }

package/scss/avatar/_variables.scss

@@ -46,7 +46,7 @@ $_tc-avatar-matrix: (
 
 $_tc-avatar-warning-matrix: (
     solid: (
-        normal: (100, get-theme-color-var( neutral-160 ), 100)
+        normal: (100, k-get-theme-color-var( neutral-160 ), 100)
     ),
     outline: (
         normal: ($kendo-color-white, 100, 100)
@@ -79,7 +79,7 @@ $kendo-avatar-theme-colors: () !default;
     @each $brand-color, $palette in $kendo-avatar-brand-colors {
         $kendo-avatar-theme-colors: map.deep-merge(
             $kendo-avatar-theme-colors,
-            generate-fill-mode-theme-variation( $fill-mode, $brand-color, $palette, $ui-states )
+            k-generate-fill-mode-theme-variation( $fill-mode, $brand-color, $palette, $ui-states )
         );
     };
 }
@@ -87,20 +87,20 @@ $kendo-avatar-theme-colors: () !default;
 @each $fill-mode, $ui-states in $_tc-avatar-warning-matrix {
     $kendo-avatar-theme-colors: map.deep-merge(
         $kendo-avatar-theme-colors,
-        generate-fill-mode-theme-variation( $fill-mode, warning, warning, $ui-states )
+        k-generate-fill-mode-theme-variation( $fill-mode, warning, warning, $ui-states )
     );
 }
 
 @each $fill-mode, $ui-states in $_tc-avatar-dark-matrix {
     $kendo-avatar-theme-colors: map.deep-merge(
         $kendo-avatar-theme-colors,
-        generate-fill-mode-theme-variation( $fill-mode, dark, neutral, $ui-states )
+        k-generate-fill-mode-theme-variation( $fill-mode, dark, neutral, $ui-states )
     );
 }
 
 @each $fill-mode, $ui-states in $_tc-avatar-light-matrix {
     $kendo-avatar-theme-colors: map.deep-merge(
         $kendo-avatar-theme-colors,
-        generate-fill-mode-theme-variation( $fill-mode, light, neutral, $ui-states )
+        k-generate-fill-mode-theme-variation( $fill-mode, light, neutral, $ui-states )
     );
 }

package/scss/badge/_variables.scss

@@ -120,7 +120,7 @@ $_tc-badge-matrix: (
 
 $_tc-badge-warning-matrix: (
     solid: (
-        normal: (100, get-theme-color-var( neutral-160 ), 100)
+        normal: (100, k-get-theme-color-var( neutral-160 ), 100)
     ),
     outline: (
         normal: ($kendo-color-white, 100, 100)
@@ -153,7 +153,7 @@ $kendo-badge-theme-colors: () !default;
     @each $brand-color, $palette in $kendo-badge-brand-colors {
         $kendo-badge-theme-colors: map.deep-merge(
             $kendo-badge-theme-colors,
-            generate-fill-mode-theme-variation( $fill-mode, $brand-color, $palette, $ui-states )
+            k-generate-fill-mode-theme-variation( $fill-mode, $brand-color, $palette, $ui-states )
         );
     };
 }
@@ -161,20 +161,20 @@ $kendo-badge-theme-colors: () !default;
 @each $fill-mode, $ui-states in $_tc-badge-warning-matrix {
     $kendo-badge-theme-colors: map.deep-merge(
         $kendo-badge-theme-colors,
-        generate-fill-mode-theme-variation( $fill-mode, warning, warning, $ui-states )
+        k-generate-fill-mode-theme-variation( $fill-mode, warning, warning, $ui-states )
     );
 }
 
 @each $fill-mode, $ui-states in $_tc-badge-dark-matrix {
     $kendo-badge-theme-colors: map.deep-merge(
         $kendo-badge-theme-colors,
-        generate-fill-mode-theme-variation( $fill-mode, dark, neutral, $ui-states )
+        k-generate-fill-mode-theme-variation( $fill-mode, dark, neutral, $ui-states )
     );
 }
 
 @each $fill-mode, $ui-states in $_tc-badge-light-matrix {
     $kendo-badge-theme-colors: map.deep-merge(
         $kendo-badge-theme-colors,
-        generate-fill-mode-theme-variation( $fill-mode, light, neutral, $ui-states )
+        k-generate-fill-mode-theme-variation( $fill-mode, light, neutral, $ui-states )
     );
 }

package/scss/bottom-navigation/_variables.scss

@@ -43,7 +43,7 @@ $kendo-bottom-nav-item-max-width: none !default;
 $kendo-bottom-nav-item-min-height: calc( var( --kendo-icon-size, 1.5rem ) * 2 + (#{$kendo-bottom-nav-item-padding-y} * 2) ) !default;
 /// The border radius of the BottomNavigation item.
 /// @group bottom-navigation
-$kendo-bottom-nav-item-border-radius: var( --kendo-border-radius-md, 0 ) !default;
+$kendo-bottom-nav-item-border-radius: var( --kendo-border-radius-md, #{$kendo-border-radius-md} ) !default;
 /// The spacing of the BottomNavigation item.
 /// @group bottom-navigation
 $kendo-bottom-nav-item-gap: map.get( $kendo-spacing, 1 ) !default;
@@ -82,7 +82,7 @@ $_tc-bottom-nav-matrix: (
         disabled: ( inherit, 40, var( --kendo-disabled-border, inherit ))
     ),
     flat: (
-        normal: ($kendo-color-white, get-theme-color-var( neutral-130 ), get-theme-color-var( neutral-30 )),
+        normal: ($kendo-color-white, k-get-theme-color-var( neutral-130 ), k-get-theme-color-var( neutral-30 )),
         focus: (inherit, 100, transparent, 100),
         active: (inherit, 100, transparent),
         disabled: (initial, var( --kendo-disabled-text, inherit ), initial)
@@ -91,13 +91,13 @@ $_tc-bottom-nav-matrix: (
 
 $_tc-bottom-nav-warning-matrix: (
     solid: (
-        normal: (100, get-theme-color-var( neutral-160 ), 100),
-        focus: (100, get-theme-color-var( neutral-160 ), 100, $kendo-color-white),
-        active: (120, get-theme-color-var( neutral-190 ), 120),
-        disabled: (inherit, get-theme-color-var( neutral-120 ), var( --kendo-disabled-border, inherit ))
+        normal: (100, k-get-theme-color-var( neutral-160 ), 100),
+        focus: (100, k-get-theme-color-var( neutral-160 ), 100, $kendo-color-white),
+        active: (120, k-get-theme-color-var( neutral-190 ), 120),
+        disabled: (inherit, k-get-theme-color-var( neutral-120 ), var( --kendo-disabled-border, inherit ))
     ),
     flat: (
-        normal: ($kendo-color-white, get-theme-color-var( neutral-130 ), 100),
+        normal: ($kendo-color-white, k-get-theme-color-var( neutral-130 ), 100),
         focus: (inherit, 100, transparent, 100),
         active: (inherit, 100, transparent),
         disabled: (initial, var( --kendo-disabled-text, inherit ), initial)
@@ -112,7 +112,7 @@ $_tc-bottom-nav-dark-matrix: (
         disabled: (inherit, 60 , var( --kendo-disabled-border, inherit ))
     ),
     flat: (
-        normal: ($kendo-color-white, get-theme-color-var( neutral-130 ), get-theme-color-var( neutral-140 )),
+        normal: ($kendo-color-white, k-get-theme-color-var( neutral-130 ), k-get-theme-color-var( neutral-140 )),
         focus: (inherit, 160, transparent, 130),
         active: (inherit, 170, transparent),
         disabled: (inherit, var( --kendo-disabled-text, inherit ), initial)
@@ -121,13 +121,13 @@ $_tc-bottom-nav-dark-matrix: (
 
 $_tc-bottom-nav-light-matrix: (
     solid: (
-        normal: (50, get-theme-color-var( neutral-160 ), 50),
+        normal: (50, k-get-theme-color-var( neutral-160 ), 50),
         focus: (50, 190, 50, $kendo-color-white),
         active: (70, 190, 70),
         disabled: (inherit, 120 , var( --kendo-disabled-border, inherit ))
     ),
     flat: (
-        normal: ($kendo-color-white, get-theme-color-var( neutral-130 ), transparent),
+        normal: ($kendo-color-white, k-get-theme-color-var( neutral-130 ), transparent),
         focus: (inherit, 130, transparent, 130),
         active: (inherit, 130, transparent),
         disabled: (inherit, var( --kendo-disabled-text, inherit ), initial)
@@ -142,7 +142,7 @@ $kendo-bottom-nav-theme-colors: () !default;
     @each $brand-color, $palette in $kendo-bottom-nav-brand-colors {
         $kendo-bottom-nav-theme-colors: map.deep-merge(
             $kendo-bottom-nav-theme-colors,
-            generate-fill-mode-theme-variation( $fill-mode, $brand-color, $palette, $ui-states )
+            k-generate-fill-mode-theme-variation( $fill-mode, $brand-color, $palette, $ui-states )
         );
     };
 }
@@ -150,20 +150,20 @@ $kendo-bottom-nav-theme-colors: () !default;
 @each $fill-mode, $ui-states in $_tc-bottom-nav-warning-matrix {
     $kendo-bottom-nav-theme-colors: map.deep-merge(
         $kendo-bottom-nav-theme-colors,
-        generate-fill-mode-theme-variation( $fill-mode, warning, warning, $ui-states )
+        k-generate-fill-mode-theme-variation( $fill-mode, warning, warning, $ui-states )
     );
 }
 
 @each $fill-mode, $ui-states in $_tc-bottom-nav-dark-matrix {
     $kendo-bottom-nav-theme-colors: map.deep-merge(
         $kendo-bottom-nav-theme-colors,
-        generate-fill-mode-theme-variation( $fill-mode, dark, neutral, $ui-states )
+        k-generate-fill-mode-theme-variation( $fill-mode, dark, neutral, $ui-states )
     );
 }
 
 @each $fill-mode, $ui-states in $_tc-bottom-nav-light-matrix {
     $kendo-bottom-nav-theme-colors: map.deep-merge(
         $kendo-bottom-nav-theme-colors,
-        generate-fill-mode-theme-variation( $fill-mode, light, neutral, $ui-states )
+        k-generate-fill-mode-theme-variation( $fill-mode, light, neutral, $ui-states )
     );
 }

package/scss/breadcrumb/_variables.scss

@@ -54,13 +54,13 @@ $kendo-breadcrumb-lg-line-height: var( --kendo-line-height, normal ) !default;
 $kendo-breadcrumb-bg: var( --kendo-component-bg, initial ) !default;
 /// The text color of the Breadcrumb
 /// @group breadcrumb
-$kendo-breadcrumb-text: get-theme-color-var( neutral-130 ) !default;
-/// The border color of the Breadcrumb
+$kendo-breadcrumb-text: k-get-theme-color-var( neutral-130 ) !default;
+/// The border color of the breadcrumb
 /// @group breadcrumb
 $kendo-breadcrumb-border: transparent !default;
 /// The box shadow of the focused breadcrumb
 /// @group breadcrumb
-$kendo-breadcrumb-focus-shadow: 0 0 0 1px get-theme-color-var( neutral-30 ) !default;
+$kendo-breadcrumb-focus-shadow: 0 0 0 1px k-get-theme-color-var( neutral-30 ) !default;
 
 /// The horizontal padding of the Breadcrumb link
 /// @group breadcrumb
@@ -99,8 +99,8 @@ $kendo-breadcrumb-link-initial-text: inherit !default;
 $kendo-breadcrumb-link-bg: transparent !default;
 /// The text color of the Breadcrumb link
 /// @group breadcrumb
-$kendo-breadcrumb-link-text: get-theme-color-var( neutral-130 ) !default;
-/// The borer color of the Breadcrumb link
+$kendo-breadcrumb-link-text: k-get-theme-color-var( neutral-130 ) !default;
+/// The borer color of the breadcrumb link
 /// @group breadcrumb
 $kendo-breadcrumb-link-border: transparent !default;
 /// The background color of the hovered breadcrumb link
@@ -108,7 +108,7 @@ $kendo-breadcrumb-link-border: transparent !default;
 $kendo-breadcrumb-link-hover-bg: var( --kendo-hover-bg, initial ) !default;
 /// The text color of the hovered breadcrumb link
 /// @group breadcrumb
-$kendo-breadcrumb-link-hover-text: get-theme-color-var( neutral-160 ) !default;
+$kendo-breadcrumb-link-hover-text: k-get-theme-color-var( neutral-160 ) !default;
 /// The border color of the hovered breadcrumb link
 /// @group breadcrumb
 $kendo-breadcrumb-link-hover-border: var( --kendo-hover-border, initial ) !default;
@@ -120,17 +120,17 @@ $kendo-breadcrumb-link-active-bg: var( --kendo-selected-bg, initial ) !default;
 $kendo-breadcrumb-link-active-text: var( --kendo-selected-text, initial ) !default;
 /// The border color of the active breadcrumb link
 /// @group breadcrumb
-$kendo-breadcrumb-link-active-border: get-theme-color-var( neutral-30 ) !default;
+$kendo-breadcrumb-link-active-border: k-get-theme-color-var( neutral-30 ) !default;
 /// The background color of the focused breadcrumb link
 /// @group breadcrumb
 $kendo-breadcrumb-link-focus-bg: transparent !default;
 /// The text color of the focused breadcrumb link
 /// @group breadcrumb
-$kendo-breadcrumb-link-focus-text: get-theme-color-var( neutral-190 ) !default;
+$kendo-breadcrumb-link-focus-text: k-get-theme-color-var( neutral-190 ) !default;
 /// The box shadow of the focused breadcrumb link
 /// @group breadcrumb
-$kendo-breadcrumb-link-focus-shadow: inset 0 0 0 1px get-theme-color-var( neutral-130 ) !default;
-/// The focus and hover background color of the Breadcrumb link
+$kendo-breadcrumb-link-focus-shadow: inset 0 0 0 1px k-get-theme-color-var( neutral-130 ) !default;
+/// The focus and hover background color of the breadcrumb link
 /// @group breadcrumb
 $kendo-breadcrumb-link-focus-hover-bg: var( --kendo-hover-bg, initial ) !default;
 /// The background color of the disabled breadcrumb link
@@ -147,7 +147,7 @@ $kendo-breadcrumb-link-disabled-border: none !default;
 $kendo-breadcrumb-link-selected-bg: var( --kendo-component-bg, initial ) !default;
 /// The text color of the selected breadcrumb link
 /// @group breadcrumb
-$kendo-breadcrumb-link-selected-text: get-theme-color-var( neutral-160 ) !default;
+$kendo-breadcrumb-link-selected-text: k-get-theme-color-var( neutral-160 ) !default;
 /// The border color of the selected breadcrumb link
 /// @group breadcrumb
 $kendo-breadcrumb-link-selected-border: transparent !default;

package/scss/button/_variables.scss

@@ -225,12 +225,12 @@ $_tc-brand-matrix: (
 // The 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, $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),
+        normal: (100, k-get-theme-color-var( neutral-160 ), 100),
+        hover: (110, k-get-theme-color-var( neutral-190 ), 110),
+        focus: (100, k-get-theme-color-var( neutral-160 ), 100, $kendo-color-white),
+        focus-hover: (110, k-get-theme-color-var( neutral-190 ), 110, $kendo-color-white),
+        active: (120, k-get-theme-color-var( neutral-190 ), 120),
+        active-hover: (110, k-get-theme-color-var( neutral-190 ), 110),
         disabled: (var( --kendo-disabled-bg, inherit ), var( --kendo-disabled-text, inherit ), var( --kendo-disabled-border, inherit ))
     ),
     flat: (
@@ -377,7 +377,7 @@ $kendo-button-theme-colors: () !default;
 @each $fill-mode, $ui-states in $_tc-base-matrix {
     $kendo-button-theme-colors: map.deep-merge(
         $kendo-button-theme-colors,
-        generate-fill-mode-theme-variation( $fill-mode, base, neutral, $ui-states )
+        k-generate-fill-mode-theme-variation( $fill-mode, base, neutral, $ui-states )
     );
 }
 
@@ -386,7 +386,7 @@ $kendo-button-theme-colors: () !default;
     @each $brand-color, $palette in $kendo-button-brand-colors {
         $kendo-button-theme-colors: map.deep-merge(
             $kendo-button-theme-colors,
-            generate-fill-mode-theme-variation( $fill-mode, $brand-color, $palette, $ui-states )
+            k-generate-fill-mode-theme-variation( $fill-mode, $brand-color, $palette, $ui-states )
         )
     }
 }
@@ -395,7 +395,7 @@ $kendo-button-theme-colors: () !default;
 @each $fill-mode, $ui-states in $_tc-warning-matrix {
     $kendo-button-theme-colors: map.deep-merge(
         $kendo-button-theme-colors,
-        generate-fill-mode-theme-variation( $fill-mode, warning, warning, $ui-states )
+        k-generate-fill-mode-theme-variation( $fill-mode, warning, warning, $ui-states )
     );
 }
 
@@ -403,7 +403,7 @@ $kendo-button-theme-colors: () !default;
 @each $fill-mode, $ui-states in $_tc-dark-matrix {
     $kendo-button-theme-colors: map.deep-merge(
         $kendo-button-theme-colors,
-        generate-fill-mode-theme-variation( $fill-mode, dark, neutral, $ui-states )
+        k-generate-fill-mode-theme-variation( $fill-mode, dark, neutral, $ui-states )
     );
 }
 
@@ -411,6 +411,6 @@ $kendo-button-theme-colors: () !default;
 @each $fill-mode, $ui-states in $_tc-light-matrix {
     $kendo-button-theme-colors: map.deep-merge(
         $kendo-button-theme-colors,
-        generate-fill-mode-theme-variation( $fill-mode, light, neutral, $ui-states )
+        k-generate-fill-mode-theme-variation( $fill-mode, light, neutral, $ui-states )
     );
 }

package/scss/calendar/_layout.scss

@@ -288,7 +288,7 @@
         overflow-y: auto;
         display: block;
 
-        @include hide-scrollbar();
+        @include hide-scrollbar-dir-agnostic();
     }
 
     // scoped in calendar until it is used elsewhere

package/scss/calendar/_variables.scss

@@ -41,7 +41,7 @@ $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; // $kendo-component-header-bg
+$kendo-calendar-header-bg: k-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; // $kendo-component-header-text
@@ -74,7 +74,7 @@ $kendo-calendar-cell-padding-y: $kendo-calendar-cell-padding-x !default;
 $kendo-calendar-cell-line-height: $kendo-calendar-line-height !default;
 /// Border radius of the calendar cell.
 /// @group calendar
-$kendo-calendar-cell-border-radius: var( --kendo-border-radius-md, 0 ) !default;
+$kendo-calendar-cell-border-radius: var( --kendo-border-radius-md, 0) !default;
 
 /// Horizontal padding of the calendar header cell.
 /// @group calendar
@@ -145,13 +145,13 @@ $kendo-calendar-weekend-text: inherit !default;
 $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;
+$kendo-calendar-today-bg: k-get-theme-color-var( primary-100 ) !default;
 /// Text color of the calendar today cell when hovered.
 /// @group calendar
 $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;
+$kendo-calendar-today-hover-bg: k-get-theme-color-var( primary-120 ) !default;
 /// Border radius of the calendar today cell.
 /// @group calendar
 $kendo-calendar-today-border-radius: 9999px !default;
@@ -206,7 +206,7 @@ $kendo-calendar-cell-selected-hover-text: var( --kendo-selected-hover-text, inhe
 
 /// Shadow of the selected calendar cell when focused.
 /// @group calendar
-$kendo-calendar-cell-focus-shadow: inset 0 0 0 1px get-theme-color-var( neutral-130) !default;
+$kendo-calendar-cell-focus-shadow: inset 0 0 0 1px k-get-theme-color-var( neutral-130) !default;
 /// Shadow of the selected calendar cell when selected and focused.
 /// @group calendar
 $kendo-calendar-cell-selected-focus-shadow: $kendo-calendar-cell-focus-shadow !default;
@@ -222,7 +222,7 @@ $kendo-calendar-navigation-item-height: 2em !default;
 
 /// Background color of the navigation in the infinite calendar.
 /// @group calendar
-$kendo-calendar-navigation-bg: get-theme-color-var( neutral-10 ) !default;
+$kendo-calendar-navigation-bg: k-get-theme-color-var( neutral-10 ) !default;
 /// Text color of the navigation in the infinite calendar.
 /// @group calendar
 $kendo-calendar-navigation-text: $kendo-calendar-header-text !default;
@@ -253,22 +253,22 @@ $kendo-infinite-calendar-view-height: ( $kendo-calendar-cell-size * 9 ) !default
 // Range calendar
 /// Background color of the range selection in the calendar.
 /// @group calendar
-$kendo-calendar-range-bg: get-theme-color-var( neutral-30 ) !default;
+$kendo-calendar-range-bg: k-get-theme-color-var( neutral-30 ) !default;
 /// Text color of the range selection in the calendar.
 /// @group calendar
 $kendo-calendar-range-text: inherit !default;
 /// Border color of the range selection in the calendar.
 /// @group calendar
-$kendo-calendar-range-border: get-theme-color-var( neutral-130 ) !default;
+$kendo-calendar-range-border: k-get-theme-color-var( neutral-130 ) !default;
 /// Hover shadow of the start range selection in the calendar.
 /// @group calendar
-$kendo-calendar-start-range-hover-shadow: inset 1px -1px 0 0 get-theme-color-var( neutral-130 ), inset 0 1px 0 0 get-theme-color-var( neutral-130 ) !default;
+$kendo-calendar-start-range-hover-shadow: inset 1px -1px 0 0 k-get-theme-color-var( neutral-130 ), inset 0 1px 0 0 k-get-theme-color-var( neutral-130 ) !default;
 /// Hover shadow of the mid range selection in the calendar.
 /// @group calendar
-$kendo-calendar-mid-range-hover-shadow: inset 0 -1px 0 0 get-theme-color-var( neutral-130 ), inset 0 1px 0 0 get-theme-color-var( neutral-130 ) !default;
+$kendo-calendar-mid-range-hover-shadow: inset 0 -1px 0 0 k-get-theme-color-var( neutral-130 ), inset 0 1px 0 0 k-get-theme-color-var( neutral-130 ) !default;
 /// Hover shadow of the end range selection in the calendar.
 /// @group calendar
-$kendo-calendar-end-range-hover-shadow: inset -1px -1px 0 0 get-theme-color-var( neutral-130 ), inset 0 1px 0 0 get-theme-color-var( neutral-130 ) !default;
+$kendo-calendar-end-range-hover-shadow: inset -1px -1px 0 0 k-get-theme-color-var( neutral-130 ), inset 0 1px 0 0 k-get-theme-color-var( neutral-130 ) !default;
 
 
 // Calendar sizes

package/scss/card/_variables.scss

@@ -81,7 +81,7 @@ $kendo-card-header-border-width: 0 !default;
 $kendo-card-header-bg: inherit !default;
 /// Text color of the card header.
 /// @group card
-$kendo-card-header-text: get-theme-color-var( neutral-190 ) !default; // header-text
+$kendo-card-header-text: k-get-theme-color-var( neutral-190 ) !default; // header-text
 /// Border color of the card header.
 /// @group card
 $kendo-card-header-border: inherit !default; // header-border
@@ -190,7 +190,7 @@ $kendo-card-theme-colors: () !default;
     @each $brand-color in $kendo-card-brand-colors {
         $kendo-card-theme-colors: map.deep-merge(
             $kendo-card-theme-colors,
-            generate-theme-variation( $brand-color, $brand-color, $ui-states )
+            k-generate-theme-variation( $brand-color, $brand-color, $ui-states )
         );
     };
 }

package/scss/chat/_variables.scss

@@ -146,13 +146,13 @@ $kendo-chat-quick-reply-line-height: $kendo-chat-bubble-line-height !default;
 
 /// The background of the chat.
 /// @group chat
-$kendo-chat-bg: get-theme-color-var( neutral-10 ) !default;
+$kendo-chat-bg: k-get-theme-color-var( neutral-10 ) !default;
 /// The text of the chat.
 /// @group chat
-$kendo-chat-text: get-theme-color-var( neutral-190 ) !default;
+$kendo-chat-text: k-get-theme-color-var( neutral-190 ) !default;
 /// The border of the chat.
 /// @group chat
-$kendo-chat-border: get-theme-color-var( neutral-30 ) !default;
+$kendo-chat-border: k-get-theme-color-var( neutral-30 ) !default;
 
 /// The background of the bubble in the chat.
 /// @group chat
@@ -175,7 +175,7 @@ $kendo-chat-bubble-selected-shadow: var( --kendo-box-shadow-depth-3, none ) !def
 
 /// The background of the alt bubble in the chat.
 /// @group chat
-$kendo-chat-alt-bubble-bg: get-theme-color-var( primary-100 ) !default;
+$kendo-chat-alt-bubble-bg: k-get-theme-color-var( primary-100 ) !default;
 /// The text of the alt bubble in the chat.
 /// @group chat
 $kendo-chat-alt-bubble-text: var( --kendo-component-bg, inherit ) !default;
@@ -197,17 +197,17 @@ $kendo-chat-alt-bubble-selected-shadow: var( --kendo-box-shadow-depth-1, none )
 $kendo-chat-quick-reply-bg: transparent !default;
 /// The text of quick reply in the chat.
 /// @group chat
-$kendo-chat-quick-reply-text: get-theme-color-var( primary-100 ) !default;
+$kendo-chat-quick-reply-text: k-get-theme-color-var( primary-100 ) !default;
 /// The border of quick reply in the chat.
 /// @group chat
-$kendo-chat-quick-reply-border: get-theme-color-var( primary-100 ) !default;
+$kendo-chat-quick-reply-border: k-get-theme-color-var( primary-100 ) !default;
 
 /// The hover background of quick reply in the chat.
 /// @group chat
-$kendo-chat-quick-reply-hover-bg: get-theme-color-var( primary-100 ) !default;
+$kendo-chat-quick-reply-hover-bg: k-get-theme-color-var( primary-100 ) !default;
 /// The text of quick reply in the chat.
 /// @group chat
 $kendo-chat-quick-reply-hover-text: var( --kendo-component-bg, inherit ) !default;
 /// The hover border of quick reply in the chat.
 /// @group chat
-$kendo-chat-quick-reply-hover-border: get-theme-color-var( primary-100 ) !default;
+$kendo-chat-quick-reply-hover-border: k-get-theme-color-var( primary-100 ) !default;