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

package/scss/core/_variables.scss

@@ -1,29 +1,36 @@
+@use "sass:map";
 @use "sass:math";
 @use "sass:meta";
 
 // Options
-$enable-shadows: true !default;
-$enable-rounded: true !default;
-$enable-gradients: true !default;
-$enable-transitions: true !default;
-$enable-flex-classes: true !default;
-$enable-grid-classes: true !default;
-
-$use-calc-badge-size: true !default;
-$use-input-button-width: true !default;
-$use-input-spinner-width: true !default;
-$use-input-spinner-icon-offset: false !default;
-$use-picker-select-width: true !default;
+$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: (
+    // sass-lint:disable-block leading-zero
     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,
@@ -40,14 +47,7 @@ $kendo-spacing: (
     21: 5.25rem,
     22: 5.5rem,
     23: 5.75rem,
-    24: 6rem,
-    xs: .25rem,
-    sm: .5rem,
-    md: .75rem,
-    lg: 1rem,
-    xl: 1.5rem,
-    thin: .125rem,
-    hair: .0625rem
+    24: 6rem
 ) !default;
 
 
@@ -83,18 +83,20 @@ $kendo-letter-spacing: normal !default;
 $default-scrollbar-width: 17px !default;
 
 /// Border radius for all components.
-$kendo-border-radius: map-get( $kendo-spacing, thin ) !default;
+$kendo-border-radius: map.get( $kendo-spacing, 0.5 ) !default; // sass-lint:disable-line leading-zero
 $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;
 
 // Metrics
-$kendo-padding-x: map-get( $kendo-spacing, 2 ) !default;
-$kendo-padding-y: map-get( $kendo-spacing, 1 ) !default;
-$kendo-padding-x-sm: math.div( $kendo-padding-x, 2) !default;
-$kendo-padding-y-sm: math.div( $kendo-padding-y, 2) !default;
-$kendo-padding-x-lg: ( $kendo-padding-x * 1.5) !default;
-$kendo-padding-y-lg: ( $kendo-padding-y * 1.5) !default;
+$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; // sass-lint:disable-line leading-zero
 
 // 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;

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

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

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

@@ -1,18 +1,19 @@
-@use "utils" as *;
-@use "palettes" as *;
+@use "sass:map";
+@use "./utils" as *;
+@use "./palettes" as *;
 
 // Constants
-$white: #ffffff;
-$black: #000000;
-$rgba-transparent: rgba( 0, 0, 0, 0 );
-$gradient-transparent-to-black: rgba( black, 0), black;
-$gradient-transparent-to-white: rgba( white, 0), white;
-$gradient-black-to-transparent: black, rgba( black, 0);
-$gradient-white-to-transparent: white, rgba( white, 0);
-$gradient-rainbow: #ff0000, #ffff00, #00ff00, #00ffff, #0000ff, #ff00ff, #ff0000;
+$kendo-color-white: #ffffff;
+$kendo-color-black: #000000;
+$kendo-color-rgba-transparent: rgba( 0, 0, 0, 0 );
+$kendo-gradient-transparent-to-black: rgba( black, 0), black;
+$kendo-gradient-transparent-to-white: rgba( white, 0), white;
+$kendo-gradient-black-to-transparent: black, rgba( black, 0);
+$kendo-gradient-white-to-transparent: white, rgba( white, 0);
+$kendo-gradient-rainbow: #ff0000, #ffff00, #00ff00, #00ffff, #0000ff, #ff00ff, #ff0000;
 
 // Root styles
-$kendo-body-bg: $white !default;
+$kendo-body-bg: $kendo-color-white !default;
 $kendo-body-text: get-theme-color-var( neutral-160 ) !default;
 
 // Component styles
@@ -41,16 +42,16 @@ $kendo-subtle-text: get-theme-color-var( neutral-130 ) !default;
 
 /// Shadow for cards and grid item thumbnails.
 /// Equivalent to fluent depth 4.
-$kendo-box-shadow-depth-1: 0 1.6px 3.6px rgba( $black, 0.132 ), 0 0.3px 0.9px rgba( $black, 0.108 ) !default;
+$kendo-box-shadow-depth-1: 0 1.6px 3.6px rgba( $kendo-color-black, 0.132 ), 0 0.3px 0.9px rgba( $kendo-color-black, 0.108 ) !default;
 /// Shadow for command bars and dropdowns.
 /// Equivalent to fluent depth 8.
-$kendo-box-shadow-depth-2: 0 3.2px 7.2px rgba( $black, 0.132 ), 0 0.6px 1.8px rgba( $black, 0.108 ) !default;
+$kendo-box-shadow-depth-2: 0 3.2px 7.2px rgba( $kendo-color-black, 0.132 ), 0 0.6px 1.8px rgba( $kendo-color-black, 0.108 ) !default;
 /// Shadow for teaching callouts and hover cards / tooltips.
 /// Equivalent to fluent depth 16.
-$kendo-box-shadow-depth-3: 0 6.4px 14.4px rgba( $black, 0.132 ), 0 1.2px 3.6px rgba( $black, 0.108 ) !default;
+$kendo-box-shadow-depth-3: 0 6.4px 14.4px rgba( $kendo-color-black, 0.132 ), 0 1.2px 3.6px rgba( $kendo-color-black, 0.108 ) !default;
 /// Shadow for panels and pop up dialogs.
 /// Equivalent to fluent depth 64.
-$kendo-box-shadow-depth-4: 0 25.6px 57.6px rgba( $black, 0.22 ), 0 4.8px 14.4px rgba( $black, 0.18 ) !default;
+$kendo-box-shadow-depth-4: 0 25.6px 57.6px rgba( $kendo-color-black, 0.22 ), 0 4.8px 14.4px rgba( $kendo-color-black, 0.18 ) !default;
 
 // Link
 $kendo-link-text: get-theme-color-var( primary-100 ) !default;
@@ -106,7 +107,7 @@ $kendo-theme-colors: (
 @each $theme-color, $color-props in $kendo-theme-colors {
     // sass-lint:disable-line no-important
     // sass-lint:disable-line class-name-format
-    $_color: map-get( $color-props, text );
+    $_color: map.get( $color-props, text );
 
     .k-text-#{$theme-color} {
         color: var( --kendo-text-#{$theme-color}, #{$_color} );

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

@@ -3,11 +3,11 @@
 @use "../palettes" as *;
 
 @function get-theme-palette($name) {
-    @return map-get( $kendo-fluent-palettes, $name );
+    @return map.get( $kendo-fluent-palettes, $name );
 }
 
 @function get-theme-color($palette, $hue) {
-    @return map-get( get-theme-palette( $palette ), $hue );
+    @return map.get( get-theme-palette( $palette ), $hue );
 }
 
 @function get-theme-color-var( $name, $fallback: "inherit", $prefix: "kendo") {
@@ -36,7 +36,7 @@
         ));
 
         // Add outline if provided in the map
-        @if(list.length($indices) > 3) {
+        @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 );
 

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

@@ -1,2 +1,2 @@
-@forward "functions";
-@forward "mixins";
+@forward "./functions";
+@forward "./mixins";

package/scss/core/functions/_index.scss

@@ -1,3 +1,3 @@
 
-// @forward "misc";
-@forward "./_strings.scss";
+// @forward "./misc";
+@forward "./_strings.scss";

package/scss/core/functions/_strings.scss

@@ -1,3 +1,5 @@
+@use "sass:string";
+
 $svg-escaped-characters: (
     ("%", "%25"),
     ("<", "%3c"),
@@ -9,10 +11,10 @@ $svg-escaped-characters: (
 
 // See https://www.sassmeister.com/gist/1b4f2da5527830088e4d
 @function str-replace($string, $search, $replace: "") {
-    $index: str-index($string, $search);
+    $index: string.index($string, $search);
 
     @if $index {
-        @return str-slice($string, 1, $index - 1) + $replace + str-replace(str-slice($string, $index + str-length($search)), $search, $replace);
+        @return string.slice($string, 1, $index - 1) + $replace + str-replace(string.slice($string, $index + string.length($search)), $search, $replace);
     }
 
     @return $string;
@@ -20,11 +22,11 @@ $svg-escaped-characters: (
 
 // See https://codepen.io/kevinweber/pen/dXWoRw
 @function escape-svg($string) {
-    @if str-index($string, "data:image/svg+xml") {
+    @if string.index($string, "data:image/svg+xml") {
         @each $char, $encoded in $svg-escaped-characters {
             // Do not escape the url brackets
-            @if str-index($string, "url(") == 1 {
-                $string: url("#{str-replace(str-slice($string, 6, -3), $char, $encoded)}");
+            @if string.index($string, "url(") == 1 {
+                $string: url("#{str-replace(string.slice($string, 6, -3), $char, $encoded)}");
             } @else {
                 $string: str-replace($string, $char, $encoded);
             }
@@ -32,4 +34,4 @@ $svg-escaped-characters: (
     }
 
     @return $string;
-}
+}

package/scss/core/helpers/_base.scss

@@ -1,3 +1,4 @@
+@use "sass:map";
 @use "../mixins" as *;
 @use "../variables" as *;
 @use "../color-system" as *;
@@ -19,7 +20,7 @@
 
 // Horizontal line
 .k-hr {
-    margin-block: map-get( $kendo-spacing, 4 );
+    margin-block: map.get( $kendo-spacing, 4 );
     padding: 0;
     height: 0;
     border-width: 1px 0 0;
@@ -54,7 +55,6 @@
     font-size: 0;
     line-height: 0;
     text-align: center;
-    -ms-high-contrast-adjust: none;
 }
 
 .k-image {
@@ -119,14 +119,6 @@ kendo-sortable {
     display: none !important;
 }
 
-// Placeholder
-.k-placeholder-line {
-    width: 100%;
-    height: 10px;
-    background-color: get-theme-color-var( neutral-20 );
-    display: inline-block;
-}
-
 // Dirty indicator
 .k-dirty {
     margin: 0;

package/scss/core/helpers/_extra.scss

@@ -10,8 +10,8 @@
 }
 
 
-/// @name k-sr-only
-/// @description This class could be assigned to elements which should be visually hidden, but remain accessible for screen readers.
+/// This class could be assigned to elements which should be visually hidden, but remain accessible for screen readers.
+/// @name. k-sr-only
 /// @group extra
 .k-sr-only {
     position: absolute;

package/scss/core/helpers/_index.scss

@@ -1,12 +1,12 @@
-@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";
+@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/core/helpers/_selection.scss

@@ -18,10 +18,10 @@
 }
 
 .k-marquee-color {
-    color: $white;
+    color: $kendo-color-white;
     background-color: get-theme-color-var( primary-100 );
     opacity: .3;
 }
 .k-marquee-text {
-    color: $white;
+    color: $kendo-color-white;
 }

package/scss/core/helpers/_spacer.scss

@@ -1,12 +1,12 @@
-/// @name k-spacer
-/// @description This is equivalent to `flex: 1 0 auto;`. If every other element has a fixed size in a flex container, the spacer will take up the remaining space.
+/// This is equivalent to `flex: 1 0 auto;`. If every other element has a fixed size in a flex container, the spacer will take up the remaining space.
+/// @name .k-spacer
 /// @group spacer
 .k-spacer {
     flex: 1 0 auto;
 }
 
-/// @name k-spacer-sized
-/// @description This is equivalent to `flex-grow: 0;`. The spacer will not take any of the remaining space in a flex container.
+/// This is equivalent to `flex-grow: 0;`. The spacer will not take any of the remaining space in a flex container.
+/// @name .k-spacer-sized
 /// @group spacer
 .k-spacer-sized {
     flex-grow: 0;

package/scss/core/mixins/_border-radius.scss

@@ -2,59 +2,59 @@
 
 // Border radius
 @mixin border-radius( $radius: null ) {
-    @if $enable-rounded {
+    @if $kendo-enable-rounded {
         border-radius: $radius;
     }
 }
 
 @mixin border-top-radius( $radius: null ) {
-    @if $enable-rounded {
+    @if $kendo-enable-rounded {
         border-top-left-radius: $radius;
         border-top-right-radius: $radius;
     }
 }
 
 @mixin border-right-radius( $radius: null ) {
-    @if $enable-rounded {
+    @if $kendo-enable-rounded {
         border-top-right-radius: $radius;
         border-bottom-right-radius: $radius;
     }
 }
 
 @mixin border-bottom-radius( $radius: null ) {
-    @if $enable-rounded {
+    @if $kendo-enable-rounded {
         border-bottom-right-radius: $radius;
         border-bottom-left-radius: $radius;
     }
 }
 
 @mixin border-left-radius( $radius: null ) {
-    @if $enable-rounded {
+    @if $kendo-enable-rounded {
         border-top-left-radius: $radius;
         border-bottom-left-radius: $radius;
     }
 }
 
 @mixin border-top-radius-only( $radius: null ) {
-    @if $enable-rounded {
+    @if $kendo-enable-rounded {
         border-radius: $radius $radius 0 0;
     }
 }
 
 @mixin border-right-radius-only( $radius: null ) {
-    @if $enable-rounded {
+    @if $kendo-enable-rounded {
         border-radius: 0 $radius $radius 0;
     }
 }
 
 @mixin border-bottom-radius-only( $radius: null ) {
-    @if $enable-rounded {
+    @if $kendo-enable-rounded {
         border-radius: 0 0 $radius $radius;
     }
 }
 
 @mixin border-left-radius-only( $radius: null ) {
-    @if $enable-rounded {
+    @if $kendo-enable-rounded {
         border-radius: $radius 0 0 $radius;
     }
 }

package/scss/core/mixins/_box-shadow.scss

@@ -1,7 +1,8 @@
+@use "sass:list";
 @use "../_variables.scss" as *;
 
 @mixin box-shadow( $shadow... ) {
-    @if $enable-shadows and nth($shadow, 1) {
+    @if $kendo-enable-shadows and list.nth( $shadow, 1 ) {
         box-shadow: $shadow;
     }
 }

package/scss/core/mixins/_decoration.scss

@@ -16,7 +16,7 @@
 }
 
 @mixin linear-gradient( $gradient: null ) {
-    @if $gradient and $enable-gradients {
+    @if $gradient and $kendo-enable-gradients {
         @if $gradient == none {
             background-image: none;
         }

package/scss/core/mixins/_index.scss

@@ -1,6 +1,6 @@
-@forward "decoration";
-@forward "disabled";
-@forward "box-shadow";
-@forward "border-radius";
-@forward "typography";
-@forward "hide-scrollbar";
+@forward "./decoration";
+@forward "./disabled";
+@forward "./box-shadow";
+@forward "./border-radius";
+@forward "./typography";
+@forward "./hide-scrollbar";

package/scss/core/module-system/index.scss

@@ -1,13 +1,13 @@
 @use "sass:list";
 @use "sass:map";
-@use "_components.scss" as _;
+@use "./_components.scss" as _;
 
 $components: _.$components !default;
 $_deps: ();
 $_imported: ();
 
 @mixin register( $name: null, $dependencies: null ) {
-    @if (list.index( $components, $name) != null) {
+    @if ( list.index( $components, $name) != null ) {
         $_deps: map.set( $_deps, $name, $dependencies );
 
         @if $dependencies {

package/scss/dataviz/_layout.scss

@@ -1,6 +1,7 @@
+@use "sass:meta";
 @use "sass:string";
 @use "../core/" as *;
-@use "_variables.scss" as *;
+@use "./_variables.scss" as *;
 @use "../tooltip/_variables.scss" as *;
 
 @mixin kendo-dataviz--layout() {
@@ -43,7 +44,7 @@
         font-size: var( --kendo-chart-font-size, #{$kendo-chart-font-size} );
         line-height: var( --kendo-chart-line-height, #{$kendo-chart-line-height} );
         -webkit-touch-callout: none;
-        -webkit-tap-highlight-color: $rgba-transparent;
+        -webkit-tap-highlight-color: $kendo-color-rgba-transparent;
     }
 
     .k-chart,
@@ -98,8 +99,8 @@
     .k-chart-tooltip td {
         width: auto;
         text-align: left;
-        padding-inline: var( --kendo-padding-x-sm, #{$kendo-padding-x-sm} ) ;
-        padding-block: var( --kendo-padding-y-sm, #{$kendo-padding-y-sm} ) ;
+        padding-inline: var( --kendo-padding-x-sm, #{$kendo-padding-sm-x} );
+        padding-block: var( --kendo-padding-y-sm, #{$kendo-padding-sm-y} );
         line-height: var( --kendo-chart-tooltip-line-height, #{$kendo-chart-tooltip-line-height} );
         vertical-align: middle;
     }
@@ -162,9 +163,9 @@
     }
 
     .k-left-handle div {
-        margin-block-start: calc( var( --kendo-selection-handle-size, #{$kendo-selection-handle-size} ) * -1  );
+        margin-block-start: calc( var( --kendo-selection-handle-size, #{$kendo-selection-handle-size} ) * -1 );
         margin-inline-start: calc( var( --kendo-selection-handle-size, #{$kendo-selection-handle-size} ) / -1.5 );
-        padding-block-start: calc( var( --kendo-selection-handle-size, #{$kendo-selection-handle-size} ) * 2 ) ;
+        padding-block-start: calc( var( --kendo-selection-handle-size, #{$kendo-selection-handle-size} ) * 2 );
         padding-inline-end: calc( ( var( --kendo-selection-handle-size, #{$kendo-selection-handle-size} ) / 1.5 ) * 2 );
     }
 
@@ -222,9 +223,6 @@
 
     .k-chart-dragging {
         user-select: none;
-        -moz-user-select: none;
-        -webkit-user-select: none;
-        -ms-user-select: none;
     }
 
     .k-chart-donut-center {
@@ -271,11 +269,6 @@
         height: 100%;
     }
 
-    // IE8-
-    .k-diagram img {
-        box-sizing: content-box;
-    }
-
     // Base
     .k-treemap {
         height: 400px;
@@ -289,7 +282,7 @@
         display: block;
         overflow: hidden;
         -webkit-touch-callout: none;
-        -webkit-tap-highlight-color: $rgba-transparent;
+        -webkit-tap-highlight-color: $kendo-color-rgba-transparent;
 
         // Tile
         .k-treemap-tile {
@@ -309,8 +302,8 @@
 
         // Title
         .k-treemap-title {
-            padding-inline: var( --kendo-padding-x-sm, #{$kendo-padding-x-sm} );
-            padding-block: var( --kendo-padding-y-sm, #{$kendo-padding-y-sm} );
+            padding-inline: var( --kendo-padding-x-sm, #{$kendo-padding-sm-x} );
+            padding-block: var( --kendo-padding-y-sm, #{$kendo-padding-sm-y} );
             border-width: 0 0 1px;
             border-style: solid;
             border-color: inherit;
@@ -319,8 +312,8 @@
             background-repeat: repeat-x;
         }
         .k-treemap-title-vertical {
-            padding-inline: var( --kendo-padding-y-sm, #{$kendo-padding-y-sm} );
-            padding-block: var( --kendo-padding-x-sm, #{$kendo-padding-x-sm} );
+            padding-inline: var( --kendo-padding-y-sm, #{$kendo-padding-sm-y} );
+            padding-block: var( --kendo-padding-x-sm, #{$kendo-padding-sm-x} );
             width: var( --kendo-line-height-em, #{$kendo-line-height-em} );
             white-space: nowrap;
             overflow: hidden;
@@ -351,16 +344,16 @@
             right: 0;
         }
         .k-treemap-title + .k-treemap-wrap {
-            inset-block-start: calc( #{$kendo-padding-y-sm} * 2 + (#{$kendo-line-height} * #{$kendo-font-size}) + 1px);
+            inset-block-start: calc( #{$kendo-padding-sm-y} * 2 + (#{$kendo-line-height} * #{$kendo-font-size}) + 1px);
         }
         .k-treemap-title-vertical + .k-treemap-wrap {
-            inset-inline-start: calc( #{$kendo-padding-y-sm} * 2 + (#{$kendo-line-height} * #{$kendo-font-size}) + 1px);
+            inset-inline-start: calc( #{$kendo-padding-sm-y} * 2 + (#{$kendo-line-height} * #{$kendo-font-size}) + 1px);
         }
 
 
         // Leaf
         .k-leaf {
-            padding: var( --kendo-padding-x-sm, #{$kendo-padding-x-sm} );
+            padding: var( --kendo-padding-x-sm, #{$kendo-padding-sm-x} );
         }
     }
 
@@ -392,10 +385,7 @@
 
     // export variables to allow use in scripts
     $exported: (
-        accent: get-theme-color( primary, 100 ),
-        accent-contrast: $white,
-        primary: get-theme-color( primary, 100 ),
-        primary-contrast: $white,
+        primary-contrast: $kendo-color-white,
         base: $kendo-component-bg,
         background: $kendo-component-bg,
 
@@ -456,7 +446,7 @@
     );
 
     @each $name, $value in $exported {
-        $type: type-of($value);
+        $type: meta.type-of($value);
 
         .k-var--#{$name} {
             @if $type == "color" {

package/scss/dataviz/_theme.scss

@@ -1,5 +1,5 @@
 @use "../core/" as *;
-@use "_variables.scss" as *;
+@use "./_variables.scss" as *;
 
 @mixin kendo-dataviz--theme() {
 
@@ -45,7 +45,7 @@
     }
 
     .k-var--chart-error-bars-background {
-        @include fill( $bg: var( --kendo-error-bars-background, #{$kendo-error-bars-background} ) );
+        @include fill( $bg: var( --kendo-error-bars-background, #{$kendo-color-error-bars-background} ) );
     }
 
     // Elements

package/scss/dataviz/_variables.scss

@@ -1,3 +1,4 @@
+@use "sass:map";
 @use "../core/" as *;
 
 /// The first base series color and its light and dark shades.
@@ -154,14 +155,14 @@ $kendo-chart-border: var( --kendo-component-border, initial ) !default;
 
 /// The text color of the chart tooltip.
 /// @group charts
-$kendo-chart-tooltip-color: $white !default;
+$kendo-chart-tooltip-color: $kendo-color-white !default;
 /// The inverse text color of the chart tooltip.
 /// @group charts
-$kendo-chart-tooltip-color-inverse: $black !default;
+$kendo-chart-tooltip-color-inverse: $kendo-color-black !default;
 
 /// The background color of the chart crosshairs.
 /// @group charts
-$kendo-chart-crosshair-background: $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;
@@ -203,7 +204,7 @@ $kendo-chart-handle-hover-border: var( --kendo-hover-border, initial ) !default;
 
 /// The color of the chart error bars.
 /// @group charts
-$kendo-error-bars-background: get-theme-color-var( neutral-110 ) !default;
+$kendo-color-error-bars-background: get-theme-color-var( neutral-110 ) !default;
 
 /// The size of the selection handle of the chart component.
 /// @group charts
@@ -236,7 +237,7 @@ $kendo-treemap-border: var( --kendo-component-border, initial ) !default;
 $kendo-treemap-title-bg: get-theme-color-var( neutral-10 ) !default;
 /// The text color of the treemap title.
 /// @group charts
-$kendo-treemap-title-text: $black !default;
+$kendo-treemap-title-text: $kendo-color-black !default;
 /// The border color of the treemap title.
 /// @group charts
 $kendo-treemap-title-border: var( --kendo-component-border, initial ) !default;