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

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

@@ -77,7 +77,7 @@ $kendo-dialog-theme-colors: () !default;
     @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

package/scss/editor/_variables.scss

@@ -44,10 +44,10 @@ $kendo-editor-selectednode-outline-width: map.get( $kendo-spacing, 0.5 ) !defaul
 $kendo-editor-selected-text: $kendo-color-white !default;
 /// The selected background color of the Editor.
 /// @group editor
-$kendo-editor-selected-bg: get-theme-color-var( primary-100 ) !default;
+$kendo-editor-selected-bg: k-get-theme-color-var( primary-100 ) !default;
 /// The highlighted background color of the Editor.
 /// @group editor
-$kendo-editor-highlighted-bg: get-theme-color-var( primary-60 ) !default;
+$kendo-editor-highlighted-bg: k-get-theme-color-var( primary-60 ) !default;
 
 /// The size of the Editor's resize handle.
 /// @group editor
@@ -64,7 +64,7 @@ $kendo-editor-resize-handle-bg: $kendo-color-white !default;
 
 /// The outline color of the Editor's selected node.
 /// @group editor
-$kendo-editor-selectednode-outline-color: get-theme-color-var( primary-100 ) !default;
+$kendo-editor-selectednode-outline-color: k-get-theme-color-var( primary-100 ) !default;
 
 /// The border color of the Inline Editor data cell.
 /// @group editor

package/scss/expansion-panel/_variables.scss

@@ -22,13 +22,13 @@ $kendo-expander-line-height: var( --kendo-line-height, normal ) !default;
 $kendo-expander-text: var( --kendo-component-text, initial ) !default;
 /// The background color of the ExpansionPanel.
 /// @group expander
-$kendo-expander-bg: get-theme-color-var( neutral-10 ) !default;
+$kendo-expander-bg: k-get-theme-color-var( neutral-10 ) !default;
 /// The border color of the ExpansionPanel.
 /// @group expander
 $kendo-expander-border: var( --kendo-component-border, initial ) !default;
 /// The box shadow of the ExpansionPanel.
 /// @group expander
-$kendo-expander-shadow: inset 0 0 0 2px get-theme-color-var( neutral-30 ) !default;
+$kendo-expander-shadow: inset 0 0 0 2px k-get-theme-color-var( neutral-30 ) !default;
 
 /// The background color of the expanded ExpansionPanel.
 /// @group expander
@@ -52,14 +52,14 @@ $kendo-expander-focus-outline-width: 1px !default;
 $kendo-expander-focus-outline-style: solid !default;
 /// The outline color of the focused ExpansionPanel.
 /// @group expander
-$kendo-expander-focus-outline: get-theme-color-var( neutral-130 ) !default;
+$kendo-expander-focus-outline: k-get-theme-color-var( neutral-130 ) !default;
 
 /// The background color of the focused ExpansionPanel.
 /// @group expander
 $kendo-expander-focus-bg: var( --kendo-component-bg, initial ) !default;
 /// The box shadow of the focused ExpansionPanel.
 /// @group expander
-$kendo-expander-focus-shadow: inset 0px 0px 0px 2px get-theme-color-var( neutral-130 ) !default;
+$kendo-expander-focus-shadow: inset 0px 0px 0px 2px k-get-theme-color-var( neutral-130 ) !default;
 
 /// The horizontal padding of the ExpansionPanel header.
 /// @group expander
@@ -70,18 +70,18 @@ $kendo-expander-header-padding-y: map.get( $kendo-spacing, 3 ) !default;
 
 /// The text color of the ExpansionPanel header.
 /// @group expander
-$kendo-expander-header-text: get-theme-color-var( primary-100 ) !default;
+$kendo-expander-header-text: k-get-theme-color-var( primary-100 ) !default;
 /// The background color of the ExpansionPanel header.
 /// @group expander
 $kendo-expander-header-bg: inherit !default;
 
 /// The background color of the hovered ExpansionPanel header.
 /// @group expander
-$kendo-expander-header-hover-bg: get-theme-color-var( neutral-20 ) !default;
+$kendo-expander-header-hover-bg: k-get-theme-color-var( neutral-20 ) !default;
 
 /// The text color of the ExpansionPanel title.
 /// @group expander
-$kendo-expander-title-text: get-theme-color-var( primary-100 ) !default;
+$kendo-expander-title-text: k-get-theme-color-var( primary-100 ) !default;
 
 /// The text color of the ExpansionPanel sub-title.
 /// @group expander

package/scss/fab/_theme.scss

@@ -185,7 +185,7 @@
         &.k-disabled .k-fab-item-icon,
         &:disabled .k-fab-item-text,
         &.k-disabled .k-fab-item-text {
-            @include disabled(
+            @include disabled-color(
                 var( --kendo-disabled-text, inherit ),
                 var( --kendo-disabled-bg, inherit ),
                 var( --kendo-disabled-border, inherit )

package/scss/fab/_variables.scss

@@ -8,7 +8,7 @@
 $kendo-fab-border-width: 1px !default;
 /// The border radius of the FAB.
 /// @group floating-action-button
-$kendo-fab-border-radius: var( --kendo-border-radius-md, 0 ) !default;
+$kendo-fab-border-radius: var( --kendo-border-radius-md, #{$kendo-border-radius-md} ) !default;
 /// The font family of the FAB.
 /// @group floating-action-button
 $kendo-fab-font-family: var( --kendo-font-family, inherit ) !default;
@@ -86,7 +86,7 @@ $kendo-fab-item-text-border-width: 1px !default;
 $kendo-fab-item-text-border-style: solid !default;
 /// The border radius of the FAB item text.
 /// @group floating-action-button
-$kendo-fab-item-text-border-radius: var( --kendo-border-radius-md, 0 ) !default;
+$kendo-fab-item-text-border-radius: var( --kendo-border-radius-md, #{$kendo-border-radius-md} ) !default;
 /// The font size of the FAB item text.
 /// @group floating-action-button
 $kendo-fab-item-text-font-size: var( --kendo-font-size-sm, inherit ) !default;
@@ -151,13 +151,13 @@ $kendo-fab-sizes: (
 $kendo-fab-item-offset-y: map.get( $kendo-spacing, 2 ) !default;
 /// The base text color of the FAB item.
 /// @group floating-action-button
-$kendo-fab-item-text: get-theme-color-var( neutral-160 ) !default;
+$kendo-fab-item-text: k-get-theme-color-var( neutral-160 ) !default;
 /// The base background color of the FAB item.
 /// @group floating-action-button
 $kendo-fab-item-bg: var( --kendo-component-bg, inherit ) !default;
 /// The base border color of the FAB item.
 /// @group floating-action-button
-$kendo-fab-item-border: get-theme-color-var( neutral-110 ) !default;
+$kendo-fab-item-border: k-get-theme-color-var( neutral-110 ) !default;
 /// The text color of the hovered FAB item.
 /// @group floating-action-button
 $kendo-fab-item-hover-text: var( --kendo-hover-text, inherit ) !default;
@@ -166,16 +166,16 @@ $kendo-fab-item-hover-text: var( --kendo-hover-text, inherit ) !default;
 $kendo-fab-item-hover-bg: var( --kendo-hover-bg, inherit ) !default;
 /// The border color of the hovered FAB item.
 /// @group floating-action-button
-$kendo-fab-item-hover-border: get-theme-color-var( neutral-110 ) !default;
+$kendo-fab-item-hover-border: k-get-theme-color-var( neutral-110 ) !default;
 /// The text color of the focused FAB item.
 /// @group floating-action-button
-$kendo-fab-item-focus-text: get-theme-color-var( neutral-160 ) !default;
+$kendo-fab-item-focus-text: k-get-theme-color-var( neutral-160 ) !default;
 /// The background color of the focused FAB item.
 /// @group floating-action-button
 $kendo-fab-item-focus-bg: var( --kendo-component-bg, inherit ) !default;
 /// The border color of the focused FAB item.
 /// @group floating-action-button
-$kendo-fab-item-focus-border: get-theme-color-var( neutral-110 ) !default;
+$kendo-fab-item-focus-border: k-get-theme-color-var( neutral-110 ) !default;
 /// The text color of the active FAB item.
 /// @group floating-action-button
 $kendo-fab-item-active-text: var( --kendo-selected-text, inherit ) !default;
@@ -184,4 +184,4 @@ $kendo-fab-item-active-text: var( --kendo-selected-text, inherit ) !default;
 $kendo-fab-item-active-bg: var( --kendo-selected-bg, inherit ) !default;
 /// The border color of the active FAB item.
 /// @group floating-action-button
-$kendo-fab-item-active-border: get-theme-color-var( neutral-110 ) !default;
+$kendo-fab-item-active-border: k-get-theme-color-var( neutral-110 ) !default;

package/scss/filter/_variables.scss

@@ -24,10 +24,10 @@ $kendo-filter-text: var( --kendo-component-text, initial ) !default;
 
 /// The text color of the Filter preview field.
 /// @group filter
-$kendo-filter-preview-field-text: get-theme-color-var( primary-100 ) !default;
+$kendo-filter-preview-field-text: k-get-theme-color-var( primary-100 ) !default;
 /// The text color of the Filter preview operator.
 /// @group filter
-$kendo-filter-preview-operator-text: get-theme-color-var( neutral-130 ) !default;
+$kendo-filter-preview-operator-text: k-get-theme-color-var( neutral-130 ) !default;
 
 /// The background color of the line that connects the Filter items.
 /// @group filter
@@ -35,4 +35,4 @@ $kendo-filter-line-bg: var( --kendo-component-border, initial ) !default;
 
 /// The border color of the focused Filter.
 /// @group filter
-$kendo-filter-toolbar-focus-border: get-theme-color-var( neutral-130 ) !default;
+$kendo-filter-toolbar-focus-border: k-get-theme-color-var( neutral-130 ) !default;

package/scss/forms/_variables.scss

@@ -89,7 +89,7 @@ $kendo-form-hint-margin-top: map.get( $kendo-spacing, 1 ) !default;
 
 /// The text color of the Form hint.
 /// @group form
-$kendo-form-hint-text: get-theme-color-var( neutral-130 ) !default;
+$kendo-form-hint-text: k-get-theme-color-var( neutral-130 ) !default;
 
 /// The row spacing of the small Form.
 /// @group form
@@ -171,7 +171,7 @@ $kendo-fieldset-border: initial !default;
 $kendo-fieldset-legend-bg: transparent !default;
 /// The text color of the Form legend.
 /// @group form
-$kendo-fieldset-legend-text: get-theme-color-var( neutral-130 ) !default;
+$kendo-fieldset-legend-text: k-get-theme-color-var( neutral-130 ) !default;
 /// The border color of the Form legend.
 /// @group form
 $kendo-fieldset-legend-border: initial !default;

package/scss/gantt/_layout.scss

@@ -519,7 +519,7 @@
     // Single task
     .k-single-wrap {}
     .k-task-single {
-        border-radius: var( --kendo-border-radius-md, 0 );
+        border-radius: var( --kendo-border-radius-md, #{$kendo-border-radius-md} );
         border-width: var( --kendo-gantt-task-border-width, #{$kendo-gantt-task-border-width} );
         border-style: solid;
         box-sizing: border-box;
@@ -552,7 +552,7 @@
         }
     }
     .k-task-complete {
-        border-radius: var( --kendo-border-radius-md, 0 );
+        border-radius: var( --kendo-border-radius-md, #{$kendo-border-radius-md} );
         width: 20%;
         position: absolute;
         z-index: 1;

package/scss/gantt/_variables.scss

@@ -42,7 +42,7 @@ $kendo-gantt-line-size: 2px !default;
 $kendo-gantt-line-fill: black !default;
 /// Selected background fill of the gantt connecting lines.
 /// @group gantt
-$kendo-gantt-line-selected-fill: get-theme-color-var( primary-120 ) !default;
+$kendo-gantt-line-selected-fill: k-get-theme-color-var( primary-120 ) !default;
 
 /// Size of the gantt task dot.
 /// @group gantt
@@ -71,23 +71,23 @@ $kendo-gantt-milestone-bg: $kendo-gantt-text !default;
 $kendo-gantt-milestone-border: $kendo-gantt-text !default;
 /// Selected background color of the gantt milestone.
 /// @group gantt
-$kendo-gantt-milestone-selected-bg: get-theme-color-var( primary-100 ) !default;
+$kendo-gantt-milestone-selected-bg: k-get-theme-color-var( primary-100 ) !default;
 /// Selected border color of the gantt milestone.
 /// @group gantt
-$kendo-gantt-milestone-selected-border: get-theme-color-var( primary-100 ) !default;
+$kendo-gantt-milestone-selected-border: k-get-theme-color-var( primary-100 ) !default;
 
 /// Background color of the gantt summary.
 /// @group gantt
-$kendo-gantt-summary-bg: get-theme-color-var( neutral-110 ) !default;
+$kendo-gantt-summary-bg: k-get-theme-color-var( neutral-110 ) !default;
 /// Background color of the gantt summary progress.
 /// @group gantt
-$kendo-gantt-summary-progress-bg: get-theme-color-var( neutral-160 ) !default;
+$kendo-gantt-summary-progress-bg: k-get-theme-color-var( neutral-160 ) !default;
 /// Selected background color of the gantt summary.
 /// @group gantt
-$kendo-gantt-summary-selected-bg: get-theme-color-var( primary-50 ) !default;
+$kendo-gantt-summary-selected-bg: k-get-theme-color-var( primary-50 ) !default;
 /// Selected background color of the gantt summary progress.
 /// @group gantt
-$kendo-gantt-summary-progress-selected-bg: get-theme-color-var( primary-100 ) !default;
+$kendo-gantt-summary-progress-selected-bg: k-get-theme-color-var( primary-100 ) !default;
 
 /// Border width of the gantt task.
 /// @group gantt
@@ -100,7 +100,7 @@ $kendo-gantt-task-padding-x: map.get( $kendo-spacing, 2 ) !default;
 $kendo-gantt-task-padding-y: map.get( $kendo-spacing, 1 ) !default;
 /// Background color of the gantt task.
 /// @group gantt
-$kendo-gantt-task-bg: get-theme-color-var( neutral-110 ) !default;
+$kendo-gantt-task-bg: k-get-theme-color-var( neutral-110 ) !default;
 /// Text color of the gantt task.
 /// @group gantt
 $kendo-gantt-task-text: $kendo-color-white !default;
@@ -109,13 +109,13 @@ $kendo-gantt-task-text: $kendo-color-white !default;
 $kendo-gantt-task-border: inherit !default;
 /// Background color of the gantt task progress.
 /// @group gantt
-$kendo-gantt-task-progress-bg: get-theme-color-var( neutral-160 ) !default;
+$kendo-gantt-task-progress-bg: k-get-theme-color-var( neutral-160 ) !default;
 /// Background hover color of the gantt task progress.
 /// @group gantt
-$kendo-gantt-task-progress-hover-bg: get-theme-color-var( neutral-190 ) !default;
+$kendo-gantt-task-progress-hover-bg: k-get-theme-color-var( neutral-190 ) !default;
 /// Selected background color of the gantt task.
 /// @group gantt
-$kendo-gantt-task-selected-bg: get-theme-color-var( primary-50 ) !default;
+$kendo-gantt-task-selected-bg: k-get-theme-color-var( primary-50 ) !default;
 /// Selected text color of the gantt task.
 /// @group gantt
 $kendo-gantt-task-selected-text: $kendo-color-white !default;
@@ -124,7 +124,7 @@ $kendo-gantt-task-selected-text: $kendo-color-white !default;
 $kendo-gantt-task-selected-border: transparent !default;
 /// Selected background color of the gantt task progress.
 /// @group gantt
-$kendo-gantt-task-progress-selected-bg: get-theme-color-var( primary-100 ) !default;
+$kendo-gantt-task-progress-selected-bg: k-get-theme-color-var( primary-100 ) !default;
 
 /// Vertical padding of the gantt task actions.
 /// @group gantt
@@ -189,33 +189,33 @@ $kendo-gantt-planned-offset-resize-handler-margin-x: 1.4em !default;
 $kendo-gantt-planned-text: $kendo-color-white !default;
 /// Background color of the gantt planned tooltip.
 /// @group gantt
-$kendo-gantt-planned-bg: get-theme-color-var( primary-100 ) !default;
+$kendo-gantt-planned-bg: k-get-theme-color-var( primary-100 ) !default;
 /// Border color of the gantt planned tooltip.
 /// @group gantt
-$kendo-gantt-planned-border: get-theme-color-var( primary-100 ) !default;
+$kendo-gantt-planned-border: k-get-theme-color-var( primary-100 ) !default;
 
 /// Text color of the gantt delayed task.
 /// @group gantt
 $kendo-gantt-delayed-text: $kendo-color-white !default;
 /// Background color of the gantt delayed task.
 /// @group gantt
-$kendo-gantt-delayed-bg: get-theme-color-var( error-160 ) !default;
+$kendo-gantt-delayed-bg: k-get-theme-color-var( error-160 ) !default;
 /// Complement background color of the gantt delayed task.
 /// @group gantt
-$kendo-gantt-delayed-bg-lighter: get-theme-color-var( error-110) !default;
+$kendo-gantt-delayed-bg-lighter: k-get-theme-color-var( error-110) !default;
 /// Background hover color of the gantt delayed task.
 /// @group gantt
-$kendo-gantt-delayed-hover-bg: get-theme-color-var( error-190 ) !default;
+$kendo-gantt-delayed-hover-bg: k-get-theme-color-var( error-190 ) !default;
 
 /// Background color of the gantt advanced task.
 /// @group gantt
-$kendo-gantt-advanced-bg: get-theme-color-var( success-160 ) !default;
+$kendo-gantt-advanced-bg: k-get-theme-color-var( success-160 ) !default;
 /// Complement background color of the gantt advanced task.
 /// @group gantt
-$kendo-gantt-advanced-bg-lighter: get-theme-color-var( success-110 ) !default;
+$kendo-gantt-advanced-bg-lighter: k-get-theme-color-var( success-110 ) !default;
 /// Background hover color of the gantt advanced task.
 /// @group gantt
-$kendo-gantt-advanced-hover-bg: get-theme-color-var( success-190 ) !default;
+$kendo-gantt-advanced-hover-bg: k-get-theme-color-var( success-190 ) !default;
 
 /// Text color of the gantt delayed task action.
 /// @group gantt
@@ -235,7 +235,7 @@ $kendo-gantt-validation-tooltip-label-width: 50px !default;
 $kendo-gantt-validation-tooltip-border: var( --kendo-component-border, inherit ) !default;
 /// Border color of the gantt validation tooltip in valid state.
 /// @group gantt
-$kendo-gantt-validation-tooltip-valid-border: get-theme-color-var( success-100 ) !default;
+$kendo-gantt-validation-tooltip-valid-border: k-get-theme-color-var( success-100 ) !default;
 /// Border color of the gantt validation tooltip in invalid state.
 /// @group gantt
-$kendo-gantt-validation-tooltip-invalid-border: get-theme-color-var( error-100 ) !default;
+$kendo-gantt-validation-tooltip-invalid-border: k-get-theme-color-var( error-100 ) !default;

package/scss/grid/_theme.scss

@@ -502,7 +502,7 @@
             &.k-disabled .k-link,
             &.k-disabled .k-icon,
             &.k-disabled .k-svg-icon {
-                @include disabled(
+                @include disabled-color(
                     var( --kendo-disabled-text, inherit )
                 );
             }
@@ -522,7 +522,7 @@
 
         .k-listgroup-item {
             &.k-disabled {
-                @include disabled(
+                @include disabled-color(
                     $bg: var( --kendo-disabled-bg, inherit )
                 );
             }