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

package/scss/drawer/_variables.scss

@@ -6,13 +6,13 @@
 
 /// The background color of the Drawer.
 /// @group drawer
-$kendo-drawer-bg: $kendo-component-bg !default;
+$kendo-drawer-bg: k-color(surface-alt) !default;
 /// The text color of the Drawer.
 /// @group drawer
-$kendo-drawer-text: $kendo-component-text !default;
+$kendo-drawer-text: k-color(on-app-surface) !default;
 /// The border color of the Drawer.
 /// @group drawer
-$kendo-drawer-border: $kendo-component-border !default;
+$kendo-drawer-border: k-color(border) !default;
 /// The border width of the Drawer.
 /// @group drawer
 $kendo-drawer-border-width: 1px !default;
@@ -50,18 +50,30 @@ $kendo-drawer-scrollbar-radius: 20px !default;
 /// @group drawer
 $kendo-drawer-scrollbar-hover-color: rgba( 156, 156, 156, 1 ) !default;
 
+/// The horizontal padding of the Drawer items.
+/// @group drawer
+$kendo-drawer-items-padding-x: 0 !default;
+/// The vertical padding of the Drawer items.
+/// @group drawer
+$kendo-drawer-items-padding-y: 0 !default;
 /// The horizontal padding of the Drawer item.
 /// @group drawer
 $kendo-drawer-item-padding-x: k-spacing(4) !default;
 /// The vertical padding of the Drawer item.
 /// @group drawer
 $kendo-drawer-item-padding-y: k-spacing(2) !default;
+/// The spacing between the items in the Drawer item.
+/// @group drawer
+$kendo-drawer-item-spacing: $kendo-drawer-item-padding-x !default;
 /// The font size of the Drawer item.
 /// @group drawer
 $kendo-drawer-item-font-size: var( --kendo-font-size-lg, inherit ) !default;
 /// The line height of the Drawer item.
 /// @group drawer
 $kendo-drawer-item-line-height: $kendo-line-height-lg !default;
+/// The font weight of the Drawer item.
+/// @group drawer
+$kendo-drawer-item-font-weight: var( --kendo-font-weight, normal ) !default;
 
 /// The horizontal padding of the Drawer item in each level.
 /// @group drawer
@@ -69,6 +81,9 @@ $kendo-drawer-item-level-padding-x: $kendo-drawer-item-padding-x !default;
 /// The count of the Drawer item levels.
 /// @group drawer
 $kendo-drawer-item-level-count: 5 !default;
+/// The border radius of the Drawer item.
+/// @group drawer
+$kendo-drawer-item-border-radius: null !default;
 
 /// The horizontal padding of the Drawer icon.
 /// @group drawer
@@ -84,10 +99,10 @@ $kendo-drawer-mini-initial-width: calc( 2 * #{$kendo-drawer-item-padding-x} + #{
 
 /// The background color of the hovered Drawer item.
 /// @group drawer
-$kendo-drawer-hover-bg: $kendo-hover-bg !default;
+$kendo-drawer-hover-bg: k-color(base-hover) !default;
 /// The text color of the hovered Drawer item.
 /// @group drawer
-$kendo-drawer-hover-text: $kendo-hover-text !default;
+$kendo-drawer-hover-text: k-color(on-app-surface) !default;
 
 /// The background color of the focused Drawer item.
 /// @group drawer
@@ -98,17 +113,21 @@ $kendo-drawer-focus-shadow: $kendo-list-item-focus-shadow !default;
 
 /// The background color of the selected Drawer item.
 /// @group drawer
-$kendo-drawer-selected-bg: $kendo-selected-bg !default;
+$kendo-drawer-selected-bg: k-color(primary) !default;
 /// The text color of the selected Drawer item.
 /// @group drawer
-$kendo-drawer-selected-text: $kendo-selected-text !default;
+$kendo-drawer-selected-text: k-color(on-primary) !default;
 
 /// The background color of the selected and hovered Drawer item.
 /// @group drawer
-$kendo-drawer-selected-hover-bg: $kendo-selected-hover-bg !default;
+$kendo-drawer-selected-hover-bg: k-color(primary-hover) !default;
 /// The text color of the selected and hovered Drawer item.
 /// @group drawer
-$kendo-drawer-selected-hover-text: $kendo-selected-hover-text !default;
+$kendo-drawer-selected-hover-text: k-color(on-primary) !default;
+
+/// The background color of the selected and focused Drawer item.
+/// @group drawer
+$kendo-drawer-selected-focus-bg: null !default;
 
 
 @forward "@progress/kendo-theme-core/scss/components/drawer/_variables.scss" with (
@@ -126,12 +145,17 @@ $kendo-drawer-selected-hover-text: $kendo-selected-hover-text !default;
     $kendo-drawer-scrollbar-bg: $kendo-drawer-scrollbar-bg,
     $kendo-drawer-scrollbar-radius: $kendo-drawer-scrollbar-radius,
     $kendo-drawer-scrollbar-hover-color: $kendo-drawer-scrollbar-hover-color,
+    $kendo-drawer-items-padding-x: $kendo-drawer-items-padding-x,
+    $kendo-drawer-items-padding-y: $kendo-drawer-items-padding-y,
     $kendo-drawer-item-padding-x: $kendo-drawer-item-padding-x,
     $kendo-drawer-item-padding-y: $kendo-drawer-item-padding-y,
+    $kendo-drawer-item-spacing: $kendo-drawer-item-spacing,
     $kendo-drawer-item-font-size: $kendo-drawer-item-font-size,
     $kendo-drawer-item-line-height: $kendo-drawer-item-line-height,
+    $kendo-drawer-item-font-weight: $kendo-drawer-item-font-weight,
     $kendo-drawer-item-level-padding-x: $kendo-drawer-item-level-padding-x,
     $kendo-drawer-item-level-count: $kendo-drawer-item-level-count,
+    $kendo-drawer-item-border-radius: $kendo-drawer-item-border-radius,
     $kendo-drawer-icon-padding-x: $kendo-drawer-icon-padding-x,
     $kendo-drawer-icon-padding-y: $kendo-drawer-icon-padding-y,
     $kendo-drawer-mini-initial-width: $kendo-drawer-mini-initial-width,
@@ -142,5 +166,6 @@ $kendo-drawer-selected-hover-text: $kendo-selected-hover-text !default;
     $kendo-drawer-selected-bg: $kendo-drawer-selected-bg,
     $kendo-drawer-selected-text: $kendo-drawer-selected-text,
     $kendo-drawer-selected-hover-bg: $kendo-drawer-selected-hover-bg,
-    $kendo-drawer-selected-hover-text: $kendo-drawer-selected-hover-text
+    $kendo-drawer-selected-hover-text: $kendo-drawer-selected-hover-text,
+    $kendo-drawer-selected-focus-bg: $kendo-drawer-selected-focus-bg
 );

package/scss/dropzone/_variables.scss

@@ -28,23 +28,23 @@ $kendo-dropzone-line-height: var( --kendo-line-height, normal ) !default;
 
 /// The background color of the DropZone.
 /// @group dropzone
-$kendo-dropzone-bg: $kendo-base-bg !default;
+$kendo-dropzone-bg: k-color(surface) !default;
 /// The text color of the DropZone.
 /// @group dropzone
-$kendo-dropzone-text: $kendo-base-text !default;
+$kendo-dropzone-text: k-color(on-app-surface) !default;
 /// The border color of the DropZone.
 /// @group dropzone
-$kendo-dropzone-border: $kendo-base-border !default;
+$kendo-dropzone-border: k-color(border) !default;
 
 /// The spacing below the DropZone icon.
 /// @group dropzone
 $kendo-dropzone-icon-spacing: k-spacing(6) !default;
 /// The text color of the DropZone icon.
 /// @group dropzone
-$kendo-dropzone-icon-text: if($kendo-enable-color-system, k-color( subtle ), k-try-tint( $kendo-dropzone-text, 4 )) !default;
+$kendo-dropzone-icon-text: k-color(subtle) !default;
 /// The text color of the hovered DropZone icon.
 /// @group dropzone
-$kendo-dropzone-icon-hover-text: $kendo-color-primary !default;
+$kendo-dropzone-icon-hover-text: k-color(primary) !default;
 
 /// The font size of the DropZone hint.
 /// @group dropzone
@@ -64,7 +64,7 @@ $kendo-dropzone-note-font-size: var( --kendo-font-size-sm, inherit ) !default;
 $kendo-dropzone-note-spacing: null !default;
 /// The text color of the DropZone note.
 /// @group dropzone
-$kendo-dropzone-note-text: $kendo-subtle-text !default;
+$kendo-dropzone-note-text: k-color(subtle) !default;
 
 
 @forward "@progress/kendo-theme-core/scss/components/dropzone/_variables.scss" with (

package/scss/editor/_variables.scss

@@ -27,14 +27,14 @@ $kendo-editor-placeholder-opacity: $kendo-input-placeholder-opacity !default;
 
 /// The selected text color of the Editor.
 /// @group editor
-$kendo-editor-selected-text: $kendo-color-primary-contrast !default;
+$kendo-editor-selected-text: k-color(on-primary) !default;
 /// The selected background color of the Editor.
 /// @group editor
-$kendo-editor-selected-bg: $kendo-color-primary !default;
+$kendo-editor-selected-bg: k-color(primary) !default;
 
 /// The highlighted background color of the Editor.
 /// @group editor
-$kendo-editor-highlighted-bg: if($kendo-enable-color-system, k-color( primary-subtle ), color.mix( $kendo-color-primary, #ffffff, 20% )) !default;
+$kendo-editor-highlighted-bg: k-color(primary-subtle) !default;
 
 /// The horizontal margin of the Editor's export tool icon.
 /// @group editor
@@ -78,6 +78,11 @@ $kendo-editor-filebrowser-tiles-padding-y: k-spacing(1) !default;
 /// @group editor
 $kendo-editor-content-padding: k-spacing(2) !default;
 
+$kendo-editor-ct-cell-text: k-color(on-primary) !default;
+$kendo-editor-ct-cell-bg: k-color(primary) !default;
+$kendo-editor-ct-cell-border: k-color(primary) !default;
+
+
 @forward "@progress/kendo-theme-core/scss/components/editor/_variables.scss" with (
     $kendo-editor-border-width: $kendo-editor-border-width,
     $kendo-editor-font-family: $kendo-editor-font-family,
@@ -99,5 +104,8 @@ $kendo-editor-content-padding: k-spacing(2) !default;
     $kendo-editor-inline-padding-y: $kendo-editor-inline-padding-y,
     $kendo-editor-filebrowser-tiles-padding-x: $kendo-editor-filebrowser-tiles-padding-x,
     $kendo-editor-filebrowser-tiles-padding-y: $kendo-editor-filebrowser-tiles-padding-y,
-    $kendo-editor-content-padding: $kendo-editor-content-padding
+    $kendo-editor-content-padding: $kendo-editor-content-padding,
+    $kendo-editor-ct-cell-text: $kendo-editor-ct-cell-text,
+    $kendo-editor-ct-cell-bg: $kendo-editor-ct-cell-bg,
+    $kendo-editor-ct-cell-border: $kendo-editor-ct-cell-border
 );

package/scss/expansion-panel/_variables.scss

@@ -22,13 +22,13 @@ $kendo-expander-line-height: var( --kendo-line-height, normal ) !default;
 
 /// The text color of the ExpansionPanel.
 /// @group expander
-$kendo-expander-text: $kendo-component-text !default;
+$kendo-expander-text: k-color(on-app-surface) !default;
 /// The background color of the ExpansionPanel.
 /// @group expander
-$kendo-expander-bg: $kendo-component-bg !default;
+$kendo-expander-bg: k-color(surface-alt) !default;
 /// The border color of the ExpansionPanel.
 /// @group expander
-$kendo-expander-border: $kendo-component-border !default;
+$kendo-expander-border: k-color(border) !default;
 
 /// The box shadow of the focused ExpansionPanel.
 /// @group expander
@@ -53,7 +53,7 @@ $kendo-expander-header-bg: transparent !default;
 $kendo-expander-header-border: null !default;
 /// The background color of the hovered ExpansionPanel header.
 /// @group expander
-$kendo-expander-header-hover-bg: if($kendo-enable-color-system, k-color( base-subtle-hover ), k-color-shade( $kendo-expander-bg, 1 )) !default;
+$kendo-expander-header-hover-bg: k-color(base-subtle-hover) !default;
 /// The background color of the focused ExpansionPanel header.
 /// @group expander
 $kendo-expander-header-focus-bg: null !default;
@@ -63,11 +63,11 @@ $kendo-expander-header-focus-shadow: $kendo-list-item-focus-shadow !default;
 
 /// The text color of the ExpansionPanel title.
 /// @group expander
-$kendo-expander-title-text: $kendo-color-primary !default;
+$kendo-expander-title-text: k-color(primary) !default;
 
 /// The text color of the ExpansionPanel sub-title.
 /// @group expander
-$kendo-expander-header-sub-title-text: $kendo-subtle-text !default;
+$kendo-expander-header-sub-title-text: k-color(subtle) !default;
 
 /// The horizontal margin of the ExpansionPanel indicator.
 /// @group expander

package/scss/fab/_variables.scss

@@ -97,7 +97,18 @@ $kendo-fab-item-icon-border-radius: 50% !default;
 
 /// The theme colors map for the FAB.
 /// @group floating-action-button
-$kendo-fab-theme-colors: $kendo-theme-colors !default;
+$kendo-fab-theme-colors:  (
+    "primary": k-color(primary),
+    "secondary": k-color(secondary),
+    "tertiary": k-color(tertiary),
+    "info": k-color(info),
+    "success": k-color(success),
+    "warning": k-color(warning),
+    "error": k-color(error),
+    "dark": k-color(dark),
+    "light": k-color(light),
+    "inverse": if($kendo-is-dark-theme, k-color(light), k-color(dark))
+) !default;
 
 /// The size map for the FAB.
 /// @group floating-action-button
@@ -135,13 +146,13 @@ $kendo-fab-outline-width: k-spacing(0.5) !default;
 
 /// The base text color of the FAB item.
 /// @group floating-action-button
-$kendo-fab-item-text: $kendo-component-text !default;
+$kendo-fab-item-text: k-color(on-app-surface) !default;
 /// The base background color of the FAB item.
 /// @group floating-action-button
-$kendo-fab-item-bg: $kendo-component-bg !default;
+$kendo-fab-item-bg: k-color(surface-alt) !default;
 /// The base border color of the FAB item.
 /// @group floating-action-button
-$kendo-fab-item-border: $kendo-component-border !default;
+$kendo-fab-item-border: k-color(border) !default;
 
 /// The base text color of the FAB item icon.
 /// @group floating-action-button

package/scss/filemanager/_variables.scss

@@ -21,13 +21,13 @@ $kendo-file-manager-font-size: var( --kendo-font-size, inherit ) !default;
 $kendo-file-manager-line-height: var( --kendo-line-height, normal ) !default;
 /// The background color of the FileManager.
 /// @group file-manager
-$kendo-file-manager-bg: $kendo-component-bg !default;
+$kendo-file-manager-bg: k-color(surface-alt) !default;
 /// The text color of the FileManager.
 /// @group file-manager
-$kendo-file-manager-text: $kendo-component-text !default;
+$kendo-file-manager-text: k-color(on-app-surface) !default;
 /// The border color of the FileManager.
 /// @group file-manager
-$kendo-file-manager-border: $kendo-component-border !default;
+$kendo-file-manager-border: k-color(border) !default;
 
 /// The border width of the FileManager Toolbar.
 /// @group file-manager
@@ -123,7 +123,7 @@ $kendo-file-manager-listview-item-border: null !default;
 $kendo-file-manager-listview-item-icon-bg: null !default;
 /// The text color of the FileManager ListView item icon.
 /// @group file-manager
-$kendo-file-manager-listview-item-icon-text: if($kendo-enable-color-system, k-color( subtle ), k-try-tint($kendo-file-manager-text, 4)) !default;
+$kendo-file-manager-listview-item-icon-text: k-color(subtle) !default;
 /// The border color of the FileManager ListView item icon.
 /// @group file-manager
 $kendo-file-manager-listview-item-icon-border: null !default;
@@ -180,7 +180,7 @@ $kendo-file-manager-preview-border: null !default;
 $kendo-file-manager-preview-icon-bg: null !default;
 /// The text color of the FileManager preview icon.
 /// @group file-manager
-$kendo-file-manager-preview-icon-text: if($kendo-enable-color-system, k-color( subtle ), k-try-tint($kendo-file-manager-text, 4)) !default;
+$kendo-file-manager-preview-icon-text: k-color(subtle) !default;
 /// The border color of the FileManager preview icon.
 /// @group file-manager
 $kendo-file-manager-preview-icon-border: null !default;

package/scss/filter/_variables.scss

@@ -22,10 +22,10 @@ $kendo-filter-operator-dropdown-width: 15em !default;
 
 /// The text color of the Filter preview field.
 /// @group filter
-$kendo-filter-preview-field-text: $kendo-color-primary !default;
+$kendo-filter-preview-field-text: k-color(primary) !default;
 /// The text color of the Filter preview operator.
 /// @group filter
-$kendo-filter-preview-operator-text: $kendo-subtle-text !default;
+$kendo-filter-preview-operator-text: k-color(subtle) !default;
 
 /// The box shadow of the focused Filter toolbar.
 /// @group filter

package/scss/forms/_variables.scss

@@ -47,7 +47,7 @@ $kendo-form-legend-border-width: 0 0 2px !default;
 $kendo-form-legend-border-style: solid !default;
 /// The border color of the Form legend.
 /// @group form
-$kendo-form-legend-border-color: $kendo-component-border !default;
+$kendo-form-legend-border-color: k-color(border) !default;
 /// The width of the Form legend.
 /// @group form
 $kendo-form-legend-width: 100% !default;
@@ -124,7 +124,7 @@ $kendo-inline-form-field-padding-y: calc( #{k-spacing(1)} + #{$kendo-input-borde
 
 /// The invalid text color of the Form.
 /// @group form
-$kendo-forms-invalid-color: $kendo-color-error !default;
+$kendo-forms-invalid-color: k-color(error) !default;
 
 
 /// The horizontal margin of the optional label in the Form.
@@ -174,7 +174,7 @@ $kendo-form-field-info-margin: k-spacing(2) !default;
 $kendo-fieldset-legend-bg: null !default;
 /// The text color of the Form legend.
 /// @group form
-$kendo-fieldset-legend-text: if($kendo-enable-color-system, k-color( on-app-surface ), k-try-shade( $kendo-body-text, 2 )) !default;
+$kendo-fieldset-legend-text: k-color(on-app-surface) !default;
 /// The border color of the Form legend.
 /// @group form
 $kendo-fieldset-legend-border: null !default;

package/scss/gantt/_variables.scss

@@ -20,13 +20,13 @@ $kendo-gantt-line-height: var( --kendo-line-height-sm, normal ) !default;
 
 /// The background color of the Gantt.
 /// @group gantt
-$kendo-gantt-bg: $kendo-component-bg !default;
+$kendo-gantt-bg: k-color(surface-alt) !default;
 /// The text color of the Gantt.
 /// @group gantt
-$kendo-gantt-text: $kendo-component-text !default;
+$kendo-gantt-text: k-color(on-app-surface) !default;
 /// The border color of the Gantt.
 /// @group gantt
-$kendo-gantt-border: $kendo-component-border !default;
+$kendo-gantt-border: k-color(border) !default;
 
 /// The background color of the Gantt TreeList.
 /// @group gantt
@@ -40,7 +40,7 @@ $kendo-gantt-treelist-border: null !default;
 
 /// The background color of the Gantt non-working days.
 /// @group gantt
-$kendo-gantt-nonwork-bg: if($kendo-enable-color-system, color-mix(in srgb, k-color( on-base ) 3%, transparent), rgba( k-contrast-color( $kendo-gantt-bg ), .025 )) !default;
+$kendo-gantt-nonwork-bg: color-mix(in srgb, k-color(on-base) 3%, transparent) !default;
 /// The text color of the Gantt non-working days.
 /// @group gantt
 $kendo-gantt-nonwork-text: null !default;
@@ -53,10 +53,10 @@ $kendo-gantt-nonwork-border: null !default;
 $kendo-gantt-line-size: 2px !default;
 /// The background fill color of the Gantt connecting lines.
 /// @group gantt
-$kendo-gantt-line-fill: if($kendo-enable-color-system, k-color( on-base ), k-contrast-color( $kendo-gantt-bg )) !default;
+$kendo-gantt-line-fill: k-color(on-base) !default;
 /// The background fill of the selected Gantt connecting lines.
 /// @group gantt
-$kendo-gantt-line-selected-fill: $kendo-color-primary !default;
+$kendo-gantt-line-selected-fill: k-color(primary) !default;
 
 /// The size of the Gantt task dot.
 /// @group gantt
@@ -85,23 +85,23 @@ $kendo-gantt-milestone-bg: $kendo-gantt-text !default;
 $kendo-gantt-milestone-border: $kendo-gantt-border !default;
 /// The background color of the selected Gantt milestone.
 /// @group gantt
-$kendo-gantt-milestone-selected-bg: $kendo-selected-bg !default;
+$kendo-gantt-milestone-selected-bg: k-color(primary) !default;
 /// The border color of the selected Gantt milestone.
 /// @group gantt
-$kendo-gantt-milestone-selected-border: $kendo-selected-border !default;
+$kendo-gantt-milestone-selected-border: k-color(primary) !default;
 
 /// The background color of the Gantt summary.
 /// @group gantt
-$kendo-gantt-summary-bg: if($kendo-enable-color-system, k-color( subtle ), k-try-tint( $kendo-gantt-text, 1 )) !default;
+$kendo-gantt-summary-bg: k-color(subtle) !default;
 /// The background color of the Gantt summary progress.
 /// @group gantt
-$kendo-gantt-summary-progress-bg: if($kendo-enable-color-system, k-color( on-base ), k-try-shade( $kendo-gantt-text, 5 )) !default;
+$kendo-gantt-summary-progress-bg: k-color(on-base) !default;
 /// The background color of the selected Gantt summary.
 /// @group gantt
-$kendo-gantt-summary-selected-bg: if($kendo-enable-color-system, k-color( primary-subtle-active ), k-try-tint( $kendo-selected-bg, 6 )) !default;
+$kendo-gantt-summary-selected-bg: k-color(primary-subtle-active) !default;
 /// The background color of the selected Gantt summary progress.
 /// @group gantt
-$kendo-gantt-summary-progress-selected-bg: $kendo-selected-bg !default;
+$kendo-gantt-summary-progress-selected-bg: k-color(primary) !default;
 
 /// The border width of the Gantt task.
 /// @group gantt
@@ -114,10 +114,10 @@ $kendo-gantt-task-padding-x: k-spacing(2) !default;
 $kendo-gantt-task-padding-y: k-spacing(1) !default;
 /// The background color of the Gantt task.
 /// @group gantt
-$kendo-gantt-task-bg: if($kendo-enable-color-system, k-color( subtle ), k-try-tint( $kendo-gantt-text, 2 )) !default;
+$kendo-gantt-task-bg: k-color(subtle) !default;
 /// The text color of the Gantt task.
 /// @group gantt
-$kendo-gantt-task-text: if($kendo-enable-color-system, k-color( base-subtle ), k-contrast-color( $kendo-gantt-text )) !default;
+$kendo-gantt-task-text: k-color(base-subtle) !default;
 /// The border color of the Gantt task.
 /// @group gantt
 $kendo-gantt-task-border: null !default;
@@ -126,16 +126,16 @@ $kendo-gantt-task-border: null !default;
 $kendo-gantt-task-progress-bg: $kendo-gantt-text !default;
 /// The background color of selected the Gantt task.
 /// @group gantt
-$kendo-gantt-task-selected-bg: if($kendo-enable-color-system, k-color( primary-subtle-active ), k-try-tint( $kendo-selected-bg, 6 )) !default;
+$kendo-gantt-task-selected-bg: k-color(primary-subtle-active) !default;
 /// The text color of the selected Gantt task.
 /// @group gantt
-$kendo-gantt-task-selected-text: $kendo-selected-text !default;
+$kendo-gantt-task-selected-text: k-color(on-primary) !default;
 /// The border color of the selected Gantt task.
 /// @group gantt
 $kendo-gantt-task-selected-border: null !default;
 /// The background color of the selected Gantt task progress.
 /// @group gantt
-$kendo-gantt-task-progress-selected-bg: $kendo-selected-bg !default;
+$kendo-gantt-task-progress-selected-bg: k-color(primary) !default;
 
 /// The padding of the Gantt task actions.
 /// @group gantt
@@ -204,24 +204,24 @@ $kendo-gantt-planned-offset-resize-handler-margin-x: 1.4em !default;
 
 /// The background color of the Gantt planned Tooltip.
 /// @group gantt
-$kendo-gantt-planned-bg: $kendo-color-primary !default;
+$kendo-gantt-planned-bg: k-color(primary) !default;
 /// The border color of the Gantt planned Tooltip.
 /// @group gantt
 $kendo-gantt-planned-border: $kendo-gantt-planned-bg !default;
 
 /// The background color of the Gantt delayed task.
 /// @group gantt
-$kendo-gantt-delayed-bg: $kendo-color-error !default;
+$kendo-gantt-delayed-bg: k-color(error) !default;
 /// The complement background color of the Gantt delayed task.
 /// @group gantt
-$kendo-gantt-delayed-bg-lighter: if($kendo-enable-color-system, k-color( error-emphasis ), k-color-tint($kendo-gantt-delayed-bg, 5)) !default;
+$kendo-gantt-delayed-bg-lighter: k-color(error-emphasis) !default;
 
 /// The background color of the Gantt advanced task.
 /// @group gantt
-$kendo-gantt-advanced-bg: $kendo-color-success !default;
+$kendo-gantt-advanced-bg: k-color(success) !default;
 /// The complement background color of the Gantt advanced task.
 /// @group gantt
-$kendo-gantt-advanced-bg-lighter: if($kendo-enable-color-system, k-color( success-emphasis ), k-color-tint($kendo-gantt-advanced-bg, 5)) !default;
+$kendo-gantt-advanced-bg-lighter: k-color(success-emphasis) !default;
 
 /// The text color of the Gantt delayed task action.
 /// @group gantt
@@ -241,10 +241,10 @@ $kendo-gantt-validation-tooltip-label-width: 50px !default;
 $kendo-gantt-validation-tooltip-border: #656565 !default;
 /// The border color of the valid Gantt validation Tooltip.
 /// @group gantt
-$kendo-gantt-validation-tooltip-valid-border: $kendo-color-success !default;
+$kendo-gantt-validation-tooltip-valid-border: k-color(success) !default;
 /// The border color of the invalid Gantt validation Tooltip.
 /// @group gantt
-$kendo-gantt-validation-tooltip-invalid-border: $kendo-color-error !default;
+$kendo-gantt-validation-tooltip-invalid-border: k-color(error) !default;
 
 /// The horizontal padding of the Gantt task Tooltip.
 /// @group gantt

package/scss/grid/_variables.scss

@@ -232,14 +232,14 @@ $kendo-grid-selection-aggregates-line-height: $kendo-grid-line-height !default;
 $kendo-grid-selection-aggregates-font-weight: var( --kendo-font-weight-bold, normal ) !default;
 
 $kendo-grid-sorted-icon-spacing: calc( #{k-spacing(2)} - 1px ) !default;
-$kendo-grid-sorted-bg: if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 3%, transparent), rgba( k-contrast-color( $kendo-grid-bg ), .02 )) !default;
-$kendo-grid-sorting-indicator-text: $kendo-color-primary !default;
+$kendo-grid-sorted-bg: color-mix(in srgb, k-color(on-app-surface) 3%, transparent) !default;
+$kendo-grid-sorting-indicator-text: k-color(primary) !default;
 $kendo-grid-sorting-index-font-size: var( --kendo-font-size-sm, inherit ) !default;
 $kendo-grid-sorting-index-height: $kendo-icon-size !default;
 $kendo-grid-sorting-index-spacing-y: calc( #{$kendo-icon-spacing} / 2 ) !default;
 $kendo-grid-sorting-index-spacing-x: calc( #{$kendo-grid-sorting-index-spacing-y} * -1 ) !default;
 
-$kendo-grid-grouping-row-bg: if($kendo-enable-color-system, k-color( base ), k-try-shade( $kendo-grid-bg, 1 )) !default;
+$kendo-grid-grouping-row-bg: k-color(base) !default;
 $kendo-grid-grouping-row-text: $kendo-grid-text !default;
 
 $kendo-grid-focus-shadow: $kendo-table-focus-shadow !default;
@@ -254,7 +254,7 @@ $kendo-grid-sticky-text: $kendo-grid-text !default;
 $kendo-grid-sticky-border: $kendo-grid-border !default;
 
 // Must be a solid color
-$kendo-grid-sticky-alt-bg: if($kendo-enable-color-system, k-color( base-subtle ), $kendo-grid-alt-bg) !default;
+$kendo-grid-sticky-alt-bg: k-color(base-subtle) !default;
 
 $kendo-grid-sticky-header-bg: $kendo-grid-header-bg !default;
 $kendo-grid-sticky-header-text: $kendo-grid-header-text !default;
@@ -263,12 +263,12 @@ $kendo-grid-sticky-header-border: $kendo-grid-sticky-border !default;
 $kendo-grid-sticky-footer-bg: $kendo-grid-header-bg !default;
 $kendo-grid-sticky-footer-hover-bg: $kendo-grid-hover-bg !default;
 
-$kendo-grid-sticky-selected-bg: if($kendo-enable-color-system, color-mix(in srgb, k-color( primary ) 25%, transparent), color.mix($kendo-selected-bg, #ffffff, 25%)) !default;
-$kendo-grid-sticky-selected-alt-bg: if($kendo-enable-color-system, color-mix(in srgb, k-color( primary ) 25%, transparent), k-try-shade( $kendo-grid-sticky-selected-bg, .5 )) !default;
+$kendo-grid-sticky-selected-bg: color-mix(in srgb, k-color(primary) 25%, transparent) !default;
+$kendo-grid-sticky-selected-alt-bg: color-mix(in srgb, k-color(primary) 25%, transparent) !default;
 
 // Must be a solid color
-$kendo-grid-sticky-hover-bg: if($kendo-enable-color-system, k-color( base-subtle-hover ), $kendo-grid-hover-bg) !default;
-$kendo-grid-sticky-selected-hover-bg: if($kendo-enable-color-system, color-mix(in srgb, k-color( primary ) 25%, transparent), k-try-shade( $kendo-grid-sticky-selected-bg, 1 )) !default;
+$kendo-grid-sticky-hover-bg: k-color(base-subtle-hover) !default;
+$kendo-grid-sticky-selected-hover-bg: color-mix(in srgb, k-color(primary) 25%, transparent) !default;
 
 $kendo-grid-column-menu-width: 230px !default;
 $kendo-grid-column-menu-max-width: 320px !default;
@@ -305,7 +305,7 @@ $kendo-grid-column-menu-group-header-border: $kendo-popup-border !default;
 $kendo-grid-column-menu-tabbed-tabstrip-content-padding-x: k-spacing(0) !default;
 $kendo-grid-column-menu-tabbed-tabstrip-content-padding-y: k-spacing(2) !default;
 
-$kendo-grid-column-menu-tabbed-bg: $kendo-base-bg !default;
+$kendo-grid-column-menu-tabbed-bg: k-color(surface) !default;
 
 $kendo-grid-drag-cell-width: ($kendo-icon-size * 2.25) !default;
 
@@ -319,10 +319,10 @@ $kendo-grid-group-footer-second-cell-border: 1px !default;
 
 /// The background color of the Grid row resize indicator.
 /// @group grid
-$kendo-grid-row-resizer-hover-bg: if($kendo-enable-color-system, color-mix(in srgb, k-color( on-base ) 20%, transparent), rgba( k-contrast-color( $kendo-grid-bg ), .12 )) !default;
+$kendo-grid-row-resizer-hover-bg: color-mix(in srgb, k-color(on-base) 20%, transparent) !default;
 /// The background color of the active Grid row resize indicator.
 /// @group grid
-$kendo-grid-row-resizer-active-bg: $kendo-color-primary !default;
+$kendo-grid-row-resizer-active-bg: k-color(primary) !default;
 /// The height of the Grid row resize indicator.
 /// @group grid
 $kendo-grid-row-resizer-height: k-spacing(0.5) !default;

package/scss/imageeditor/_variables.scss

@@ -25,15 +25,15 @@ $kendo-image-editor-resize-handle-margin-y: k-spacing(1px) !default;
 $kendo-image-editor-resize-handle-border-width: 0 2px 2px 0 !default;
 $kendo-image-editor-resize-handle-size: 15px !default;
 
-$kendo-image-editor-bg: $kendo-component-bg !default;
-$kendo-image-editor-text: $kendo-component-text !default;
-$kendo-image-editor-border: $kendo-component-border !default;
+$kendo-image-editor-bg: k-color(surface-alt) !default;
+$kendo-image-editor-text: k-color(on-app-surface) !default;
+$kendo-image-editor-border: k-color(border) !default;
 
 $kendo-image-editor-content-bg: #c6c6c6 !default;
 $kendo-image-editor-content-text: null !default;
 $kendo-image-editor-content-border: null !default;
 
-$kendo-image-editor-action-pane-bg: $kendo-component-bg !default;
+$kendo-image-editor-action-pane-bg: k-color(surface-alt) !default;
 $kendo-image-editor-action-pane-text: null !default;
 $kendo-image-editor-action-pane-border: null !default;
 

package/scss/index.scss

@@ -116,6 +116,7 @@
 @forward "./signature/_index.scss";
 @forward "./otp/_index.scss";
 @forward "./column-menu/_index.scss";
+@forward "./marquee/_index.scss";
 
 
 // Use component modules
@@ -152,6 +153,7 @@
 @use "./loader/_index.scss" as *;
 @use "./skeleton/_index.scss" as *;
 @use "./time-marker/_index.scss" as *;
+@use "./marquee/_index.scss" as *;
 
 
 // Native forms
@@ -323,6 +325,7 @@
     @include kendo-skeleton--styles();
     @include kendo-tooltip--styles();
     @include kendo-time-marker--styles();
+    @include kendo-marquee--styles();
 
 
     // Form helpers