@progress/kendo-theme-bootstrap 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(app-surface) !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, inherit ) !default;
 /// The line height of the Drawer item.
 /// @group drawer
 $kendo-drawer-item-line-height: var( --kendo-line-height-lg, normal ) !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
@@ -83,31 +98,35 @@ $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-subtle-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
-$kendo-drawer-focus-bg: $kendo-hover-bg !default;
+$kendo-drawer-focus-bg: k-color(base-subtle-hover) !default;
 /// The box shadow of the focused Drawer item.
 /// @group drawer
 $kendo-drawer-focus-shadow: inset 0 0 0 2px rgba( black, .15 ) !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: if($kendo-enable-color-system, k-color( primary-hover ), k-try-shade( $kendo-selected-bg, 1 )) !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-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 (
@@ -125,12 +144,17 @@ $kendo-drawer-selected-hover-text: $kendo-selected-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,
@@ -141,5 +165,6 @@ $kendo-drawer-selected-hover-text: $kendo-selected-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

@@ -29,23 +29,23 @@ $kendo-dropzone-line-height: var( --kendo-line-height, normal ) !default;
 
 /// The background color of the DropZone.
 /// @group dropzone
-$kendo-dropzone-bg: if($kendo-enable-color-system, k-color( surface ), if( k-is-light( $kendo-component-bg ), $kendo-color-light, $kendo-color-dark )) !default;
+$kendo-dropzone-bg: k-color(surface) !default;
 /// The text color of the DropZone.
 /// @group dropzone
-$kendo-dropzone-text: $kendo-component-text !default;
+$kendo-dropzone-text: k-color(on-app-surface) !default;
 /// The border color of the DropZone.
 /// @group dropzone
-$kendo-dropzone-border: $kendo-component-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, 8 )) !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
@@ -65,7 +65,7 @@ $kendo-dropzone-note-font-size: var( --kendo-font-size-xs, inherit ) !default;
 $kendo-dropzone-note-spacing: null !default;
 /// The text color of the DropZone note.
 /// @group dropzone
-$kendo-dropzone-note-text: if($kendo-enable-color-system, k-color( subtle ) , $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
@@ -74,6 +74,10 @@ $kendo-editor-filebrowser-tiles-padding-x: k-spacing(4) !default;
 /// @group editor
 $kendo-editor-filebrowser-tiles-padding-y: 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;
+
 /// The padding of the Editor content.
 /// @group editor
 $kendo-editor-content-padding: k-spacing(4) !default;
@@ -99,5 +103,8 @@ $kendo-editor-content-padding: k-spacing(4) !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

@@ -21,13 +21,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(app-surface) !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
@@ -62,11 +62,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: if($kendo-enable-color-system, k-color( subtle ) , $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/_theme.scss

@@ -13,7 +13,7 @@
             outline: $kendo-fab-border-width $kendo-fab-outline-style $color;
             outline-offset: -$kendo-fab-border-width;
             border-color: $color;
-            color: if($kendo-enable-color-system, k-color( on-#{$name} ), k-contrast-legacy( $color ));
+            color: k-color(on-#{$name});
             background-color: $color;
         }
     }
@@ -22,9 +22,9 @@
     @each $name, $color in $kendo-fab-theme-colors {
         .k-fab-solid-#{$name}:hover,
         .k-fab-solid-#{$name}.k-hover {
-            border-color: if($kendo-enable-color-system, k-color( #{$name}-hover ), k-color-darken( $color, 10% ));
-            color: if($kendo-enable-color-system, k-color( on-#{$name} ), k-contrast-legacy( k-color-darken( $color, 7.5% ) ));
-            background-color: if($kendo-enable-color-system, k-color( #{$name}-hover ), k-color-darken( $color, 7.5% ));
+            border-color: k-color(#{$name}-hover);
+            color: k-color(on-#{$name});
+            background-color: k-color(#{$name}-hover);
         }
     }
 
@@ -32,7 +32,7 @@
     @each $name, $color in $kendo-fab-theme-colors {
         .k-fab-solid-#{$name}:focus,
         .k-fab-solid-#{$name}.k-focus {
-            outline: $kendo-fab-outline-width $kendo-fab-outline-style if($kendo-enable-color-system, color-mix(in srgb, k-color( $name ) 50%, transparent), rgba( $color, .5 ));
+            outline: $kendo-fab-outline-width $kendo-fab-outline-style color-mix(in srgb, k-color($name) 50%, transparent);
         }
     }
 
@@ -42,9 +42,9 @@
         .k-fab-solid-#{$name}.k-active,
         .k-fab-solid-#{$name}.k-selected {
             @include box-shadow( $kendo-fab-active-shadow );
-            border-color: if($kendo-enable-color-system, k-color( #{$name}-active ), k-color-darken( $color, 12.5% ));
-            color: if($kendo-enable-color-system, k-color( on-#{$name} ), k-contrast-legacy( k-color-darken( $color, 10% ) ));
-            background-color: if($kendo-enable-color-system, k-color( #{$name}-active ), k-color-darken( $color, 10% ));
+            border-color: k-color(#{$name}-active);
+            color: k-color(on-#{$name});
+            background-color: k-color(#{$name}-active);
         }
     }
 
@@ -53,8 +53,8 @@
         .k-fab-solid-#{$name}:disabled,
         .k-fab-solid-#{$name}.k-disabled {
             @include box-shadow( $kendo-fab-disabled-shadow );
-            background-color: if($kendo-enable-color-system, color-mix(in srgb, k-color( $name ) 65%, transparent), k-try-tint( $color, 4.5 ));
-            color: if($kendo-enable-color-system, color-mix(in srgb, k-color( on-#{$name} ) 65%, transparent), k-try-tint( k-contrast-legacy( $color ), 5 ));
+            background-color: color-mix(in srgb, k-color($name) 65%, transparent);
+            color: color-mix(in srgb, k-color(on-#{$name}) 65%, transparent);
             opacity: 1;
         }
     }
@@ -83,11 +83,11 @@
     .k-fab-item:hover .k-fab-item-icon,
     .k-fab-item.k-hover .k-fab-item-icon {
         @include box-shadow( $kendo-fab-item-shadow );
-        outline: $kendo-fab-border-width $kendo-fab-item-outline-style if($kendo-enable-color-system, k-color( base-hover ), k-try-darken( $kendo-fab-item-icon-border, 10% ));
+        outline: $kendo-fab-border-width $kendo-fab-item-outline-style k-color(base-hover);
         outline-offset: -$kendo-fab-border-width;
-        border-color: if($kendo-enable-color-system, k-color( base-hover ), k-color-darken( $kendo-fab-item-icon-border, 10% ));
-        color: if($kendo-enable-color-system, k-color( on-base ), k-contrast-legacy( k-color-darken( $kendo-fab-item-icon-bg, 7.5% ) ));
-        background-color: if($kendo-enable-color-system, k-color( base-hover ), k-color-darken( $kendo-fab-item-icon-bg, 7.5% ));
+        border-color: k-color(base-hover);
+        color: k-color(on-base);
+        background-color: k-color(base-hover);
     }
 
     // Focus state
@@ -95,18 +95,18 @@
     .k-fab-item.k-focus .k-fab-item-text,
     .k-fab-item:focus .k-fab-item-icon,
     .k-fab-item.k-focus .k-fab-item-icon {
-        outline: $kendo-fab-item-outline-width $kendo-fab-item-outline-style if($kendo-enable-color-system, color-mix(in srgb, k-color( base ) 50%, transparent), rgba( $kendo-fab-item-icon-border, .5 ));
+        outline: $kendo-fab-item-outline-width $kendo-fab-item-outline-style color-mix(in srgb, k-color(base) 50%, transparent);
     }
 
     // Active state
     .k-fab-item:active .k-fab-item-icon,
     .k-fab-item.k-active .k-fab-item-icon {
         @include box-shadow( $kendo-fab-item-active-shadow );
-        outline: $kendo-fab-border-width solid if($kendo-enable-color-system, k-color( base-active ), k-color-darken( $kendo-fab-item-icon-border, 12.5% ));
+        outline: $kendo-fab-border-width solid k-color(base-active);
         outline-offset: -$kendo-fab-border-width;
-        border-color: if($kendo-enable-color-system, k-color( base-active ), k-color-darken( $kendo-fab-item-icon-border, 12.5% ));
-        color: if($kendo-enable-color-system, k-color( on-base ), k-contrast-legacy( k-color-darken( $kendo-fab-item-icon-bg, 10% ) ));
-        background-color: if($kendo-enable-color-system, k-color( base-active ), k-color-darken( $kendo-fab-item-icon-bg, 10% ));
+        border-color: k-color(base-active);
+        color: k-color(on-base);
+        background-color: k-color(base-active);
     }
 
     // Disabled state
@@ -117,8 +117,8 @@
         .k-fab-item-text,
         .k-fab-item-icon {
             @include box-shadow( $kendo-fab-item-disabled-shadow );
-            background-color: if($kendo-enable-color-system, color-mix(in srgb, k-color( base ) 65%, transparent), k-try-tint( $kendo-fab-item-bg, 8 ));
-            color: if($kendo-enable-color-system, color-mix(in srgb, k-color( on-base ) 65%, transparent), k-try-tint( $kendo-fab-item-text, 8 ));
+            background-color: color-mix(in srgb, k-color(base) 65%, transparent);
+            color: color-mix(in srgb, k-color(on-base) 65%, transparent);
         }
     }
 

package/scss/fab/_variables.scss

@@ -98,7 +98,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: 3px !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(app-surface) !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

@@ -23,13 +23,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(app-surface) !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
@@ -125,7 +125,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;
@@ -182,7 +182,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,14 +22,14 @@ $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: if($kendo-enable-color-system, k-color( subtle ) , $kendo-subtle-text) !default;
+$kendo-filter-preview-operator-text: k-color(subtle)  !default;
 
 /// The box shadow of the focused Filter toolbar.
 /// @group filter
-$kendo-filter-toolbar-focus-shadow: 0 0 0 .25rem if($kendo-enable-color-system, color-mix(in srgb, k-color( primary ) 25%, transparent), rgba( $kendo-color-primary, .25 )) !default;
+$kendo-filter-toolbar-focus-shadow: 0 0 0 .25rem color-mix(in srgb, k-color(primary) 25%, transparent) !default;
 
 
 @forward "@progress/kendo-theme-core/scss/components/filter/_variables.scss" with (

package/scss/forms/_variables.scss

@@ -46,7 +46,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;
@@ -122,7 +122,7 @@ $kendo-inline-form-field-padding-y: calc( #{k-spacing(2)} + #{$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.

package/scss/gantt/_variables.scss

@@ -21,13 +21,13 @@ $kendo-gantt-line-height: var( --kendo-line-height, normal ) !default;
 
 /// The background color of the Gantt.
 /// @group gantt
-$kendo-gantt-bg: $kendo-component-bg !default;
+$kendo-gantt-bg: k-color(app-surface) !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
@@ -41,7 +41,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;
@@ -54,10 +54,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 ), color.mix( $kendo-gantt-text, $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-selected-bg !default;
+$kendo-gantt-line-selected-fill: k-color(primary) !default;
 
 /// The size of the Gantt task dot.
 /// @group gantt
@@ -80,29 +80,29 @@ $kendo-gantt-dot-hover-border: $kendo-gantt-text !default;
 
 /// The background color of the Gantt milestone.
 /// @group gantt
-$kendo-gantt-milestone-bg: if($kendo-enable-color-system, k-color( base ), if( k-is-light( $kendo-gantt-bg ), #dee2e6, #495057 )) !default;
+$kendo-gantt-milestone-bg: k-color(base) !default;
 /// The border color of the Gantt milestone.
 /// @group gantt
-$kendo-gantt-milestone-border: if($kendo-enable-color-system, k-color( border-alt ), k-try-shade( $kendo-gantt-milestone-bg, 2 )) !default;
+$kendo-gantt-milestone-border: k-color(border-alt) !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 ), color.mix( $kendo-gantt-text, $kendo-gantt-bg )) !default;
+$kendo-gantt-summary-bg: k-color(subtle) !default;
 /// The background color of the Gantt summary progress.
 /// @group gantt
 $kendo-gantt-summary-progress-bg: $kendo-gantt-text !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 ), color.mix( $kendo-selected-bg, $kendo-gantt-bg )) !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 horizontal padding of the Gantt task.
 /// @group gantt
@@ -115,28 +115,28 @@ $kendo-gantt-task-padding-y: k-spacing(1) !default;
 $kendo-gantt-task-border-width: 1px !default;
 /// The background color of the Gantt task.
 /// @group gantt
-$kendo-gantt-task-bg: if($kendo-enable-color-system, k-color( base ), if( k-is-light( $kendo-gantt-bg ), #dee2e6, #495057 )) !default;
+$kendo-gantt-task-bg: k-color(base) !default;
 /// The text color of the Gantt task.
 /// @group gantt
-$kendo-gantt-task-text: if($kendo-enable-color-system, k-color( on-base ), k-contrast-color( $kendo-gantt-task-bg )) !default;
+$kendo-gantt-task-text: k-color(on-base) !default;
 /// The border color of the Gantt task.
 /// @group gantt
-$kendo-gantt-task-border: if($kendo-enable-color-system, k-color( border-alt ), if( k-is-light( $kendo-gantt-bg ), #ced4da, #6c757d )) !default;
+$kendo-gantt-task-border: k-color(border-alt) !default;
 /// The background color of the Gantt task progress.
 /// @group gantt
-$kendo-gantt-task-progress-bg: if($kendo-enable-color-system, k-color( border-alt ), if( k-is-light( $kendo-gantt-bg ), #ced4da, #6c757d )) !default;
+$kendo-gantt-task-progress-bg: k-color(border-alt) !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 ), color.mix( $kendo-selected-bg, $kendo-gantt-bg )) !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: $kendo-selected-bg !default;
+$kendo-gantt-task-selected-border: k-color(primary) !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.2em !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
 $kendo-gantt-task-tooltip-padding-x: k-spacing(4) !default;