@progress/kendo-theme-fluent 10.6.0 → 11.0.0-dev.1

package/scss/taskboard/_variables.scss

@@ -30,13 +30,13 @@ $kendo-taskboard-font-size: var( --kendo-font-size, inherit ) !default;
 $kendo-taskboard-line-height: var( --kendo-line-height, inherit ) !default;
 /// The background color of the TaskBoard.
 /// @group taskboard
-$kendo-taskboard-bg: var( --kendo-component-bg, initial ) !default;
+$kendo-taskboard-bg: k-color(surface-alt) !default;
 /// The text color of the TaskBoard.
 /// @group taskboard
-$kendo-taskboard-text: var( --kendo-component-text, initial ) !default;
+$kendo-taskboard-text: k-color(on-app-surface) !default;
 /// The border color of the TaskBoard.
 /// @group taskboard
-$kendo-taskboard-border: var( --kendo-component-border, initial ) !default;
+$kendo-taskboard-border: color-mix(in srgb, k-color(border) 16%, transparent) !default;
 
 /// The vertical padding of the TaskBoard content.
 /// @group taskboard
@@ -69,10 +69,10 @@ $kendo-taskboard-column-border-width: 1px !default;
 $kendo-taskboard-column-border-radius: k-border-radius(md) !default;
 /// The background color of the TaskBoard column.
 /// @group taskboard
-$kendo-taskboard-column-bg: if($kendo-enable-color-system, k-color( surface ), k-get-theme-color-var( neutral-10 )) !default;
+$kendo-taskboard-column-bg: k-color(surface) !default;
 /// The text color of the TaskBoard column.
 /// @group taskboard
-$kendo-taskboard-column-text: var( --kendo-component-text, inherit ) !default;
+$kendo-taskboard-column-text: k-color(on-app-surface) !default;
 /// The border color of the TaskBoard column.
 /// @group taskboard
 $kendo-taskboard-column-border: transparent !default;
@@ -84,7 +84,7 @@ $kendo-taskboard-column-focus-bg: $kendo-taskboard-column-bg !default;
 $kendo-taskboard-column-focus-text: $kendo-taskboard-column-text !default;
 /// The border color of the focused TaskBoard column.
 /// @group taskboard
-$kendo-taskboard-column-focus-border: if($kendo-enable-color-system, k-color( border ), k-get-theme-color-var( neutral-130 )) !default;
+$kendo-taskboard-column-focus-border: k-color(border) !default;
 
 /// The vertical padding of the TaskBoard column header.
 /// @group taskboard
@@ -103,7 +103,7 @@ $kendo-taskboard-column-header-actions-gap: calc( #{$kendo-taskboard-spacer} / 2
 $kendo-taskboard-column-header-font-weight: 400 !default;
 /// The text color of the TaskBoard column header.
 /// @group taskboard
-$kendo-taskboard-column-header-text: var( --kendo-component-text, inherit ) !default;
+$kendo-taskboard-column-header-text: k-color(on-app-surface) !default;
 
 /// The vertical padding of the TaskBoard column Card wrapper.
 /// @group taskboard
@@ -130,13 +130,13 @@ $kendo-taskboard-pane-padding-x: k-spacing(0) !default;
 $kendo-taskboard-pane-border-width: 1px !default;
 /// The background color of the TaskBoard pane.
 /// @group taskboard
-$kendo-taskboard-pane-bg: var( --kendo-component-bg, inherit ) !default;
+$kendo-taskboard-pane-bg: k-color(surface-alt) !default;
 /// The text color of the TaskBoard pane.
 /// @group taskboard
-$kendo-taskboard-pane-text: var( --kendo-component-text, inherit ) !default;
+$kendo-taskboard-pane-text: k-color(on-app-surface) !default;
 /// The border color of the TaskBoard pane.
 /// @group taskboard
-$kendo-taskboard-pane-border: var( --kendo-component-border, inherit ) !default;
+$kendo-taskboard-pane-border: color-mix(in srgb, k-color(border) 16%, transparent) !default;
 
 /// The vertical padding of the TaskBoard pane header.
 /// @group taskboard
@@ -182,7 +182,7 @@ $kendo-taskboard-card-category-border-width: 4px !default;
 $kendo-taskboard-card-focus-shadow: none !default;
 /// The border of the selected TaskBoard Card.
 /// @group taskboard
-$kendo-taskboard-card-selected-border: if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 )) !default;
+$kendo-taskboard-card-selected-border: k-color(primary) !default;
 /// The shadow of the selected TaskBoard Card.
 /// @group taskboard
 $kendo-taskboard-card-selected-shadow: var( --kendo-box-shadow-depth-3, none ) !default;
@@ -202,7 +202,7 @@ $kendo-taskboard-drag-placeholder-border-width: 1px !default;
 $kendo-taskboard-drag-placeholder-border-radius: $kendo-card-border-radius !default;
 /// The background color of the TaskBoard Card placeholder.
 /// @group taskboard
-$kendo-taskboard-drag-placeholder-bg: if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 23%, transparent), k-get-theme-color-var( neutral-50 )) !default;
+$kendo-taskboard-drag-placeholder-bg: color-mix(in srgb, k-color(on-app-surface) 23%, transparent) !default;
 /// The border color of the TaskBoard Card placeholder.
 /// @group taskboard
-$kendo-taskboard-drag-placeholder-border: var( --kendo-component-border, inherit ) !default;
+$kendo-taskboard-drag-placeholder-border: color-mix(in srgb, k-color(border) 16%, transparent) !default;

package/scss/tilelayout/_variables.scss

@@ -8,7 +8,7 @@
 $kendo-tile-layout-border-width: 0px !default;
 /// The background color of the TileLayout.
 /// @group tile-layout
-$kendo-tile-layout-bg: if($kendo-enable-color-system, k-color( surface ), k-get-theme-color-var( neutral-10 )) !default;
+$kendo-tile-layout-bg: k-color(surface) !default;
 
 /// The horizontal padding of the TileLayout.
 /// @group tile-layout
@@ -26,7 +26,7 @@ $kendo-tile-layout-hint-border-width: 1px !default;
 $kendo-tile-layout-hint-border-radius: var( --kendo-border-radius-lg, initial ) !default;
 /// The color of the border around the TileLayout hint.
 /// @group tile-layout
-$kendo-tile-layout-hint-border: var( --kendo-component-border, initial ) !default;
+$kendo-tile-layout-hint-border: color-mix(in srgb, k-color(border) 16%, transparent) !default;
 /// The background color of the TileLayout hint.
 /// @group tile-layout
 $kendo-tile-layout-hint-bg: rgba(255, 255, 255, .2) !default;

package/scss/timeline/_variables.scss

@@ -62,23 +62,23 @@ $kendo-timeline-track-start-calc: calc( #{ $kendo-timeline-track-arrow-width } -
 $kendo-timeline-track-end-calc: calc( #{ $kendo-timeline-track-arrow-width } - 2 * #{ $kendo-timeline-track-border-width } ) !default;
 /// The background color of the Timeline track.
 /// @group timeline
-$kendo-timeline-track-bg: if($kendo-enable-color-system, k-color( surface ), k-get-theme-color-var( neutral-10 )) !default;
+$kendo-timeline-track-bg: k-color(surface) !default;
 /// The border color of the Timeline track.
 /// @group timeline
-$kendo-timeline-track-border-color: if($kendo-enable-color-system, color-mix(in srgb, k-color( border ) 16%, transparent), k-get-theme-color-var( neutral-30 )) !default;
+$kendo-timeline-track-border-color: color-mix(in srgb, k-color(border) 16%, transparent) !default;
 
 /// The block end inset of the Timeline arrow.
 /// @group timeline
 $kendo-timeline-arrow-inset-block-end: calc( #{ $kendo-timeline-track-size } + #{ $kendo-timeline-track-wrap-padding-bottom } + #{ $kendo-timeline-track-border-width } ) !default;
 /// The background color of the disabled Timeline arrow.
 /// @group timeline
-$kendo-timeline-track-arrow-disabled-bg: var( --kendo-disabled-bg, initial ) !default;
+$kendo-timeline-track-arrow-disabled-bg: k-color(base-subtle) !default;
 /// The text color of the disabled Timeline arrow.
 /// @group timeline
-$kendo-timeline-track-arrow-disabled-text: var( --kendo-disabled-text, initial ) !default;
+$kendo-timeline-track-arrow-disabled-text: color-mix(in srgb, k-color(on-app-surface) 46%, transparent) !default;
 /// The border color of the disabled Timeline arrow.
 /// @group timeline
-$kendo-timeline-track-arrow-disabled-border: var( --kendo-disabled-border, initial) !default;
+$kendo-timeline-track-arrow-disabled-border: transparent !default;
 
 /// The offset of the Timeline track event.
 /// @group timeline
@@ -113,10 +113,10 @@ $kendo-timeline-mobile-flag-max-width: calc( #{ $kendo-timeline-flag-min-width }
 $kendo-timeline-horizontal-flag-min-width: k-spacing(15) !default;
 /// The background color of the Timeline flag.
 /// @group timeline
-$kendo-timeline-flag-bg: if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 )) !default;
+$kendo-timeline-flag-bg: k-color(primary) !default;
 /// The text color of the Timeline flag.
 /// @group timeline
-$kendo-timeline-flag-text: var( --kendo-component-bg, initial ) !default;
+$kendo-timeline-flag-text: k-color(surface-alt) !default;
 /// The width of the Timeline's flag callout.
 /// @group timeline
 $kendo-timeline-flag-callout-width: k-spacing(2.5) !default;
@@ -132,23 +132,23 @@ $kendo-timeline-flag-margin-bottom-calc: calc( #{ $kendo-timeline-track-size } +
 
 /// The background color of the Timeline's Card header.
 /// @group timeline
-$kendo-timeline-card-header-bg: var( --kendo-component-bg, initial ) !default;
+$kendo-timeline-card-header-bg: k-color(surface-alt) !default;
 /// The text color of the Timeline's Card header.
 /// @group timeline
-$kendo-timeline-card-header-text: if($kendo-enable-color-system, k-color( on-app-surface ), k-get-theme-color-var( neutral-160 )) !default;
+$kendo-timeline-card-header-text: k-color(on-app-surface) !default;
 /// The border of the Timeline's Card body scroll.
 /// @group timeline
-$kendo-timeline-card-body-scroll-border: if($kendo-enable-color-system, color-mix(in srgb, k-color( border ) 16%, transparent), k-get-theme-color-var( neutral-30 )) !default;
+$kendo-timeline-card-body-scroll-border: color-mix(in srgb, k-color(border) 16%, transparent) !default;
 /// The background color of the Timeline's Card body scroll.
 /// @group timeline
-$kendo-timeline-card-body-scroll-bg: var( --kendo-component-bg, initial ) !default;
+$kendo-timeline-card-body-scroll-bg: k-color(surface-alt) !default;
 /// The color of the Timeline's hovered card scroll thumb.
 /// @group timeline
-$kendo-timeline-card-scroll-thumb-hover: var( --kendo-hover-border, initial ) !default;
+$kendo-timeline-card-scroll-thumb-hover: color-mix(in srgb, k-color(border) 10%, transparent) !default;
 
 /// The text color of the Timeline date body.
 /// @group timeline
-$kendo-timeline-date-body-text: var( --kendo-body-text, initial ) !default;
+$kendo-timeline-date-body-text: k-color(on-app-surface) !default;
 /// The width of the Timeline date.
 /// @group timeline
 $kendo-timeline-date-width: calc( #{k-spacing(12)} + #{k-spacing(0.5)} ) !default;
@@ -180,7 +180,7 @@ $kendo-timeline-circle-width: k-spacing(4) !default;
 $kendo-timeline-circle-height: k-spacing(4) !default;
 /// The background color of the Timeline circle.
 /// @group timeline
-$kendo-timeline-circle-bg: if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 )) !default;
+$kendo-timeline-circle-bg: k-color(primary) !default;
 
 /// The width of the Timeline event.
 /// @group timeline

package/scss/timeselector/_theme.scss

@@ -5,9 +5,9 @@
     // Time selector
     .k-timeselector {
         @include fill(
-            var( --kendo-time-selector-text, $kendo-time-selector-text ),
-            var( --kendo-time-selector-bg, $kendo-time-selector-bg ),
-            var( --kendo-time-selector-border, $kendo-time-selector-border )
+            var( --kendo-time-selector-text, #{$kendo-time-selector-text} ),
+            var( --kendo-time-selector-bg, #{$kendo-time-selector-bg} ),
+            var( --kendo-time-selector-border, #{$kendo-time-selector-border} )
         );
     }
 
@@ -15,12 +15,15 @@
     // Time selector header
     .k-time-header,
     .k-time-selector-header {
+        .k-title {
+            color:  var( --kendo-time-selector-header-title-text, #{$kendo-time-selector-header-title-text} );
+        }
 
         .k-time-now {
-            color: var( --kendo-link-text, inherit );
+            color: k-color(primary);
         }
         .k-time-now:hover {
-            color: var( --kendo-link-hover-text, inherit );
+            color: k-color(primary-hover);
         }
     }
 
@@ -29,17 +32,17 @@
     .k-time-list-wrapper {
 
         .k-title {
-            color: var( --kendo-time-list-title-text, $kendo-time-list-title-text );
+            color: var( --kendo-time-list-title-text, #{$kendo-time-list-title-text} );
         }
 
         &.k-focus {
             .k-title {
-                color: var( --kendo-time-list-title-focus-text, $kendo-time-list-title-focus-text );
+                color: var( --kendo-time-list-title-focus-text, #{$kendo-time-list-title-focus-text} );
             }
 
             &::before,
             &::after {
-                background-color: var( --kendo-time-list-focus-bg, $kendo-time-list-focus-bg );
+                background-color: var( --kendo-time-list-focus-bg, #{$kendo-time-list-focus-bg} );
             }
         }
     }
@@ -48,7 +51,7 @@
     // Time list
     .k-time-list {
         .k-item:hover {
-            color: if($kendo-enable-color-system, k-color( primary-hover ), k-get-theme-color-var( primary-120 ));
+            color: k-color(primary-hover);
         }
     }
 
@@ -58,8 +61,8 @@
 
     .k-time-highlight {
         @include fill(
-            $bg: var( --kendo-time-list-highlight-bg, $kendo-time-list-highlight-bg ),
-            $border: var( --kendo-time-list-highlight-border, $kendo-time-list-highlight-border )
+            $bg: var( --kendo-time-list-highlight-bg, #{$kendo-time-list-highlight-bg} ),
+            $border: var( --kendo-time-list-highlight-border, #{$kendo-time-list-highlight-border} )
         );
     }
 }

package/scss/timeselector/_variables.scss

@@ -17,13 +17,13 @@ $kendo-time-selector-line-height: var( --kendo-line-height, normal ) !default;
 
 /// Background color of the time-selector.
 /// @group time-selector
-$kendo-time-selector-bg: var( --kendo-component-bg, initial ) !default;
+$kendo-time-selector-bg: k-color(surface-alt) !default;
 /// Text color of the time-selector.
 /// @group time-selector
-$kendo-time-selector-text: var( --kendo-component-text, initial ) !default;
+$kendo-time-selector-text: k-color(on-app-surface) !default;
 /// Border color of the time-selector.
 /// @group time-selector
-$kendo-time-selector-border: var( --kendo-component-border, initial ) !default;
+$kendo-time-selector-border: color-mix(in srgb, k-color(border) 16%, transparent) !default;
 
 /// Horizontal padding of the time-selector header.
 /// @group time-selector
@@ -34,6 +34,15 @@ $kendo-time-selector-header-padding-y: k-spacing(3) !default;
 /// Width of the border around the time-selector header.
 /// @group time-selector
 $kendo-time-selector-header-border-width: 0px !default;
+/// The text color of the title in the time-selector header.
+/// @group time-selector
+$kendo-time-selector-header-title-text: unset !default;
+/// The text color of the time now in the time-selector header.
+/// @group time-selector
+$kendo-time-selector-header-time-now-text: k-color(primary) !default;
+/// The hover text color of the time now in the time-selector header.
+/// @group time-selector
+$kendo-time-selector-header-time-now-hover-text: k-color(primary-hover) !default;
 
 /// Visibility of the time-selector separator.
 /// @group time-selector
@@ -60,7 +69,7 @@ $kendo-time-list-title-height: calc( #{$kendo-time-list-title-spacing} + #{$kend
 
 /// Text color of the time-selector titles.
 /// @group time-selector
-$kendo-time-list-title-text: var( --kendo-subtle-text, inherit ) !default;
+$kendo-time-list-title-text: k-color(subtle) !default;
 /// Text color of the focused time-selector titles.
 /// @group time-selector
 $kendo-time-list-title-focus-text: $kendo-time-selector-text !default;

package/scss/toolbar/_layout.scss

@@ -150,6 +150,12 @@
         }
     }
 
+    // Workaround for scrollable scenario with buttons inside badge container
+    .k-toolbar-items-scroll:has(.k-badge-container) {
+        padding-block-start: .5em;
+        margin-block-start: -.5em;
+    }
+
     .k-toolbar-items-list {
         display: flex;
         flex-flow: row wrap;

package/scss/toolbar/_variables.scss

@@ -58,16 +58,16 @@ $kendo-toolbar-line-height: var( --kendo-line-height, normal ) !default;
 
 /// The background color of the Toolbar.
 /// @group toolbar
-$kendo-toolbar-bg: if($kendo-enable-color-system, k-color( surface ), k-get-theme-color-var( neutral-10 )) !default;
+$kendo-toolbar-bg: k-color(surface) !default;
 /// The text color of the Toolbar.
 /// @group toolbar
-$kendo-toolbar-text: var( --kendo-component-text, inherit ) !default;
+$kendo-toolbar-text: k-color(on-app-surface) !default;
 /// The color of the border around the Toolbar.
 /// @group toolbar
-$kendo-toolbar-border: var( --kendo-component-border, initial ) !default;
+$kendo-toolbar-border: color-mix(in srgb, k-color(border) 16%, transparent) !default;
 /// The left and right scroll overlay of the Toolbar.
 /// @group toolbar
-$kendo-toolbar-scroll-overlay: $kendo-toolbar-bg, if($kendo-enable-color-system, color-mix(in srgb, k-color( app-surface ) 0%, transparent), rgba( $kendo-color-white, 0)) !default;
+$kendo-toolbar-scroll-overlay: $kendo-toolbar-bg, color-mix(in srgb, k-color(app-surface) 0%, transparent) !default;
 
 
 /// The text color of the outline Toolbar.
@@ -81,7 +81,7 @@ $kendo-toolbar-outline-border: k-color(border) !default;
 $kendo-toolbar-outline-border-width: $kendo-toolbar-border-width !default;
 /// The left and right scroll overlay of the outline Toolbar.
 /// @group toolbar
-$kendo-toolbar-outline-scroll-overlay: if($kendo-enable-color-system, k-color( app-surface ), $kendo-color-white), if($kendo-enable-color-system, color-mix(in srgb, k-color( app-surface ) 0%, transparent), rgba( $kendo-color-white, 0)) !default;
+$kendo-toolbar-outline-scroll-overlay: k-color(app-surface), color-mix(in srgb, k-color(app-surface) 0%, transparent) !default;
 
 
 /// The text color of the flat Toolbar.
@@ -95,7 +95,7 @@ $kendo-toolbar-flat-border: $kendo-toolbar-border !default;
 $kendo-toolbar-flat-border-width: 1px !default;
 /// The left and right scroll overlay of the flat Toolbar.
 /// @group toolbar
-$kendo-toolbar-flat-scroll-overlay: if($kendo-enable-color-system, k-color( app-surface ), $kendo-color-white), if($kendo-enable-color-system, color-mix(in srgb, k-color( app-surface ) 0%, transparent), rgba( $kendo-color-white, 0)) !default;
+$kendo-toolbar-flat-scroll-overlay: k-color(app-surface), color-mix(in srgb, k-color(app-surface) 0%, transparent) !default;
 
 
 /// The color of the separator border of the Toolbar.
@@ -114,7 +114,7 @@ $kendo-toolbar-item-focus-outline-width: 1px !default;
 $kendo-toolbar-item-focus-outline-style: solid !default;
 /// The border color of the focused Toolbar item.
 /// @group toolbar
-$kendo-toolbar-item-focus-outline-color: if($kendo-enable-color-system, k-color( base-emphasis ), k-get-theme-color-var( neutral-130 )) !default;
+$kendo-toolbar-item-focus-outline-color: k-color(base-emphasis) !default;
 
 /// The sizes map for the Toolbar.
 /// @group toolbar

package/scss/tooltip/_variables.scss

@@ -39,10 +39,10 @@ $kendo-tooltip-callout-size: k-spacing(2) !default;
 
 /// The default background of the Tooltip.
 /// @group tooltip
-$kendo-tooltip-bg: if($kendo-enable-color-system, k-color( app-surface ), $kendo-color-white) !default;
+$kendo-tooltip-bg: k-color(app-surface) !default;
 /// The default text color of the Tooltip.
 /// @group tooltip
-$kendo-tooltip-text: var( --kendo-component-text, initial ) !default;
+$kendo-tooltip-text: k-color(on-app-surface) !default;
 /// The default border color of the Tooltip.
 /// @group tooltip
 $kendo-tooltip-border: transparent !default;
@@ -52,11 +52,11 @@ $kendo-tooltip-shadow: var( --kendo-box-shadow-depth-2, none ) !default;
 
 /// The text color of the Tooltip button.
 /// @group tooltip
-$kendo-tooltip-button-text: if($kendo-enable-color-system, k-color( subtle ), k-get-theme-color-var( neutral-130, initial )) !default;
+$kendo-tooltip-button-text: k-color(subtle) !default;
 
 /// Theme variations for the tooltip.
 $kendo-tooltip-brand-colors: (
-    secondary: if($kendo-enable-color-system, secondary, neutral),
+    secondary: secondary,
     tertiary: tertiary,
     success: success,
     warning: warning,
@@ -66,19 +66,19 @@ $kendo-tooltip-brand-colors: (
 
 // Matrix with tooltip theme colors in the order: bg, color, border
 $_tc-tooltip-matrix: (
-    (normal: if($kendo-enable-color-system, (color-subtle, color-on-subtle, color-subtle), (20, 160, 20))),
+    (normal: (color-subtle, color-on-subtle, color-subtle)),
 ) !default;
 
 $_tc-tooltip-primary-matrix: (
-    (normal: if($kendo-enable-color-system, (color, on-color, color), (100, $kendo-color-white, 100))),
+    (normal: (color, on-color, color)),
 ) !default;
 
 $_tc-tooltip-dark-matrix: (
-    (normal: if($kendo-enable-color-system, (color, on-color, color), (160, $kendo-color-white, 160))),
+    (normal: (color, on-color, color)),
 ) !default;
 
 $_tc-tooltip-light-matrix: (
-    (normal: if($kendo-enable-color-system, (color, on-color, color), (50, 160, 50))),
+    (normal: (color, on-color, color)),
 ) !default;
 
 /// Theme colors map for the tooltip variations.
@@ -103,13 +103,13 @@ $kendo-tooltip-theme-colors: () !default;
 @each $ui-states in $_tc-tooltip-dark-matrix {
     $kendo-tooltip-theme-colors: map.deep-merge(
         $kendo-tooltip-theme-colors,
-        k-generate-theme-variation( dark, if($kendo-enable-color-system, dark, neutral), $ui-states )
+        k-generate-theme-variation( dark, dark, $ui-states )
     );
 }
 
 @each $ui-states in $_tc-tooltip-light-matrix {
     $kendo-tooltip-theme-colors: map.deep-merge(
         $kendo-tooltip-theme-colors,
-        k-generate-theme-variation( light, if($kendo-enable-color-system, light, neutral), $ui-states )
+        k-generate-theme-variation( light, light, $ui-states )
     );
 }

package/scss/treeview/_variables.scss

@@ -88,7 +88,7 @@ $kendo-treeview-sizes: (
 $kendo-treeview-bg: transparent !default;
 /// The text color of the TreeView.
 /// @group treeview
-$kendo-treeview-text: var( --kendo-component-text, inherit ) !default;
+$kendo-treeview-text: k-color(on-app-surface) !default;
 /// The border color of the TreeView.
 /// @group treeview
 $kendo-treeview-border: inherit !default;
@@ -98,17 +98,17 @@ $kendo-treeview-border: inherit !default;
 $kendo-treeview-item-bg: transparent !default;
 /// The text color of the TreeView items.
 /// @group treeview
-$kendo-treeview-item-text: var( --kendo-component-text, inherit ) !default;
+$kendo-treeview-item-text: k-color(on-app-surface) !default;
 /// The border color of the TreeView items.
 /// @group treeview
 $kendo-treeview-item-border: inherit !default;
 
 /// The background color of hovered TreeView items.
 /// @group treeview
-$kendo-treeview-item-hover-bg: var( --kendo-hover-bg, inherit ) !default;
+$kendo-treeview-item-hover-bg: k-color(base-hover) !default;
 /// The text color of hovered TreeView items.
 /// @group treeview
-$kendo-treeview-item-hover-text: var( --kendo-hover-text, inherit ) !default;
+$kendo-treeview-item-hover-text: k-color(on-base) !default;
 /// The border color of hovered TreeView items
 /// @group treeview
 $kendo-treeview-item-hover-border: inherit !default;
@@ -124,14 +124,14 @@ $kendo-treeview-item-focus-text: $kendo-treeview-item-text !default;
 $kendo-treeview-item-focus-border: $kendo-treeview-item-border !default;
 /// The box shadow of focused TreeView items.
 /// @group treeview
-$kendo-treeview-item-focus-shadow: inset 0 0 0 1px if($kendo-enable-color-system, k-color( base-emphasis ), k-get-theme-color-var( neutral-130 )) !default;
+$kendo-treeview-item-focus-shadow: inset 0 0 0 1px k-color(base-emphasis) !default;
 
 /// The background color of selected TreeView items.
 /// @group treeview
-$kendo-treeview-item-selected-bg: var( --kendo-selected-bg, inherit ) !default;
+$kendo-treeview-item-selected-bg: k-color(base-active) !default;
 /// The text color of selected TreeView items.
 /// @group treeview
-$kendo-treeview-item-selected-text: var( --kendo-selected-text, inherit ) !default;
+$kendo-treeview-item-selected-text: k-color(on-base) !default;
 /// The border color of selected TreeView items.
 /// @group treeview
 $kendo-treeview-item-selected-border: inherit !default;
@@ -141,7 +141,7 @@ $kendo-treeview-item-selected-border: inherit !default;
 $kendo-treeview-item-disabled-bg: $kendo-treeview-item-bg !default;
 /// The text color of disabled TreeView items.
 /// @group treeview
-$kendo-treeview-item-disabled-text: var( --kendo-disabled-text, inherit ) !default;
+$kendo-treeview-item-disabled-text: color-mix(in srgb, k-color(on-app-surface) 46%, transparent) !default;
 /// The border color of disabled TreeView items.
 /// @group treeview
 $kendo-treeview-item-disabled-border: inherit !default;
@@ -151,7 +151,7 @@ $kendo-treeview-item-disabled-border: inherit !default;
 $kendo-treeview-loadmore-bg: transparent !default;
 /// The text color of the Load More button in the TreeView
 /// @group treeview
-$kendo-treeview-loadmore-text: var( --kendo-link-text, initial ) !default;
+$kendo-treeview-loadmore-text: k-color(primary) !default;
 /// The border color of the Load More button in the TreeView
 /// @group treeview
 $kendo-treeview-loadmore-border: inherit !default;
@@ -161,7 +161,7 @@ $kendo-treeview-loadmore-border: inherit !default;
 $kendo-treeview-loadmore-hover-bg: transparent !default;
 /// The text color of the hovered Load More button in the TreeView.
 /// @group treeview
-$kendo-treeview-loadmore-hover-text: var( --kendo-link-hover-text, initial ) !default;
+$kendo-treeview-loadmore-hover-text: k-color(primary-hover) !default;
 /// The border color of the hovered Load More button in the TreeView.
 /// @group treeview
 $kendo-treeview-loadmore-hover-border: inherit !default;
@@ -171,7 +171,7 @@ $kendo-treeview-loadmore-hover-border: inherit !default;
 $kendo-treeview-loadmore-focus-bg: transparent !default;
 /// The text color of the focused Load More button in the TreeView.
 /// @group treeview
-$kendo-treeview-loadmore-focus-text: var( --kendo-link-hover-text, initial ) !default;
+$kendo-treeview-loadmore-focus-text: k-color(primary-hover) !default;
 /// The border color of the focused Load More button in the TreeView.
 /// @group treeview
 $kendo-treeview-loadmore-focus-border: inherit !default;

package/scss/typography/_layout.scss

@@ -25,8 +25,8 @@
             var( --kendo-letter-spacing, normal ),
         );
         @include fill(
-            var( --kendo-body-text, initial ),
-            var( --kendo-body-bg, initial )
+            k-color(on-app-surface),
+            k-color(app-surface)
         );
         margin: 0;
 

package/scss/typography/_theme.scss

@@ -4,8 +4,8 @@
 @mixin kendo-typography--theme() {
     .k-body {
         @include fill(
-            var( --kendo-body-text, initial ),
-            var( --kendo-body-bg, initial )
+            k-color(on-app-surface),
+            k-color(app-surface)
         );
     }
 

package/scss/typography/_variables.scss

@@ -230,13 +230,13 @@ $kendo-code-border-width: 1px !default;
 
 /// The background color of the code tag.
 /// @group typography
-$kendo-code-bg: var( --kendo-component-bg, initial) !default;
+$kendo-code-bg: k-color(surface-alt) !default;
 /// The text color of the code tag.
 /// @group typography
-$kendo-code-text: var( --kendo-component-text, initial) !default;
+$kendo-code-text: k-color(on-app-surface) !default;
 /// The border color of the code tag.
 /// @group typography
-$kendo-code-border: var( --kendo-component-border, initial) !default;
+$kendo-code-border: color-mix(in srgb, k-color(border) 16%, transparent) !default;
 
 // Display
 

package/scss/upload/_theme.scss

@@ -90,7 +90,7 @@
         .k-file-size,
         .k-file-validation-message,
         .k-file-summary {
-            color: var( --kendo-subtle-text, inherit);
+            color: k-color(subtle);
         }
 
         .k-multiple-files-wrapper .k-file-summary {
@@ -101,7 +101,7 @@
         &.k-invalid,
         &.ng-invalid.ng-touched,
         &.ng-invalid.ng-dirty {
-            border-color: var( --kendo-invalid-border, inherit);
+            border-color: k-color(error-emphasis);
         }
     }
 }