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

package/scss/core/_variables.scss

@@ -2,54 +2,10 @@
 @use "sass:math";
 @use "sass:meta";
 
-// Options
-$kendo-enable-shadows: true !default;
-$kendo-enable-rounded: true !default;
-$kendo-enable-gradients: true !default;
-$kendo-enable-transitions: true !default;
-
 $kendo-use-input-button-width: true !default;
 $kendo-use-input-spinner-width: true !default;
 $kendo-use-input-spinner-icon-offset: false !default;
 
-$kendo-spacing: (
-    0: 0,
-    1px: 1px,
-    0.5: .125rem,
-    1: .25rem,
-    1.5: .375rem,
-    2: .5rem,
-    2.5: .625rem,
-    3: .75rem,
-    3.5: .875rem,
-    4: 1rem,
-    4.5: 1.125rem,
-    5: 1.25rem,
-    5.5: 1.375rem,
-    6: 1.5rem,
-    6.5: 1.625rem,
-    7: 1.75rem,
-    7.5: 1.875rem,
-    8: 2rem,
-    9: 2.25rem,
-    10: 2.5rem,
-    11: 2.75rem,
-    12: 3rem,
-    13: 3.25rem,
-    14: 3.5rem,
-    15: 3.75rem,
-    16: 4rem,
-    17: 4.25rem,
-    18: 4.5rem,
-    19: 4.75rem,
-    20: 5rem,
-    21: 5.25rem,
-    22: 5.5rem,
-    23: 5.75rem,
-    24: 6rem
-) !default;
-
-
 /// Base font size across all components.
 $kendo-font-size: 14px !default;
 $kendo-font-size-xs: 10px !default;
@@ -87,42 +43,11 @@ $kendo-font-weight-bold: 600 !default;
 
 $kendo-letter-spacing: normal !default;
 
-$kendo-scrollbar-width: 17px !default;
-
-/// Border radius for all components.
-$kendo-border-radius: map.get( $kendo-spacing, 0.5 ) !default;
-$kendo-border-radius-sm: math.div( $kendo-border-radius, 2 ) !default;
-$kendo-border-radius-md: $kendo-border-radius !default;
-$kendo-border-radius-lg: ( $kendo-border-radius * 2 ) !default;
-
-$kendo-border-radii: (
-    DEFAULT: var( --kendo-border-radius-md, $kendo-border-radius-md ),
-    0: 0,
-    sm: var( --kendo-border-radius-sm, $kendo-border-radius-sm ),
-    md: var( --kendo-border-radius-md, $kendo-border-radius-md ),
-    lg: var( --kendo-border-radius-lg, $kendo-border-radius-lg ),
-    none: 0,
-    full: 9999px
-) !default;
-
-
-// Metrics
-$kendo-padding-x: map.get( $kendo-spacing, 2 ) !default;
-$kendo-padding-y: map.get( $kendo-spacing, 1 ) !default;
-$kendo-padding-sm-x: map.get( $kendo-spacing, 1 ) !default;
-$kendo-padding-sm-y: map.get( $kendo-spacing, 0.5 ) !default;
-$kendo-padding-md-x: map.get( $kendo-spacing, 2 ) !default;
-$kendo-padding-md-y: map.get( $kendo-spacing, 1 ) !default;
-$kendo-padding-lg-x: map.get( $kendo-spacing, 3 ) !default;
-$kendo-padding-lg-y: map.get( $kendo-spacing, 1.5 ) !default;
+// $kendo-scrollbar-width: 17px !default;
 
 // Default transition
 $kendo-transition: color .2s ease-in-out, background-color .2s ease-in-out, border-color .2s ease-in-out, box-shadow .2s ease-in-out, opacity .2s ease-in-out, width .2s ease-in-out, height .2s ease-in-out !default;
 
-// Loading
-$kendo-loading-opacity: .3 !default;
-$kendo-zindex-loading: 100 !default;
-
 @mixin core-styles() {
     :root {
         --kendo-font-family: #{meta.inspect($kendo-font-family)};
@@ -146,9 +71,6 @@ $kendo-zindex-loading: 100 !default;
 
         --kendo-letter-spacing: #{$kendo-letter-spacing};
 
-        --kendo-border-radius-sm: #{$kendo-border-radius-sm};
-        --kendo-border-radius-md: #{$kendo-border-radius-md};
-        --kendo-border-radius-lg: #{$kendo-border-radius-lg};
 
         --kendo-transition: #{$kendo-transition};
     }

package/scss/core/color-system/_index.scss

@@ -1,3 +1 @@
 @forward "./utils";
-@forward "./palettes";
-@forward "./variables";

package/scss/core/color-system/utils/_functions.scss

@@ -1,67 +1,5 @@
-@use "sass:map";
-@use "sass:list";
-@use "../palettes" as *;
+@use '../palettes' as *;
 
-@function get-theme-palette($name) {
-    @return map.get( $kendo-fluent-palettes, $name );
-}
-
-@function get-theme-color($palette, $hue) {
-    @return map.get( get-theme-palette( $palette ), $hue );
-}
-
-@function get-theme-color-var( $name, $fallback: "inherit", $prefix: "kendo") {
-    @return var( --#{$prefix}-#{$name}, #{$fallback} );
-}
-
-@function generate-theme-variation( $theme-color, $source-palette-name, $mapping ) {
-    $temp: ();
-
-    @each $ui-state, $indices in $mapping {
-        $prefix: if( $ui-state == normal, '', '#{$ui-state}-' );
-
-        $bg-prop: list.nth($indices, 1);
-        $text-prop: list.nth($indices, 2);
-        $border-prop: list.nth($indices, 3);
-
-        // Take value from the palette only if it is a number
-        $bg: if( type_of($bg-prop) == number, get-theme-color-var( #{$source-palette-name}-#{$bg-prop} ), $bg-prop );
-        $text: if( type_of($text-prop) == number, get-theme-color-var( #{$source-palette-name}-#{$text-prop} ), $text-prop );
-        $border: if( type_of($border-prop) == number, get-theme-color-var( #{$source-palette-name}-#{$border-prop} ), $border-prop );
-
-        $temp: map.deep-merge( $temp, (
-            #{$prefix}bg: $bg,
-            #{$prefix}text: $text,
-            #{$prefix}border: $border
-        ));
-
-        // Add outline if provided in the map
-        @if ( list.length($indices) > 3 ) {
-            $outline-prop: list.nth($indices, 4);
-            $outline: if( type_of($outline-prop) == number, get-theme-color-var( #{$source-palette-name}-#{$outline-prop} ), $outline-prop );
-
-            $temp: map.deep-merge( $temp, (
-                #{$prefix}outline: $outline
-            ));
-        }
-    }
-
-    $map: (
-        #{$theme-color}: $temp
-    );
-
-    @return $map;
-
-};
-
-
-@function generate-fill-mode-theme-variation( $fill-mode, $theme-color, $source-palette-name, $mapping ) {
-
-    $map: generate-theme-variation( $theme-color, $source-palette-name, $mapping );
-
-    $result: (
-       #{$fill-mode}: $map
-    );
-
-    @return $result;
-}
+@forward "@progress/kendo-theme-core/scss/color-system/functions.import.scss" with (
+    $kendo-palettes: $kendo-fluent-palettes
+)

package/scss/core/helpers/_index.scss

@@ -1,12 +1,8 @@
 @use "./asp-fallback";
 @use "./animations";
-@use "./base";
 @use "./extra";
 @use "./reset";
 @use "./normalize";
-@use "./layout";
-@use "./loading";
 @use "./resizing";
-@use "./selection";
 @use "./spacer";
 @use "./scrollbar";

package/scss/dataviz/_layout.scss

@@ -400,10 +400,10 @@
         selected-background: $kendo-selected-bg,
         selected-text-color: $kendo-selected-text,
 
-        success: get-theme-color( success, 100 ),
-        info: get-theme-color( info, 100 ),
-        warning: get-theme-color( warning, 100 ),
-        error: get-theme-color( error, 100 ),
+        success: k-get-theme-color( success, 100 ),
+        info: k-get-theme-color( info, 100 ),
+        warning: k-get-theme-color( warning, 100 ),
+        error: k-get-theme-color( error, 100 ),
 
         series-a: $kendo-series-a,
         series-b: $kendo-series-b,
@@ -444,7 +444,7 @@
         series-30: $kendo-series-30,
 
         gauge-pointer: $kendo-series-f,
-        gauge-track: get-theme-color-var( neutral-30 )
+        gauge-track: k-get-theme-color-var( neutral-30 )
     );
 
     @each $name, $value in $exported {

package/scss/dataviz/_variables.scss

@@ -3,51 +3,51 @@
 
 /// The first base series color and its light and dark shades.
 /// @group charts
-$kendo-series-a: get-theme-color-var( series-a-100 ) !default;
-$kendo-series-a-dark: get-theme-color-var( series-a-130 ) !default;
-$kendo-series-a-darker: get-theme-color-var( series-a-160 ) !default;
-$kendo-series-a-light: get-theme-color-var( series-a-70 ) !default;
-$kendo-series-a-lighter: get-theme-color-var( series-a-40 ) !default;
+$kendo-series-a: k-get-theme-color-var( series-a-100 ) !default;
+$kendo-series-a-dark: k-get-theme-color-var( series-a-130 ) !default;
+$kendo-series-a-darker: k-get-theme-color-var( series-a-160 ) !default;
+$kendo-series-a-light: k-get-theme-color-var( series-a-70 ) !default;
+$kendo-series-a-lighter: k-get-theme-color-var( series-a-40 ) !default;
 
 /// The second base series color and its light and dark shades.
 /// @group charts
-$kendo-series-b: get-theme-color-var( series-b-100 ) !default;
-$kendo-series-b-dark: get-theme-color-var( series-b-130 ) !default;
-$kendo-series-b-darker: get-theme-color-var( series-b-160 ) !default;
-$kendo-series-b-light: get-theme-color-var( series-b-70 ) !default;
-$kendo-series-b-lighter: get-theme-color-var( series-b-40 ) !default;
+$kendo-series-b: k-get-theme-color-var( series-b-100 ) !default;
+$kendo-series-b-dark: k-get-theme-color-var( series-b-130 ) !default;
+$kendo-series-b-darker: k-get-theme-color-var( series-b-160 ) !default;
+$kendo-series-b-light: k-get-theme-color-var( series-b-70 ) !default;
+$kendo-series-b-lighter: k-get-theme-color-var( series-b-40 ) !default;
 
 /// The third base series color and its light and dark shades.
 /// @group charts
-$kendo-series-c: get-theme-color-var( series-c-100 ) !default;
-$kendo-series-c-dark: get-theme-color-var( series-c-130 ) !default;
-$kendo-series-c-darker: get-theme-color-var( series-c-160 ) !default;
-$kendo-series-c-light: get-theme-color-var( series-c-70 ) !default;
-$kendo-series-c-lighter: get-theme-color-var( series-c-40 ) !default;
+$kendo-series-c: k-get-theme-color-var( series-c-100 ) !default;
+$kendo-series-c-dark: k-get-theme-color-var( series-c-130 ) !default;
+$kendo-series-c-darker: k-get-theme-color-var( series-c-160 ) !default;
+$kendo-series-c-light: k-get-theme-color-var( series-c-70 ) !default;
+$kendo-series-c-lighter: k-get-theme-color-var( series-c-40 ) !default;
 
 /// The fourth base series color and its light and dark shades.
 /// @group charts
-$kendo-series-d: get-theme-color-var( series-d-100 ) !default;
-$kendo-series-d-dark: get-theme-color-var( series-d-130 ) !default;
-$kendo-series-d-darker: get-theme-color-var( series-d-160 ) !default;
-$kendo-series-d-light: get-theme-color-var( series-d-70 ) !default;
-$kendo-series-d-lighter: get-theme-color-var( series-d-40 ) !default;
+$kendo-series-d: k-get-theme-color-var( series-d-100 ) !default;
+$kendo-series-d-dark: k-get-theme-color-var( series-d-130 ) !default;
+$kendo-series-d-darker: k-get-theme-color-var( series-d-160 ) !default;
+$kendo-series-d-light: k-get-theme-color-var( series-d-70 ) !default;
+$kendo-series-d-lighter: k-get-theme-color-var( series-d-40 ) !default;
 
 /// The fifth base series color and its light and dark shades.
 /// @group charts
-$kendo-series-e: get-theme-color-var( series-e-100 ) !default;
-$kendo-series-e-dark: get-theme-color-var( series-e-130 ) !default;
-$kendo-series-e-darker: get-theme-color-var( series-e-60 ) !default;
-$kendo-series-e-light: get-theme-color-var( series-e-70 ) !default;
-$kendo-series-e-lighter: get-theme-color-var( series-e-40 ) !default;
+$kendo-series-e: k-get-theme-color-var( series-e-100 ) !default;
+$kendo-series-e-dark: k-get-theme-color-var( series-e-130 ) !default;
+$kendo-series-e-darker: k-get-theme-color-var( series-e-60 ) !default;
+$kendo-series-e-light: k-get-theme-color-var( series-e-70 ) !default;
+$kendo-series-e-lighter: k-get-theme-color-var( series-e-40 ) !default;
 
 /// The sixth base series color and its light and dark shades.
 /// @group charts
-$kendo-series-f: get-theme-color-var( series-f-100 ) !default;
-$kendo-series-f-dark: get-theme-color-var( series-f-130 ) !default;
-$kendo-series-f-darker: get-theme-color-var( series-f-160 ) !default;
-$kendo-series-f-light: get-theme-color-var( series-f-70 ) !default;
-$kendo-series-f-lighter: get-theme-color-var( series-f-40 ) !default;
+$kendo-series-f: k-get-theme-color-var( series-f-100 ) !default;
+$kendo-series-f-dark: k-get-theme-color-var( series-f-130 ) !default;
+$kendo-series-f-darker: k-get-theme-color-var( series-f-160 ) !default;
+$kendo-series-f-light: k-get-theme-color-var( series-f-70 ) !default;
+$kendo-series-f-lighter: k-get-theme-color-var( series-f-40 ) !default;
 
 /// The series colors in order:
 /// base, light, dark, lighter, darker
@@ -127,10 +127,10 @@ $kendo-chart-inactive-bg: var( --kendo-disabled-bg, initial ) !default;
 
 /// The color of the chart component major grid lines.
 /// @group charts
-$kendo-chart-major-lines: get-theme-color-var( neutral-30 ) !default;
+$kendo-chart-major-lines: k-get-theme-color-var( neutral-30 ) !default;
 /// The color of the chart component minor grid lines.
 /// @group charts
-$kendo-chart-minor-lines: get-theme-color-var( neutral-30 ) !default;
+$kendo-chart-minor-lines: k-get-theme-color-var( neutral-30 ) !default;
 
 /// The opacity of the chart area.
 /// @group charts
@@ -165,7 +165,7 @@ $kendo-chart-tooltip-color-inverse: $kendo-color-black !default;
 $kendo-chart-crosshair-background: $kendo-color-black !default;
 /// The text color of the chart shared crosshair tooltip.
 /// @group charts
-$kendo-chart-crosshair-shared-tooltip-color: get-theme-color-var( neutral-160 ) !default;
+$kendo-chart-crosshair-shared-tooltip-color: k-get-theme-color-var( neutral-160 ) !default;
 /// The background color of the chart shared crosshair tooltip.
 /// @group charts
 $kendo-chart-crosshair-shared-tooltip-background: var( --kendo-component-bg, initial ) !default;
@@ -175,7 +175,7 @@ $kendo-chart-crosshair-shared-tooltip-border: transparent !default;
 
 /// The background color of the chart notes.
 /// @group charts
-$kendo-chart-notes-background: get-theme-color-var( neutral-130 ) !default;
+$kendo-chart-notes-background: k-get-theme-color-var( neutral-130 ) !default;
 /// The border color of the chart notes.
 /// @group charts
 $kendo-chart-notes-border: $kendo-chart-notes-background !default;
@@ -185,7 +185,7 @@ $kendo-chart-notes-lines: $kendo-chart-notes-background !default;
 
 /// The background color of the chart handle.
 /// @group charts
-$kendo-chart-handle-bg: get-theme-color-var( neutral-10 ) !default;
+$kendo-chart-handle-bg: k-get-theme-color-var( neutral-10 ) !default;
 /// The text color of the chart handle.
 /// @group charts
 $kendo-chart-handle-text: $kendo-chart-text !default;
@@ -204,7 +204,7 @@ $kendo-chart-handle-hover-border: var( --kendo-hover-border, initial ) !default;
 
 /// The color of the chart error bars.
 /// @group charts
-$kendo-color-error-bars-background: get-theme-color-var( neutral-110 ) !default;
+$kendo-color-error-bars-background: k-get-theme-color-var( neutral-110 ) !default;
 
 /// The size of the selection handle of the chart component.
 /// @group charts
@@ -234,7 +234,7 @@ $kendo-treemap-border: var( --kendo-component-border, initial ) !default;
 
 /// The background color of the treemap title.
 /// @group charts
-$kendo-treemap-title-bg: get-theme-color-var( neutral-10 ) !default;
+$kendo-treemap-title-bg: k-get-theme-color-var( neutral-10 ) !default;
 /// The text color of the treemap title.
 /// @group charts
 $kendo-treemap-title-text: $kendo-color-black !default;

package/scss/daterangepicker/_theme.scss

@@ -8,7 +8,7 @@
         &:disabled,
         &[disabled],
         &.k-disabled {
-            @include disabled(
+            @include disabled-color(
                 $color: var( --kendo-daterange-picker-disabled-text, var( --kendo-disabled-text, inherit ) ),
                 $bg: var( --kendo-daterange-picker-disabled-bg, transparent ),
                 $border: var( --kendo-daterange-picker-disabled-border, currentColor )

package/scss/dialog/_variables.scss

@@ -1,58 +1,58 @@
 @use "sass:map";
 @use "../core/" as *;
 
-/// Width of the border around the dialog.
+/// The width of the border around the Dialog.
 /// @group dialog
 $kendo-dialog-border-width: 0 !default;
 
-/// The background color of the dialog title bar.
+/// The background color of the Dialog titlebar.
 /// @group dialog
 $kendo-dialog-titlebar-bg: var( --kendo-component-bg, initial ) !default;
-/// The text color of the dialog title bar.
+/// The text color of the Dialog titlebar.
 /// @group dialog
 $kendo-dialog-titlebar-text: var( --kendo-component-text, initial ) !default;
-/// The border color of the dialog title bar.
+/// The border color of the Dialog titlebar.
 /// @group dialog
 $kendo-dialog-titlebar-border: var( --kendo-component-border, initial ) !default;
-/// Width of the border around the dialog title bar.
+/// The width of the border around the Dialog titlebar.
 /// @group dialog
 $kendo-dialog-titlebar-border-width: 0 !default;
-/// Horizontal padding of the dialog title bar.
+/// The horizontal padding of the Dialog titlebar.
 /// @group dialog
 $kendo-dialog-titlebar-padding-x: map.get( $kendo-spacing, 6 ) !default;
-/// Vertical padding of the dialog title bar.
+/// The vertical padding of the Dialog titlebar.
 /// @group dialog
 $kendo-dialog-titlebar-padding-y: map.get( $kendo-spacing, 4 ) !default;
 
-/// Horizontal padding of the content of the dialog.
+/// The horizontal padding of the content of the Dialog.
 /// @group dialog
 $kendo-dialog-inner-padding-x: map.get( $kendo-spacing, 6 ) !default;
-/// Vertical padding of the content of the dialog.
+/// The vertical padding of the content of the Dialog.
 /// @group dialog
 $kendo-dialog-inner-padding-y: map.get( $kendo-spacing, 3 ) !default;
 
-/// Horizontal padding of the dialog action buttons.
+/// The horizontal padding of the Dialog action buttons.
 /// @group dialog
 $kendo-dialog-buttongroup-padding-x: map.get( $kendo-spacing, 6 ) !default; // $kendo-actions-padding-x
-/// Vertical padding of the dialog action buttons.
+/// The vertical padding of the Dialog action buttons.
 /// @group dialog
 $kendo-dialog-buttongroup-padding-y: map.get( $kendo-spacing, 6 ) !default; // $kendo-actions-padding-y
-/// Width of the top border of the dialog action buttons.
+/// The width of the top border of the Dialog action buttons.
 /// @group dialog
 $kendo-dialog-buttongroup-border-width: 0 !default;
-/// Spacing between the action buttons of the dialog.
+/// The spacing between the Dialog action buttons.
 /// @group dialog
 $kendo-dialog-buttongroup-spacing: map.get( $kendo-spacing, 3 ) !default;
 
-/// Spacing between the buttons in the header of the dialog.
+/// The spacing between the Dialog action buttons.
 /// @group dialog
 $kendo-dialog-button-spacing: map.get( $kendo-spacing, 2 ) !default; // $kendo-actions-padding-y
 
-/// Box shadow around the dialog.
+/// The box shadow around the Dialog.
 /// @group dialog
 $kendo-dialog-shadow: var( --kendo-box-shadow-depth-4, none ) !default;
 
-/// Theme variations for the dialog.
+/// The theme variations for the Dialog.
 $kendo-dialog-brand-colors: (
     primary: primary
  ) !default;
@@ -70,14 +70,14 @@ $_tc-dialog-light-matrix: (
     (normal: (50, 160, 50)),
 ) !default;
 
-/// Theme colors map for the dialog variations.
+/// The theme colors map for the Dialog.
 $kendo-dialog-theme-colors: () !default;
 
 @each $ui-states in $_tc-dialog-matrix {
     @each $brand-color, $palette in $kendo-dialog-brand-colors {
         $kendo-dialog-theme-colors: map.deep-merge(
             $kendo-dialog-theme-colors,
-            generate-theme-variation( $brand-color, $palette, $ui-states )
+            k-generate-theme-variation( $brand-color, $palette, $ui-states )
         );
     };
 }
@@ -85,13 +85,13 @@ $kendo-dialog-theme-colors: () !default;
 @each $ui-states in $_tc-dialog-dark-matrix {
     $kendo-dialog-theme-colors: map.deep-merge(
         $kendo-dialog-theme-colors,
-        generate-theme-variation( dark, neutral, $ui-states )
+        k-generate-theme-variation( dark, neutral, $ui-states )
     );
 }
 
 @each $ui-states in $_tc-dialog-light-matrix {
     $kendo-dialog-theme-colors: map.deep-merge(
         $kendo-dialog-theme-colors,
-        generate-theme-variation( light, neutral, $ui-states )
+        k-generate-theme-variation( light, neutral, $ui-states )
     );
 }

package/scss/draggable/_variables.scss

@@ -3,7 +3,7 @@
 
 /// Borer radius of the drag clue.
 /// @group draggable
-$kendo-drag-clue-border-radius: var( --kendo-border-radius-md, 0 ) !default;
+$kendo-drag-clue-border-radius: var( --kendo-border-radius-md, #{$kendo-border-radius-md} ) !default;
 /// Borer width of the drag clue.
 /// @group draggable
 $kendo-drag-clue-border-width: 0px !default;
@@ -69,4 +69,4 @@ $kendo-drop-hint-line-v-height: $kendo-drop-hint-line-h-width !default;
 
 /// Background-color of the drop hint.
 /// @group draggable
-$kendo-drop-hint-bg: get-theme-color-var( primary-100 ) !default;
+$kendo-drop-hint-bg: k-get-theme-color-var( primary-100 ) !default;

package/scss/drawer/_variables.scss

@@ -34,16 +34,16 @@ $kendo-drawer-content-padding-y: var( --kendo-padding-y, #{$kendo-padding-md-y}
 $kendo-drawer-scrollbar-width: 7px !default;
 /// Scrollbar color of the drawer.
 /// @group drawer
-$kendo-drawer-scrollbar-color: get-theme-color-var( neutral-90 ) !default;
+$kendo-drawer-scrollbar-color: k-get-theme-color-var( neutral-90 ) !default;
 /// Scrollbar background of the drawer.
 /// @group drawer
-$kendo-drawer-scrollbar-bg: get-theme-color-var( neutral-40 ) !default;
+$kendo-drawer-scrollbar-bg: k-get-theme-color-var( neutral-40 ) !default;
 /// Scrollbar border radius of the drawer.
 /// @group drawer
 $kendo-drawer-scrollbar-radius: 20px !default;
 /// Scrollbar hover color of the drawer.
 /// @group drawer
-$kendo-drawer-scrollbar-hover-color: get-theme-color-var( neutral-110 ) !default;
+$kendo-drawer-scrollbar-hover-color: k-get-theme-color-var( neutral-110 ) !default;
 
 /// Horizontal padding of the drawer item.
 /// @group drawer
@@ -81,7 +81,7 @@ $kendo-drawer-mini-initial-width: calc( 2 * #{$kendo-drawer-item-padding-x} + va
 $kendo-drawer-item-ripple-border-width: map.get( $kendo-spacing, 0.5 ) !default;
 /// The border color of the drawer item ripple
 /// @group drawer
-$kendo-drawer-item-ripple-border: get-theme-color-var( primary-100 ) !default;
+$kendo-drawer-item-ripple-border: k-get-theme-color-var( primary-100 ) !default;
 /// Background color of the drawer item.
 /// @group drawer
 $kendo-drawer-item-bg: $kendo-drawer-bg !default;
@@ -90,17 +90,17 @@ $kendo-drawer-item-bg: $kendo-drawer-bg !default;
 $kendo-drawer-item-text: $kendo-drawer-text !default;
 /// Text color of the drawer item icon.
 /// @group drawer
-$kendo-drawer-item-icon-text: get-theme-color-var( primary-100 ) !default;
+$kendo-drawer-item-icon-text: k-get-theme-color-var( primary-100 ) !default;
 
 /// Background color of the hovered drawer item.
 /// @group drawer
 $kendo-drawer-item-hover-bg: $kendo-drawer-item-bg !default;
 /// Text color of the hovered drawer item.
 /// @group drawer
-$kendo-drawer-item-hover-text: get-theme-color-var( primary-110 ) !default;
+$kendo-drawer-item-hover-text: k-get-theme-color-var( primary-110 ) !default;
 /// Text color of the hovered drawer item icon.
 /// @group drawer
-$kendo-drawer-item-hover-icon-text: get-theme-color-var( primary-110 ) !default;
+$kendo-drawer-item-hover-icon-text: k-get-theme-color-var( primary-110 ) !default;
 
 /// Background color of the focused drawer item.
 /// @group drawer
@@ -110,7 +110,7 @@ $kendo-drawer-item-focus-bg: $kendo-drawer-item-bg !default;
 $kendo-drawer-item-focus-text: $kendo-drawer-item-text !default;
 /// Box shadow of the focused drawer item.
 /// @group drawer
-$kendo-drawer-item-focus-shadow: inset 0 0 0 1px get-theme-color-var( neutral-130 ) !default;
+$kendo-drawer-item-focus-shadow: inset 0 0 0 1px k-get-theme-color-var( neutral-130 ) !default;
 /// Text color of the focused drawer item icon.
 /// @group drawer
 $kendo-drawer-item-focus-icon-text: $kendo-drawer-item-icon-text !default;
@@ -126,7 +126,7 @@ $kendo-drawer-item-selected-bg: var( --kendo-selected-bg, initial ) !default;
 $kendo-drawer-item-selected-text: $kendo-color-black !default;
 /// Text color of the selected drawer item icon.
 /// @group drawer
-$kendo-drawer-item-selected-icon-text: get-theme-color-var( primary-120 ) !default;
+$kendo-drawer-item-selected-icon-text: k-get-theme-color-var( primary-120 ) !default;
 /// Background color of the selected and hovered drawer item.
 /// @group drawer
 $kendo-drawer-item-selected-hover-bg: var( --kendo-selected-hover-bg, inherit ) !default;

package/scss/dropzone/_variables.scss

@@ -27,7 +27,7 @@ $kendo-dropzone-line-height: var( --kendo-line-height, normal ) !default;
 
 /// Background color of the dropzone.
 /// @group dropzone
-$kendo-dropzone-bg: get-theme-color-var( neutral-10 ) !default;
+$kendo-dropzone-bg: k-get-theme-color-var( neutral-10 ) !default;
 /// Text color of the dropzone.
 /// @group dropzone
 $kendo-dropzone-text: var( --kendo-component-text, inherit ) !default;
@@ -40,10 +40,10 @@ $kendo-dropzone-border: var( --kendo-component-border, initial ) !default;
 $kendo-dropzone-icon-spacing: map.get( $kendo-spacing, 6 ) !default;
 /// Text color of the icon.
 /// @group dropzone
-$kendo-dropzone-icon-text: get-theme-color-var( neutral-90 ) !default;
+$kendo-dropzone-icon-text: k-get-theme-color-var( neutral-90 ) !default;
 /// Text color of the icon when the dropzone is hovered.
 /// @group dropzone
-$kendo-dropzone-icon-hover-text: get-theme-color-var( primary-100 ) !default;
+$kendo-dropzone-icon-hover-text: k-get-theme-color-var( primary-100 ) !default;
 
 /// Font size of the hint.
 /// @group dropzone