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

package/scss/breadcrumb/_variables.scss

@@ -2,61 +2,104 @@
 @use "../core/" as *;
 @use "../icon/_variables.scss" as *;
 
-/// The horizontal margin of the breadcrumb
+/// The horizontal margin of the Breadcrumb
 /// @group breadcrumb
 $kendo-breadcrumb-margin-x: 0px !default;
-/// The vertical margin of the breadcrumb
+/// The vertical margin of the Breadcrumb
 /// @group breadcrumb
 $kendo-breadcrumb-margin-y: 0px !default;
-/// The horizontal padding of the breadcrumb
+/// The horizontal padding of the Breadcrumb
 /// @group breadcrumb
 $kendo-breadcrumb-padding-x: 0px !default;
-/// The vertical padding of the breadcrumb
+/// The vertical padding of the Breadcrumb
 /// @group breadcrumb
 $kendo-breadcrumb-padding-y: 0px !default;
-/// The width of the border around the breadcrumb
+
+/// The width of the border around the Breadcrumb
 /// @group breadcrumb
 $kendo-breadcrumb-border-width: 0px !default;
-/// The font family of the breadcrumb
+
+/// The font family of the Breadcrumb
 /// @group breadcrumb
 $kendo-breadcrumb-font-family: var( --kendo-font-family, inherit ) !default;
-/// The font size of the breadcrumb
+/// The font size of the Breadcrumb
+
 /// @group breadcrumb
 $kendo-breadcrumb-font-size: var( --kendo-font-size, inherit ) !default;
-/// The line height of the breadcrumb
+/// The font size of the small breadcrumb.
+/// @group breadcrumb
+$kendo-breadcrumb-sm-font-size: var( --kendo-font-size-md, inherit ) !default;
+/// The font size of the medium breadcrumb.
+/// @group breadcrumb
+$kendo-breadcrumb-md-font-size: var( --kendo-font-size-md, inherit ) !default;
+/// The font size of the large breadcrumb.
+/// @group breadcrumb
+$kendo-breadcrumb-lg-font-size: var( --kendo-font-size-md, inherit ) !default;
+
+/// The line height used along with the $kendo-font-size variable of the Breadcrumb.
 /// @group breadcrumb
 $kendo-breadcrumb-line-height: var( --kendo-line-height, normal ) !default;
-/// The background color of the breadcrumb
+/// The line height used along with the $kendo-font-size variable of the small breadcrumb.
+/// @group breadcrumb
+$kendo-breadcrumb-sm-line-height: var( --kendo-line-height, normal ) !default;
+/// The line height used along with the $kendo-font-size variable of the medium breadcrumb.
+/// @group breadcrumb
+$kendo-breadcrumb-md-line-height: var( --kendo-line-height, normal ) !default;
+/// The line height used along with the $kendo-font-size variable of the large breadcrumb.
+/// @group breadcrumb
+$kendo-breadcrumb-lg-line-height: var( --kendo-line-height, normal ) !default;
+
+/// The background color of the Breadcrumb
 /// @group breadcrumb
 $kendo-breadcrumb-bg: var( --kendo-component-bg, initial ) !default;
-/// The text color of the breadcrumb
+/// The text color of the Breadcrumb
 /// @group breadcrumb
-$kendo-breadcrumb-text: get-theme-color-var( neutral-130 ) !default;
+$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
+/// The horizontal padding of the Breadcrumb link
 /// @group breadcrumb
 $kendo-breadcrumb-link-padding-x: map.get( $kendo-spacing, 2 ) !default;
-/// The vertical padding of the breadcrumb link
+/// The horizontal padding of the small Breadcrumb link.
+/// @group breadcrumb
+$kendo-breadcrumb-sm-link-padding-x: map.get( $kendo-spacing, 2 ) !default;
+/// The horizontal padding of the medium Breadcrumb link.
+/// @group breadcrumb
+$kendo-breadcrumb-md-link-padding-x: $kendo-breadcrumb-link-padding-x !default;
+/// The horizontal padding of the large Breadcrumb link.
+/// @group breadcrumb
+$kendo-breadcrumb-lg-link-padding-x: map.get( $kendo-spacing, 2 ) !default;
+
+/// The vertical padding of the Breadcrumb link
+/// @group breadcrumb
+$kendo-breadcrumb-link-padding-y: map.get( $kendo-spacing, 2 ) !default;
+/// The vertical padding of the small Breadcrumb link.
 /// @group breadcrumb
-$kendo-breadcrumb-link-padding-y: map.get( $kendo-spacing, 1.5 ) !default;
-/// The radius of the border around the breadcrumb link
+$kendo-breadcrumb-sm-link-padding-y: map.get( $kendo-spacing, 1.5 ) !default;
+/// The vertical padding of the medium Breadcrumb link.
+/// @group breadcrumb
+$kendo-breadcrumb-md-link-padding-y: $kendo-breadcrumb-link-padding-y !default;
+/// The vertical padding of the large Breadcrumb link.
+/// @group breadcrumb
+$kendo-breadcrumb-lg-link-padding-y: map.get( $kendo-spacing, 2.5 ) !default;
+
+/// The radius of the border around the Breadcrumb link
 /// @group breadcrumb
 $kendo-breadcrumb-link-border-radius: 0px !default;
-/// The initial text color of the breadcrumb link
+/// The initial text color of the Breadcrumb link
 /// @group breadcrumb
 $kendo-breadcrumb-link-initial-text: inherit !default;
-/// The background color of the breadcrumb link
+/// The background color of the Breadcrumb link
 /// @group breadcrumb
 $kendo-breadcrumb-link-bg: transparent !default;
-/// The text color of the breadcrumb link
+/// The text color of the Breadcrumb link
 /// @group breadcrumb
-$kendo-breadcrumb-link-text: get-theme-color-var( neutral-130 ) !default;
+$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;
@@ -65,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;
@@ -77,16 +120,16 @@ $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;
+$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;
@@ -99,12 +142,12 @@ $kendo-breadcrumb-link-disabled-text: var( --kendo-disabled-text, initial ) !def
 /// The border color of the disabled breadcrumb link
 /// @group breadcrumb
 $kendo-breadcrumb-link-disabled-border: none !default;
-/// The background color of selected the breadcrumb link
+/// The background color of selected the Breadcrumb link
 /// @group breadcrumb
 $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;
@@ -112,13 +155,13 @@ $kendo-breadcrumb-link-selected-border: transparent !default;
 /// @group breadcrumb
 $kendo-breadcrumb-link-selected-font-weight: var( --kendo-font-weight-bold, bold ) !default;
 
-/// The background color of the breadcrumb root link
+/// The background color of the Breadcrumb root link
 /// @group breadcrumb
 $kendo-breadcrumb-root-link-bg: $kendo-breadcrumb-link-bg !default;
-/// The text color of the breadcrumb root link
+/// The text color of the Breadcrumb root link
 /// @group breadcrumb
 $kendo-breadcrumb-root-link-text: $kendo-breadcrumb-link-text !default;
-/// The border color of the breadcrumb root link
+/// The border color of the Breadcrumb root link
 /// @group breadcrumb
 $kendo-breadcrumb-root-link-border: $kendo-breadcrumb-link-border !default;
 /// The background color of the hovered breadcrumb root link
@@ -148,7 +191,7 @@ $kendo-breadcrumb-root-link-focus-text: $kendo-breadcrumb-link-focus-text !defau
 /// The border color of the focused breadcrumb root link
 /// @group breadcrumb
 $kendo-breadcrumb-root-link-focus-shadow: $kendo-breadcrumb-link-focus-shadow !default;
-/// The focus and hover background color of the breadcrumb root link
+/// The focus and hover background color of the Breadcrumb root link
 /// @group breadcrumb
 $kendo-breadcrumb-root-link-focus-hover-bg: $kendo-breadcrumb-link-focus-hover-bg !default;
 /// The text color of the disabled breadcrumb root link
@@ -159,13 +202,61 @@ $kendo-breadcrumb-current-item-bg: null !default;
 $kendo-breadcrumb-current-item-text: null !default;
 $kendo-breadcrumb-current-item-border: null !default;
 
-/// The horizontal padding of the breadcrumb link icon
+/// The vertical padding of the Breadcrumb link icon
+/// @group breadcrumb
+$kendo-breadcrumb-icon-link-padding-y: map.get( $kendo-spacing, 2.5 ) !default;
+/// The vertical padding of the small Breadcrumb link icon.
+/// @group breadcrumb
+$kendo-breadcrumb-sm-icon-link-padding-y: map.get( $kendo-spacing, 2 ) !default;
+/// The vertical padding of the medium Breadcrumb link icon.
+/// @group breadcrumb
+$kendo-breadcrumb-md-icon-link-padding-y: $kendo-breadcrumb-icon-link-padding-y !default;
+/// The vertical padding of the large Breadcrumb link icon.
+/// @group breadcrumb
+$kendo-breadcrumb-lg-icon-link-padding-y: map.get( $kendo-spacing, 3 ) !default;
+
+/// The horizontal padding of the Breadcrumb link icon
+/// @group breadcrumb
+$kendo-breadcrumb-icon-link-padding-x: $kendo-breadcrumb-icon-link-padding-y !default;
+/// The horizontal padding of the small Breadcrumb link icon.
 /// @group breadcrumb
-$kendo-breadcrumb-icon-link-padding-x: $kendo-breadcrumb-link-padding-x !default;
-/// The vertical padding of the breadcrumb link icon
+$kendo-breadcrumb-sm-icon-link-padding-x: $kendo-breadcrumb-sm-icon-link-padding-y !default;
+/// The horizontal padding of the medium Breadcrumb link icon.
 /// @group breadcrumb
-$kendo-breadcrumb-icon-link-padding-y: $kendo-breadcrumb-icon-link-padding-x !default;
+$kendo-breadcrumb-md-icon-link-padding-x: $kendo-breadcrumb-icon-link-padding-x !default;
+/// The horizontal padding of the large Breadcrumb link icon.
+/// @group breadcrumb
+$kendo-breadcrumb-lg-icon-link-padding-x: $kendo-breadcrumb-lg-icon-link-padding-y !default;
 
 // Root link spacing
-$kendo-breadcrumb-root-link-spacing: 0px !default;
 $kendo-breadcrumb-link-icon-spacing: var( --kendo-icon-spacing, #{$kendo-icon-spacing} ) !default;
+
+
+/// The sizes map for the Breadcrumb.
+/// @group breadcrumb
+$kendo-breadcrumb-sizes: (
+    sm: (
+        link-padding-x: $kendo-breadcrumb-sm-link-padding-x,
+        link-padding-y: $kendo-breadcrumb-sm-link-padding-y,
+        icon-link-padding-x: $kendo-breadcrumb-sm-icon-link-padding-x,
+        icon-link-padding-y: $kendo-breadcrumb-sm-icon-link-padding-y,
+        font-size: $kendo-breadcrumb-sm-font-size,
+        line-height: $kendo-breadcrumb-sm-line-height
+    ),
+    md: (
+        link-padding-x: $kendo-breadcrumb-md-link-padding-x,
+        link-padding-y: $kendo-breadcrumb-md-link-padding-y,
+        icon-link-padding-x: $kendo-breadcrumb-md-icon-link-padding-x,
+        icon-link-padding-y: $kendo-breadcrumb-md-icon-link-padding-y,
+        font-size: $kendo-breadcrumb-md-font-size,
+        line-height: $kendo-breadcrumb-md-line-height
+    ),
+    lg: (
+        link-padding-x: $kendo-breadcrumb-lg-link-padding-x,
+        link-padding-y: $kendo-breadcrumb-lg-link-padding-y,
+        icon-link-padding-x: $kendo-breadcrumb-lg-icon-link-padding-x,
+        icon-link-padding-y: $kendo-breadcrumb-lg-icon-link-padding-y,
+        font-size: $kendo-breadcrumb-lg-font-size,
+        line-height: $kendo-breadcrumb-lg-line-height
+    )
+) !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;

package/scss/checkbox/_variables.scss

@@ -45,21 +45,21 @@ $kendo-checkbox-bg: $kendo-component-bg !default;
 $kendo-checkbox-text: transparent !default;
 /// The border color of the CheckBox.
 /// @group checkbox
-$kendo-checkbox-border: get-theme-color-var( neutral-160 ) !default;
+$kendo-checkbox-border: k-get-theme-color-var( neutral-160 ) !default;
 
 /// The background color of the hovered CheckBox.
 /// @group checkbox
 $kendo-checkbox-hover-bg: $kendo-checkbox-bg !default;
 /// The text color of the hovered CheckBox.
 /// @group checkbox
-$kendo-checkbox-hover-text: get-theme-color( neutral, 130 ) !default;
+$kendo-checkbox-hover-text: k-get-theme-color( neutral, 130 ) !default;
 /// The border color of the hovered CheckBox.
 /// @group checkbox
 $kendo-checkbox-hover-border: $kendo-checkbox-border !default;
 
 /// The background color of the checked CheckBox.
 /// @group checkbox
-$kendo-checkbox-checked-bg: get-theme-color-var( primary-100 ) !default;
+$kendo-checkbox-checked-bg: k-get-theme-color-var( primary-100 ) !default;
 /// The text color of the checked CheckBox.
 /// @group checkbox
 $kendo-checkbox-checked-text: $kendo-color-white !default;
@@ -69,7 +69,7 @@ $kendo-checkbox-checked-border: $kendo-checkbox-checked-bg !default;
 
 /// The background of the hovered and checked CheckBox.
 /// @group checkbox
-$kendo-checkbox-hover-checked-bg: get-theme-color-var( primary-110 ) !default;
+$kendo-checkbox-hover-checked-bg: k-get-theme-color-var( primary-110 ) !default;
 /// The text color of the hovered and checked CheckBox.
 /// @group checkbox
 $kendo-checkbox-hover-checked-text: $kendo-color-white !default;
@@ -85,7 +85,7 @@ $kendo-checkbox-focus-border: null !default;
 $kendo-checkbox-focus-shadow: null !default;
 /// The outline of the focused CheckBox.
 /// @group checkbox
-$kendo-checkbox-focus-outline: 1px solid get-theme-color-var( neutral-130 ) !default;
+$kendo-checkbox-focus-outline: 1px solid k-get-theme-color-var( neutral-130 ) !default;
 $kendo-checkbox-focus-outline-offset: 2px !default;
 
 /// The background color of the indeterminate CheckBox.
@@ -93,50 +93,50 @@ $kendo-checkbox-focus-outline-offset: 2px !default;
 $kendo-checkbox-indeterminate-bg: $kendo-checkbox-bg !default;
 /// The text color of the indeterminate CheckBox.
 /// @group checkbox
-$kendo-checkbox-indeterminate-text: get-theme-color( primary, 100 ) !default;
+$kendo-checkbox-indeterminate-text: k-get-theme-color( primary, 100 ) !default;
 /// The border color of the indeterminate CheckBox.
 /// @group checkbox
-$kendo-checkbox-indeterminate-border: get-theme-color-var( primary-100 ) !default;
+$kendo-checkbox-indeterminate-border: k-get-theme-color-var( primary-100 ) !default;
 
 /// The background color of the hovered and indeterminate CheckBox.
 /// @group checkbox
 $kendo-checkbox-hover-indeterminate-bg: $kendo-checkbox-bg !default;
 /// The text color of the hovered and indeterminate CheckBox.
 /// @group checkbox
-$kendo-checkbox-hover-indeterminate-text: get-theme-color( primary, 110 ) !default;
+$kendo-checkbox-hover-indeterminate-text: k-get-theme-color( primary, 110 ) !default;
 /// The border color of the hovered and indeterminate CheckBox.
 /// @group checkbox
-$kendo-checkbox-hover-indeterminate-border: get-theme-color-var( primary-110 ) !default;
+$kendo-checkbox-hover-indeterminate-border: k-get-theme-color-var( primary-110 ) !default;
 
 /// The background color of the disabled CheckBox.
 /// @group checkbox
 $kendo-checkbox-disabled-bg: $kendo-checkbox-bg !default;
 /// The text color of the disabled CheckBox.
 /// @group checkbox
-$kendo-checkbox-disabled-text: get-theme-color-var( neutral-60 ) !default;
+$kendo-checkbox-disabled-text: k-get-theme-color-var( neutral-60 ) !default;
 /// The border color of the disabled CheckBox.
 /// @group checkbox
-$kendo-checkbox-disabled-border: get-theme-color-var( neutral-60 ) !default;
+$kendo-checkbox-disabled-border: k-get-theme-color-var( neutral-60 ) !default;
 
 /// The background color of the disabled and checked CheckBox.
 /// @group checkbox
-$kendo-checkbox-disabled-checked-bg: get-theme-color-var( neutral-60 ) !default;
+$kendo-checkbox-disabled-checked-bg: k-get-theme-color-var( neutral-60 ) !default;
 /// The text color of the disabled and checked CheckBox.
 /// @group checkbox
 $kendo-checkbox-disabled-checked-text: $kendo-color-white !default;
 /// The border color of the disabled and checked CheckBox.
 /// @group checkbox
-$kendo-checkbox-disabled-checked-border: get-theme-color-var( neutral-60 ) !default;
+$kendo-checkbox-disabled-checked-border: k-get-theme-color-var( neutral-60 ) !default;
 
 /// The background color of the disabled and indeterminate CheckBox.
 /// @group checkbox
 $kendo-checkbox-disabled-indeterminate-bg: $kendo-checkbox-bg !default;
 /// The border color of the disabled and indeterminate CheckBox.
 /// @group checkbox
-$kendo-checkbox-disabled-indeterminate-text: get-theme-color( neutral, 60 ) !default;
+$kendo-checkbox-disabled-indeterminate-text: k-get-theme-color( neutral, 60 ) !default;
 /// The border color of the disabled and indeterminate CheckBox.
 /// @group checkbox
-$kendo-checkbox-disabled-indeterminate-border: get-theme-color-var( neutral-60 ) !default;
+$kendo-checkbox-disabled-indeterminate-border: k-get-theme-color-var( neutral-60 ) !default;
 
 /// The background color of an invalid CheckBox.
 /// @group checkbox
@@ -212,7 +212,7 @@ $kendo-checkbox-list-item-padding-y: $kendo-list-md-item-padding-y !default;
 
 /// The background color of the CheckBox' ripple.
 /// @group checkbox
-$kendo-checkbox-ripple-bg: get-theme-color-var( primary-100 ) !default;
+$kendo-checkbox-ripple-bg: k-get-theme-color-var( primary-100 ) !default;
 /// The opacity of the CheckBox' ripple.
 /// @group checkbox
 $kendo-checkbox-ripple-opacity: .25 !default;