@progress/kendo-theme-material 10.6.0 → 11.0.0-dev.0

package/scss/chat/_variables.scss

@@ -59,7 +59,7 @@ $kendo-chat-timestamp-line-height: var( --kendo-line-height-lg, normal ) !defaul
 $kendo-chat-timestamp-transform: uppercase !default;
 /// The text color of the Chat timestamp.
 /// @group chat
-$kendo-chat-timestamp-text: $kendo-subtle-text !default;
+$kendo-chat-timestamp-text: k-color(subtle) !default;
 /// The background color of the Chat timestamp.
 /// @group chat
 $kendo-chat-timestamp-bg: null !default;
@@ -116,7 +116,7 @@ $kendo-chat-toolbar-padding-y: $kendo-toolbar-md-padding-y !default;
 $kendo-chat-toolbar-spacing: $kendo-toolbar-md-spacing !default;
 /// The background color of the Chat Toolbar.
 /// @group chat
-$kendo-chat-toolbar-bg: if($kendo-enable-color-system, k-color( surface ), k-try-shade( $kendo-button-bg, .5 )) !default;
+$kendo-chat-toolbar-bg: k-color(surface) !default;
 /// The text color of the Chat Toolbar.
 /// @group chat
 $kendo-chat-toolbar-text: $kendo-toolbar-text !default;
@@ -140,20 +140,20 @@ $kendo-chat-quick-reply-line-height: $kendo-chat-bubble-line-height !default;
 
 /// The background color of the Chat.
 /// @group chat
-$kendo-chat-bg: $kendo-app-bg !default;
+$kendo-chat-bg: k-color(app-surface) !default;
 /// The text color of the Chat.
 /// @group chat
-$kendo-chat-text: $kendo-component-text !default;
+$kendo-chat-text: k-color(on-app-surface) !default;
 /// The border color of the Chat.
 /// @group chat
-$kendo-chat-border: $kendo-component-border !default;
+$kendo-chat-border: k-color(border) !default;
 
 /// The background color of the Chat bubble.
 /// @group chat
-$kendo-chat-bubble-bg: $kendo-component-bg !default;
+$kendo-chat-bubble-bg: k-color(surface-alt) !default;
 /// The text color of the Chat bubble.
 /// @group chat
-$kendo-chat-bubble-text: $kendo-component-text !default;
+$kendo-chat-bubble-text: k-color(on-app-surface) !default;
 /// The border color of the Chat bubble.
 /// @group chat
 $kendo-chat-bubble-border: $kendo-chat-bubble-bg !default;
@@ -169,10 +169,10 @@ $kendo-chat-bubble-selected-shadow: k-elevation(3) !default;
 
 /// The background color of the Chat alt bubble.
 /// @group chat
-$kendo-chat-alt-bubble-bg: $kendo-color-primary !default;
+$kendo-chat-alt-bubble-bg: k-color(primary) !default;
 /// The text color of the Chat alt bubble.
 /// @group chat
-$kendo-chat-alt-bubble-text: if($kendo-enable-color-system, k-color( on-primary ), k-contrast-color( $kendo-chat-alt-bubble-bg )) !default;
+$kendo-chat-alt-bubble-text: k-color(on-primary) !default;
 /// The border color of the Chat alt bubble.
 /// @group chat
 $kendo-chat-alt-bubble-border: $kendo-chat-alt-bubble-bg !default;
@@ -191,20 +191,20 @@ $kendo-chat-alt-bubble-selected-shadow: k-elevation(3) !default;
 $kendo-chat-quick-reply-bg: transparent !default;
 /// The text color of the Chat quick reply.
 /// @group chat
-$kendo-chat-quick-reply-text: $kendo-color-primary !default;
+$kendo-chat-quick-reply-text: k-color(primary) !default;
 /// The border color of the Chat quick reply.
 /// @group chat
-$kendo-chat-quick-reply-border: $kendo-color-primary !default;
+$kendo-chat-quick-reply-border: k-color(primary) !default;
 
 /// The background color of the hovered Chat quick reply.
 /// @group chat
-$kendo-chat-quick-reply-hover-bg: $kendo-color-primary !default;
+$kendo-chat-quick-reply-hover-bg: k-color(primary) !default;
 /// The text color of the hovered Chat quick reply.
 /// @group chat
-$kendo-chat-quick-reply-hover-text: $kendo-color-primary-contrast !default;
+$kendo-chat-quick-reply-hover-text: k-color(on-primary) !default;
 /// The border color of the hovered Chat quick reply.
 /// @group chat
-$kendo-chat-quick-reply-hover-border: $kendo-color-primary !default;
+$kendo-chat-quick-reply-hover-border: k-color(primary) !default;
 
 /// The shadow blur of the focused Chat quick reply.
 /// @group chat

package/scss/checkbox/_theme.scss

@@ -9,7 +9,7 @@
     // Checkbox
     // Disabled state
     .k-checkbox:disabled + .k-checkbox-label {
-        color: if($kendo-enable-color-system, k-color( subtle ), if( $kendo-is-dark-theme, $light-secondary-text, $dark-secondary-text ));
+        color: k-color(subtle);
         opacity: 1;
         filter: none;
     }

package/scss/checkbox/_variables.scss

@@ -66,7 +66,7 @@ $kendo-checkbox-bg: unset !default;
 $kendo-checkbox-text: null !default;
 /// The border color of the CheckBox.
 /// @group checkbox
-$kendo-checkbox-border: if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 44%, transparent), rgba( if( $kendo-is-dark-theme, $kendo-color-white, $kendo-color-black ), .54 )) !default;
+$kendo-checkbox-border: color-mix(in srgb, k-color(on-app-surface) 44%, transparent) !default;
 
 /// The background color of the hovered CheckBox.
 /// @group checkbox
@@ -80,10 +80,10 @@ $kendo-checkbox-hover-border: null !default;
 
 /// The background color of the checked CheckBox.
 /// @group checkbox
-$kendo-checkbox-checked-bg: $kendo-color-primary !default;
+$kendo-checkbox-checked-bg: k-color(primary) !default;
 /// The text color of the checked CheckBox.
 /// @group checkbox
-$kendo-checkbox-checked-text: if($kendo-enable-color-system, k-color( on-primary ), k-contrast-color( $kendo-checkbox-checked-bg )) !default;
+$kendo-checkbox-checked-text: k-color(on-primary) !default;
 /// The border color of the checked CheckBox.
 /// @group checkbox
 $kendo-checkbox-checked-border: $kendo-checkbox-checked-bg !default;
@@ -119,7 +119,7 @@ $kendo-checkbox-disabled-bg: null !default;
 $kendo-checkbox-disabled-text: null !default;
 /// The border color of the disabled CheckBox.
 /// @group checkbox
-$kendo-checkbox-disabled-border: if($kendo-enable-color-system, k-color( base-emphasis ), k-try-shade( $kendo-component-bg, 4 )) !default;
+$kendo-checkbox-disabled-border: k-color(base-emphasis) !default;
 
 
 /// The background color of the disabled and checked CheckBox.
@@ -127,7 +127,7 @@ $kendo-checkbox-disabled-border: if($kendo-enable-color-system, k-color( base-em
 $kendo-checkbox-disabled-checked-bg: $kendo-checkbox-disabled-border !default;
 /// The text color of the disabled and checked CheckBox.
 /// @group checkbox
-$kendo-checkbox-disabled-checked-text: if($kendo-enable-color-system, k-color( on-primary ), k-contrast-color( $kendo-checkbox-disabled-checked-bg )) !default;
+$kendo-checkbox-disabled-checked-text: k-color(on-primary) !default;
 /// The border color of the disabled and checked CheckBox.
 /// @group checkbox
 $kendo-checkbox-disabled-checked-border: $kendo-checkbox-disabled-checked-bg !default;
@@ -137,10 +137,10 @@ $kendo-checkbox-disabled-checked-border: $kendo-checkbox-disabled-checked-bg !de
 $kendo-checkbox-invalid-bg: null !default;
 /// The text color of an invalid CheckBox.
 /// @group checkbox
-$kendo-checkbox-invalid-text: $kendo-invalid-text !default;
+$kendo-checkbox-invalid-text: k-color(error) !default;
 /// The border color of an invalid CheckBox.
 /// @group checkbox
-$kendo-checkbox-invalid-border: $kendo-invalid-border !default;
+$kendo-checkbox-invalid-border: k-color(error) !default;
 
 
 // CheckBox indicator
@@ -192,7 +192,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: $kendo-color-primary !default;
+$kendo-checkbox-ripple-bg: k-color(primary) !default;
 /// The opacity of the CheckBox' ripple.
 /// @group checkbox
 $kendo-checkbox-ripple-opacity: .2 !default;

package/scss/chip/_theme.scss

@@ -30,59 +30,59 @@
                 &:focus,
                 &.k-focus {
                     @include box-shadow( none );
-                    @include fill( $bg: if($kendo-enable-color-system, k-color( #{$name}-subtle-active ), k-try-tint( $color, 88% )) );
+                    @include fill( $bg: k-color( #{$name}-subtle-active ));
                 }
             } @else if ($name == "warning") {
                 @include fill(
-                    $color: if($kendo-enable-color-system, k-color( on-app-surface ), if( $kendo-is-dark-theme, k-try-shade( $color, 50% ), k-color( on-app-surface )))
+                    $color: k-color( on-app-surface )
                 );
 
                 &:focus,
                 &.k-focus {
                     @include box-shadow( none );
-                    @include fill( $bg: if($kendo-enable-color-system, k-color( #{$name}-subtle-active ), k-try-tint( $color, 65% )) );
+                    @include fill( $bg: k-color( #{$name}-subtle-active ));
                 }
 
                 &:hover,
                 &.k-hover {
                     @include fill(
-                        $bg: if($kendo-enable-color-system, k-color( #{$name}-subtle-hover ), k-try-tint( $color, 80% )),
-                        $color: if($kendo-enable-color-system, k-color( on-app-surface ), if( $kendo-is-dark-theme, k-try-shade( $color, 50% ), k-color( on-app-surface )))
+                        $bg: k-color( #{$name}-subtle-hover ),
+                        $color: k-color( on-app-surface )
                     );
                 }
 
                 &.k-selected {
                     @include fill(
-                        $bg: if($kendo-enable-color-system, k-color( #{$name}-subtle-active ), k-try-tint( $color, 65% )),
-                        $color: if($kendo-enable-color-system, k-color( on-app-surface ), if( $kendo-is-dark-theme, k-try-shade( $color, 50% ), k-color( on-app-surface )))
+                        $bg: k-color( #{$name}-subtle-active ),
+                        $color: k-color( on-app-surface )
                     );
                 }
             } @else {
                 @include fill(
-                    $color: if($kendo-enable-color-system, k-color( #{$name}-on-surface ), k-try-shade( $color, 50% ))
+                    $color: k-color( #{$name}-on-surface )
                 );
 
                 &:focus,
                 &.k-focus {
                     @include box-shadow( none );
                     @include fill(
-                        $bg: if($kendo-enable-color-system, k-color( #{$name}-subtle-active ), k-try-tint( $color, 65% )),
-                        $color: if($kendo-enable-color-system, k-color( #{$name}-on-subtle ), k-try-shade( $color, 50% ))
+                        $bg: k-color( #{$name}-subtle-active ),
+                        $color: k-color( #{$name}-on-subtle )
                     );
                 }
 
                 &:hover,
                 &.k-hover {
                     @include fill(
-                        $bg: if($kendo-enable-color-system, k-color( #{$name}-subtle-hover ), k-try-tint( $color, 80% )),
-                        $color: if($kendo-enable-color-system, k-color( #{$name}-on-subtle ), k-try-shade( $color, 50% ))
+                        $bg: k-color( #{$name}-subtle-hover ),
+                        $color: k-color( #{$name}-on-subtle )
                     );
                 }
 
                 &.k-selected {
                     @include fill(
-                        $bg: if($kendo-enable-color-system, k-color( #{$name}-subtle-active ), k-try-tint( $color, 65% )),
-                        $color: if($kendo-enable-color-system, k-color( #{$name}-on-subtle ), k-try-shade( $color, 50% ))
+                        $bg: k-color( #{$name}-subtle-active ),
+                        $color: k-color( #{$name}-on-subtle )
                     );
                 }
             }

package/scss/chip/_variables.scss

@@ -96,21 +96,21 @@ $kendo-chip-sizes: (
 
 /// The base background of the Chip.
 /// @group chip
-$kendo-chip-base-bg: if($kendo-enable-color-system, k-color( base-subtle ), if( $kendo-is-dark-theme, $kendo-color-white, $kendo-color-black)) !default;
+$kendo-chip-base-bg: k-color(base-subtle) !default;
 
 /// The theme colors map for the Chip.
 /// @group chip
 $kendo-chip-theme-colors: (
     "base": $kendo-chip-base-bg,
-    "error": map.get( $kendo-theme-colors, "error" ),
-    "info": map.get( $kendo-theme-colors, "info" ),
-    "warning": map.get( $kendo-theme-colors, "warning" ),
-    "success": map.get( $kendo-theme-colors, "success" )
+    "error": k-color(error),
+    "info": k-color(info),
+    "warning": k-color(warning),
+    "success": k-color(success)
 ) !default;
 
 /// The base background color of the solid Chip.
 /// @group chip
-$kendo-chip-solid-bg: if($kendo-enable-color-system, k-color( base-subtle ), if( $kendo-is-dark-theme, $kendo-button-bg, k-try-tint( $kendo-chip-base-bg, 92% ))) !default;
+$kendo-chip-solid-bg: k-color(base-subtle) !default;
 /// The base text color of the solid Chip.
 /// @group chip
 $kendo-chip-solid-text: $kendo-button-text !default;
@@ -126,31 +126,31 @@ $kendo-chip-solid-gradient: $kendo-button-gradient !default;
 
 /// The base background color of the focused solid Chip.
 /// @group chip
-$kendo-chip-solid-focus-bg: if($kendo-enable-color-system, k-color( base-subtle-active ), k-try-tint( $kendo-chip-base-bg, 80% )) !default;
+$kendo-chip-solid-focus-bg: k-color(base-subtle-active) !default;
 /// The base text color of the focused solid Chip.
 /// @group chip
 $kendo-chip-solid-focus-text: null !default;
 
 /// The base background color of the hovered solid Chip.
 /// @group chip
-$kendo-chip-solid-hover-bg: if($kendo-enable-color-system, k-color( base-subtle-hover ), k-try-tint( $kendo-chip-base-bg, 84% )) !default;
+$kendo-chip-solid-hover-bg: k-color(base-subtle-hover) !default;
 /// The base text color of the hovered solid Chip.
 /// @group chip
 $kendo-chip-solid-hover-text: null !default;
 
 /// The base background color of the selected solid Chip.
 /// @group chip
-$kendo-chip-solid-selected-bg: if($kendo-enable-color-system, k-color( base-subtle-active ), k-try-tint( $kendo-chip-base-bg, 76% )) !default;
+$kendo-chip-solid-selected-bg: k-color(base-subtle-active) !default;
 /// The base text color of the selected solid Chip.
 /// @group chip
 $kendo-chip-solid-selected-text: null !default;
 
 /// The base background color of the outline Chip.
 /// @group chip
-$kendo-chip-outline-bg: $kendo-component-bg !default;
+$kendo-chip-outline-bg: k-color(surface-alt) !default;
 /// The base text color of the outline Chip.
 /// @group chip
-$kendo-chip-outline-text: if($kendo-enable-color-system, k-color( base-on-surface ), $kendo-chip-solid-text) !default;
+$kendo-chip-outline-text: k-color(base-on-surface) !default;
 /// The base border color of the outline Chip.
 /// @group chip
 $kendo-chip-outline-border: $kendo-chip-outline-text !default;
@@ -160,14 +160,14 @@ $kendo-chip-outline-shadow: unset !default;
 
 /// The base background color of the hovered outline Chip.
 /// @group chip
-$kendo-chip-outline-hover-bg: if($kendo-enable-color-system, k-color( base-subtle-hover ), k-try-tint( $kendo-chip-base-bg, 92% )) !default;
+$kendo-chip-outline-hover-bg: k-color(base-subtle-hover) !default;
 /// The base text color of the hovered outline Chip.
 /// @group chip
-$kendo-chip-outline-hover-text: if($kendo-enable-color-system, k-color( base-on-subtle ), k-contrast-color( $kendo-chip-outline-hover-bg )) !default;
+$kendo-chip-outline-hover-text: k-color(base-on-subtle) !default;
 
 /// The base background color of the selected outline Chip.
 /// @group chip
-$kendo-chip-outline-selected-bg: if($kendo-enable-color-system, k-color( base-subtle-active ), k-try-tint( $kendo-chip-base-bg, 84% )) !default;
+$kendo-chip-outline-selected-bg: k-color(base-subtle-active) !default;
 /// The base text color of the selected outline Chip.
 /// @group chip
 $kendo-chip-outline-selected-text: $kendo-chip-outline-hover-text !default;

package/scss/color-preview/_variables.scss

@@ -6,11 +6,11 @@ $kendo-color-preview-border-radius: k-border-radius(md) !default;
 $kendo-color-preview-border-width: 1px !default;
 $kendo-color-preview-bg: null !default;
 $kendo-color-preview-text: null !default;
-$kendo-color-preview-border: $kendo-component-border !default;
-$kendo-color-preview-hover-border: $kendo-hover-border !default;
+$kendo-color-preview-border: k-color(border) !default;
+$kendo-color-preview-hover-border: k-color(border) !default;
 
 $kendo-color-preview-no-color-bg: $kendo-color-white !default;
-$kendo-color-preview-no-color-text: $kendo-color-error !default;
+$kendo-color-preview-no-color-text: k-color(error) !default;
 $kendo-color-preview-no-color-border: null !default;
 
 $kendo-color-preview-no-color-image: k-escape-svg( url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='20' height='20' version='1.1'><line x1='0' x2='20' y1='0' y2='20' stroke='#{$kendo-color-preview-no-color-text}' stroke-width='1'/></svg>") ) !default;

package/scss/coloreditor/_variables.scss

@@ -36,17 +36,17 @@ $kendo-color-editor-font-size: var( --kendo-font-size, inherit )  !default;
 $kendo-color-editor-line-height: var( --kendo-line-height, normal ) !default;
 /// The text color of the ColorEditor.
 /// @group color-editor
-$kendo-color-editor-text: $kendo-component-text !default;
+$kendo-color-editor-text: k-color(on-app-surface) !default;
 /// The background color of the ColorEditor.
 /// @group color-editor
-$kendo-color-editor-bg: $kendo-component-bg !default;
+$kendo-color-editor-bg: k-color(surface-alt) !default;
 /// The border color of the ColorEditor.
 /// @group color-editor
-$kendo-color-editor-border: $kendo-component-border !default;
+$kendo-color-editor-border: k-color(border) !default;
 
 /// The border color of the focused ColorEditor.
 /// @group color-editor
-$kendo-color-editor-focus-border: $kendo-hover-border !default;
+$kendo-color-editor-focus-border: k-color(border) !default;
 /// The box shadow of the focused ColorEditor.
 /// @group color-editor
 $kendo-color-editor-focus-shadow: k-elevation(3) !default;

package/scss/colorgradient/_variables.scss

@@ -36,13 +36,13 @@ $kendo-color-gradient-font-size: var( --kendo-font-size, inherit ) !default;
 $kendo-color-gradient-line-height: var( --kendo-line-height, normal ) !default;
 /// The text color of the ColorGradient.
 /// @group color-gradient
-$kendo-color-gradient-text: $kendo-component-text !default;
+$kendo-color-gradient-text: k-color(on-app-surface) !default;
 /// The background color of the ColorGradient.
 /// @group color-gradient
-$kendo-color-gradient-bg: $kendo-component-bg !default;
+$kendo-color-gradient-bg: k-color(surface-alt) !default;
 /// The border color of the ColorGradient.
 /// @group color-gradient
-$kendo-color-gradient-border: $kendo-component-border !default;
+$kendo-color-gradient-border: k-color(border) !default;
 
 /// The vertical padding of the small ColorGradient.
 /// @group color-gradient
@@ -85,7 +85,7 @@ $kendo-color-gradient-lg-gap: k-spacing(4.5) !default;
 
 /// The border color of the focused ColorGradient.
 /// @group color-gradient
-$kendo-color-gradient-focus-border: $kendo-hover-border !default;
+$kendo-color-gradient-focus-border: k-color(border) !default;
 /// The box shadow of the focused ColorGradient.
 /// @group color-gradient
 $kendo-color-gradient-focus-shadow: k-elevation(3) !default;
@@ -200,7 +200,7 @@ $kendo-color-gradient-input-gap: k-spacing(2) !default;
 $kendo-color-gradient-input-label-gap: k-spacing(1) !default;
 /// The text color of the ColorGradient input labels.
 /// @group color-gradient
-$kendo-color-gradient-input-label-text: $kendo-subtle-text !default;
+$kendo-color-gradient-input-label-text: k-color(subtle) !default;
 
 /// The width of the small ColorGradient input.
 /// @group color-gradient

package/scss/core/_index.scss

@@ -17,7 +17,6 @@
 @forward "../_variables.scss";
 
 @forward "@progress/kendo-theme-core/scss/index.scss" with (
-    $kendo-enable-color-system: $kendo-enable-color-system !default,
     // Color System
     $_default-colors: $kendo-colors,
     $kendo-colors: $kendo-colors !default,
@@ -48,5 +47,11 @@
     $kendo-spacing: $kendo-spacing !default,
 );
 
-// Backward compatibility
-@forward "./color-system/_swatch-legacy.scss";
+// Global disabled styles
+:root {
+    --kendo-disabled-text: var(--kendo-color-on-app-surface, #212121);
+    --kendo-disabled-bg: unset;
+    --kendo-disabled-border: unset;
+    --kendo-disabled-opacity: .6;
+    --kendo-disabled-filter: grayscale(.1);
+}

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

@@ -1,9 +1,6 @@
 @use "sass:map";
 @use "./_palettes.scss" as *;
 
-// Config
-$kendo-enable-color-system: true !default;
-
 // Colors
 $_default-colors: (
     // Misc

package/scss/dataviz/_variables.scss

@@ -1,57 +1,56 @@
 @use "sass:color";
 @use "../core/_index.scss" as *;
 @use "../core/functions/index.import.scss" as *;
-@use "../core/color-system/_functions.scss" as *;
 
 // Chart
 
 /// The first base series color and its light and dark shades.
 /// @group charts
-$kendo-series-a: if($kendo-enable-color-system, k-color( series-a ), get-base-hue( purple, 500 )) !default;
-$kendo-series-a-dark: if($kendo-enable-color-system, k-color( series-a-bold ), color.mix(black, $kendo-series-a, 25%)) !default;
-$kendo-series-a-darker: if($kendo-enable-color-system, k-color( series-a-bolder ), color.mix(black, $kendo-series-a, 50%)) !default;
-$kendo-series-a-light: if($kendo-enable-color-system, k-color( series-a-subtle ), color.mix(white, $kendo-series-a, 25%)) !default;
-$kendo-series-a-lighter: if($kendo-enable-color-system, k-color( series-a-subtler ), color.mix(white, $kendo-series-a, 50%)) !default;
+$kendo-series-a: k-color(series-a) !default;
+$kendo-series-a-dark: k-color(series-a-bold) !default;
+$kendo-series-a-darker: k-color(series-a-bolder) !default;
+$kendo-series-a-light: k-color(series-a-subtle) !default;
+$kendo-series-a-lighter: k-color(series-a-subtler) !default;
 
 /// The second base series color and its light and dark shades.
 /// @group charts
-$kendo-series-b: if($kendo-enable-color-system, k-color( series-b ), get-base-hue( blue, 500 )) !default;
-$kendo-series-b-dark: if($kendo-enable-color-system, k-color( series-b-bold ), color.mix(black, $kendo-series-b, 25%)) !default;
-$kendo-series-b-darker: if($kendo-enable-color-system, k-color( series-b-bolder ), color.mix(black, $kendo-series-b, 50%)) !default;
-$kendo-series-b-light: if($kendo-enable-color-system, k-color( series-b-subtle ), color.mix(white, $kendo-series-b, 25%)) !default;
-$kendo-series-b-lighter: if($kendo-enable-color-system, k-color( series-b-subtler ), color.mix(white, $kendo-series-b, 50%)) !default;
+$kendo-series-b: k-color(series-b) !default;
+$kendo-series-b-dark: k-color(series-b-bold) !default;
+$kendo-series-b-darker: k-color(series-b-bolder) !default;
+$kendo-series-b-light: k-color(series-b-subtle) !default;
+$kendo-series-b-lighter: k-color(series-b-subtler) !default;
 
 /// The third base series color and its light and dark shades.
 /// @group charts
-$kendo-series-c: if($kendo-enable-color-system, k-color( series-c ), get-base-hue( teal, 500 )) !default;
-$kendo-series-c-dark: if($kendo-enable-color-system, k-color( series-c-bold ), color.mix(black, $kendo-series-c, 25%)) !default;
-$kendo-series-c-darker: if($kendo-enable-color-system, k-color( series-c-bolder ), color.mix(black, $kendo-series-c, 50%)) !default;
-$kendo-series-c-light: if($kendo-enable-color-system, k-color( series-c-subtle ), color.mix(white, $kendo-series-c, 25%)) !default;
-$kendo-series-c-lighter: if($kendo-enable-color-system, k-color( series-c-subtler ), color.mix(white, $kendo-series-c, 50%)) !default;
+$kendo-series-c: k-color(series-c) !default;
+$kendo-series-c-dark: k-color(series-c-bold) !default;
+$kendo-series-c-darker: k-color(series-c-bolder) !default;
+$kendo-series-c-light: k-color(series-c-subtle) !default;
+$kendo-series-c-lighter: k-color(series-c-subtler) !default;
 
 /// The fourth base series color and its light and dark shades.
 /// @group charts
-$kendo-series-d: if($kendo-enable-color-system, k-color( series-d ), get-base-hue( yellow, 500 )) !default;
-$kendo-series-d-dark: if($kendo-enable-color-system, k-color( series-d-bold ), color.mix(black, $kendo-series-d, 25%)) !default;
-$kendo-series-d-darker: if($kendo-enable-color-system, k-color( series-d-bolder ), color.mix(black, $kendo-series-d, 50%)) !default;
-$kendo-series-d-light: if($kendo-enable-color-system, k-color( series-d-subtle ), color.mix(white, $kendo-series-d, 25%)) !default;
-$kendo-series-d-lighter: if($kendo-enable-color-system, k-color( series-d-subtler ), color.mix(white, $kendo-series-d, 50%)) !default;
+$kendo-series-d: k-color(series-d) !default;
+$kendo-series-d-dark: k-color(series-d-bold) !default;
+$kendo-series-d-darker: k-color(series-d-bolder) !default;
+$kendo-series-d-light: k-color(series-d-subtle) !default;
+$kendo-series-d-lighter: k-color(series-d-subtler) !default;
 
 /// The fifth base series color and its light and dark shades.
 /// @group charts
-$kendo-series-e: if($kendo-enable-color-system, k-color( series-e ), get-base-hue( red, 500 )) !default;
-$kendo-series-e-dark: if($kendo-enable-color-system, k-color( series-e-bold ), color.mix(black, $kendo-series-e, 25%)) !default;
-$kendo-series-e-darker: if($kendo-enable-color-system, k-color( series-e-bolder ), color.mix(black, $kendo-series-e, 50%)) !default;
-$kendo-series-e-light: if($kendo-enable-color-system, k-color( series-e-subtle ), color.mix(white, $kendo-series-e, 25%)) !default;
-$kendo-series-e-lighter: if($kendo-enable-color-system, k-color( series-e-subtler ), color.mix(white, $kendo-series-e, 50%)) !default;
+$kendo-series-e: k-color(series-e) !default;
+$kendo-series-e-dark: k-color(series-e-bold) !default;
+$kendo-series-e-darker: k-color(series-e-bolder) !default;
+$kendo-series-e-light: k-color(series-e-subtle) !default;
+$kendo-series-e-lighter: k-color(series-e-subtler) !default;
 
 /// The sixth base series color and its light and dark shades.
 /// @group charts
-$kendo-series-f: if($kendo-enable-color-system, k-color( series-f ), get-base-hue( green, 500 )) !default;
-$kendo-series-f-dark: if($kendo-enable-color-system, k-color( series-f-bold ), color.mix(black, $kendo-series-f, 25%)) !default;
-$kendo-series-f-darker: if($kendo-enable-color-system, k-color( series-f-bolder ), color.mix(black, $kendo-series-f, 50%)) !default;
-$kendo-series-f-light: if($kendo-enable-color-system, k-color( series-f-subtle ), color.mix(white, $kendo-series-f, 25%)) !default;
-$kendo-series-f-lighter: if($kendo-enable-color-system, k-color( series-f-subtler ), color.mix(white, $kendo-series-f, 50%)) !default;
+$kendo-series-f: k-color(series-f) !default;
+$kendo-series-f-dark: k-color(series-f-bold) !default;
+$kendo-series-f-darker: k-color(series-f-bolder) !default;
+$kendo-series-f-light: k-color(series-f-subtle) !default;
+$kendo-series-f-lighter: k-color(series-f-subtler) !default;
 
 /// The series colors in order:
 /// base, light, dark, lighter, darker
@@ -99,13 +98,13 @@ $kendo-chart-pane-title-font-weight: var( --kendo-font-weight-normal, normal ) !
 
 /// The color of the Chart grid lines (major).
 /// @group charts
-$kendo-chart-major-lines: if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 8%, transparent), rgba( if( $kendo-is-dark-theme, $kendo-color-white, $kendo-color-black ), .08 )) !default;
+$kendo-chart-major-lines: color-mix(in srgb, k-color(on-app-surface) 8%, transparent) !default;
 
 /// The color of the Chart grid lines (minor).
 /// @group charts
-$kendo-chart-minor-lines: if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 4%, transparent), rgba( if( $kendo-is-dark-theme, $kendo-color-white, $kendo-color-black ), .04 )) !default;
+$kendo-chart-minor-lines: color-mix(in srgb, k-color(on-app-surface) 4%, transparent) !default;
 
-$kendo-chart-inactive: if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 50%, transparent), rgba( $kendo-body-text, .5 )) !default;
+$kendo-chart-inactive: color-mix(in srgb, k-color(on-app-surface) 50%, transparent) !default;
 $kendo-chart-area-opacity: .6 !default;
 $kendo-chart-area-inactive-opacity: .1 !default;
 $kendo-chart-line-inactive-opacity: .3 !default;
@@ -115,24 +114,24 @@ $kendo-chart-tooltip-padding-y: k-spacing(0.5) !default;
 
 $kendo-chart-tooltip-transition: left 300ms cubic-bezier(0, .33, .19, 1), top 300ms cubic-bezier(0, .33, .19, 1) !default;
 
-$kendo-chart-bg: $kendo-component-bg !default;
-$kendo-chart-text: $kendo-component-text !default;
-$kendo-chart-border: $kendo-component-border !default;
+$kendo-chart-bg: k-color(surface-alt) !default;
+$kendo-chart-text: k-color(on-app-surface) !default;
+$kendo-chart-border: k-color(border) !default;
 
-$kendo-chart-crosshair-background: if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 50%, transparent), rgba( if( $kendo-is-dark-theme, $kendo-color-white, $kendo-color-black ), .5 )) !default;
+$kendo-chart-crosshair-background: color-mix(in srgb, k-color(on-app-surface) 50%, transparent) !default;
 $kendo-chart-crosshair-shared-tooltip-color: $kendo-chart-text !default;
-$kendo-chart-crosshair-shared-tooltip-background: if($kendo-enable-color-system, k-color( base-subtle ), k-try-shade( $kendo-chart-bg, 1 )) !default;
-$kendo-chart-crosshair-shared-tooltip-border: if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 8%, transparent), rgba( if( $kendo-is-dark-theme, $kendo-color-white, $kendo-color-black ), .08 )) !default;
+$kendo-chart-crosshair-shared-tooltip-background: k-color(base-subtle) !default;
+$kendo-chart-crosshair-shared-tooltip-border: color-mix(in srgb, k-color(on-app-surface) 8%, transparent) !default;
 
-$kendo-chart-notes-background: if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 50%, transparent), rgba( if( $kendo-is-dark-theme, $kendo-color-white, $kendo-color-black ), .5 )) !default;
-$kendo-chart-notes-border: if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 50%, transparent), rgba( if( $kendo-is-dark-theme, $kendo-color-white, $kendo-color-black ), .5 )) !default;
-$kendo-chart-notes-lines: if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 50%, transparent), rgba( if( $kendo-is-dark-theme, $kendo-color-white, $kendo-color-black ), .5 )) !default;
+$kendo-chart-notes-background: color-mix(in srgb, k-color(on-app-surface) 50%, transparent) !default;
+$kendo-chart-notes-border: color-mix(in srgb, k-color(on-app-surface) 50%, transparent) !default;
+$kendo-chart-notes-lines: color-mix(in srgb, k-color(on-app-surface) 50%, transparent) !default;
 
-$kendo-chart-error-bars-background: if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 50%, transparent), rgba( if( $kendo-is-dark-theme, $kendo-color-white, $kendo-color-black ), .5 )) !default;
+$kendo-chart-error-bars-background: color-mix(in srgb, k-color(on-app-surface) 50%, transparent) !default;
 
 $kendo-chart-selection-handle-size: 22px !default;
-$kendo-chart-selection-border-color: if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 8%, transparent), rgba( if( $kendo-is-dark-theme, $kendo-color-white, $kendo-color-black ), .08 )) !default;
-$kendo-chart-selection-shadow: inset 0 1px 7px if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 15%, transparent), rgba( if( $kendo-is-dark-theme, $kendo-color-white, $kendo-color-black ), .15 )) !default;
+$kendo-chart-selection-border-color: color-mix(in srgb, k-color(on-app-surface) 8%, transparent) !default;
+$kendo-chart-selection-shadow: inset 0 1px 7px color-mix(in srgb, k-color(on-app-surface) 15%, transparent) !default;
 
 $kendo-chart-computed-title-height: 0px !default;
 
@@ -144,8 +143,16 @@ $kendo-treemap-line-height: var( --kendo-line-height, normal ) !default;
 $kendo-treemap-padding-x: k-spacing(2) !default;
 $kendo-treemap-padding-y: k-spacing(0.5) !default;
 
+$kendo-treemap-text: k-color(on-app-surface) !default;
+$kendo-treemap-bg: k-color(surface-alt) !default;
+$kendo-treemap-border: k-color(border) !default;
+
+$kendo-treemap-title-text: k-color(on-app-surface) !default;
+$kendo-treemap-title-bg: k-color(app-surface) !default;
+$kendo-treemap-title-border: k-color(border) !default;
+
 // Chart Overlay
-$kendo-chart-overlay-bg: if($kendo-enable-color-system, k-color( surface ), k-try-shade( $kendo-component-bg, .5 )) !default;
+$kendo-chart-overlay-bg: k-color(surface) !default;
 
 // No Data
 $kendo-chart-no-data-font-size: var( --kendo-font-size-lg, inherit ) !default;
@@ -254,5 +261,11 @@ $kendo-chart-no-data-padding-y: k-spacing( 25 ) !default;
     $kendo-chart-tooltip-padding-x: $kendo-chart-tooltip-padding-x,
     $kendo-chart-tooltip-padding-y: $kendo-chart-tooltip-padding-y,
     $kendo-treemap-padding-x: $kendo-treemap-padding-x,
-    $kendo-treemap-padding-y: $kendo-treemap-padding-y
+    $kendo-treemap-padding-y: $kendo-treemap-padding-y,
+    $kendo-treemap-text: $kendo-treemap-text,
+    $kendo-treemap-bg: $kendo-treemap-bg,
+    $kendo-treemap-border: $kendo-treemap-border,
+    $kendo-treemap-title-text: $kendo-treemap-title-text,
+    $kendo-treemap-title-bg: $kendo-treemap-title-bg,
+    $kendo-treemap-title-border: $kendo-treemap-title-border
 );

package/scss/dialog/_theme.scss

@@ -22,7 +22,7 @@
 
     // Content scroll border
     .k-dialog-content.k-scroll {
-        border-color: $kendo-component-border;
+        border-color: k-color(border);
     }
 
 }

package/scss/dialog/_variables.scss

@@ -30,9 +30,9 @@ $kendo-dialog-button-spacing: $kendo-actions-button-spacing !default;
 /// The theme colors map for the Dialog.
 /// @group dialog
 $kendo-dialog-theme-colors: (
-    "primary": map.get($kendo-theme-colors, "primary"),
-    "light": map.get($kendo-theme-colors, "light"),
-    "dark": map.get($kendo-theme-colors, "dark")
+    "primary": k-color(primary),
+    "light": k-color(light),
+    "dark": k-color(dark)
 ) !default;
 
 @forward "@progress/kendo-theme-core/scss/components/dialog/_variables.scss" with (