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

package/scss/dock-manager/_variables.scss

@@ -10,7 +10,7 @@ $kendo-dock-manager-border-width: 1px !default;
 $kendo-dock-manager-border-style: solid !default;
 /// The color of the border around the DockManager component.
 /// @group dock-manager
-$kendo-dock-manager-border: $kendo-base-border !default;
+$kendo-dock-manager-border: k-color(border) !default;
 
 /// The vertical padding of the pane header in the DockManager component.
 /// @group dock-manager
@@ -26,7 +26,7 @@ $kendo-dock-manager-pane-header-border-width: $kendo-dock-manager-border-width !
 $kendo-dock-manager-pane-header-border-style: solid !default;
 /// The background color of the pane header in the DockManager component.
 /// @group dock-manager
-$kendo-dock-manager-pane-header-bg: $kendo-component-bg !default;
+$kendo-dock-manager-pane-header-bg: k-color(surface-alt) !default;
 
 /// The vertical padding of the pane title in the DockManager component.
 /// @group dock-manager
@@ -76,10 +76,10 @@ $kendo-dock-manager-unpinned-container-shadow: 4px 0px 5px 0px rgba(0, 0, 0, 0.0
 $kendo-dock-indicator-padding: k-spacing(1.5) !default;
 /// The background color of the dock indicator in the DockManager component.
 /// @group dock-manager
-$kendo-dock-indicator-bg: $kendo-base-bg !default;
+$kendo-dock-indicator-bg: k-color(app-surface) !default;
 /// The text color of the dock indicator in the DockManager component.
 /// @group dock-manager
-$kendo-dock-indicator-text: $kendo-color-primary !default;
+$kendo-dock-indicator-text: k-color(primary) !default;
 /// The outline width of the dock indicator in the DockManager component.
 /// @group dock-manager
 $kendo-dock-indicator-outline-width: 1px !default;
@@ -95,7 +95,7 @@ $kendo-dock-indicator-shadow: drop-shadow( 0px 1px 18px rgba(0, 0, 0, 0.12) ) dr
 
 ///  The background color of the hovered dock indicator in the DockManager component.
 /// @group dock-manager
-$kendo-dock-indicator-hover-bg: if($kendo-enable-color-system, k-color( primary-hover ), color.mix( $kendo-color-white, $kendo-color-primary, 8% )) !default;
+$kendo-dock-indicator-hover-bg: k-color(primary-hover) !default;
 /// The text color of the hovered dock indicator in the DockManager component.
 /// @group dock-manager
 $kendo-dock-indicator-hover-text: $kendo-color-white !default;
@@ -111,10 +111,10 @@ $kendo-dock-manager-dock-preview-border-style: dashed !default;
 $kendo-dock-manager-dock-preview-border-radius: k-border-radius(sm) !default;
 /// The background color of the dropping area in the DockManager component.
 /// @group dock-manager
-$kendo-dock-manager-dock-preview-bg: if($kendo-enable-color-system, color-mix(in srgb, k-color( primary ) 16%, transparent), rgba( $kendo-color-primary, .16 )) !default;
+$kendo-dock-manager-dock-preview-bg: color-mix(in srgb, k-color(primary) 16%, transparent) !default;
 /// The border color of the dropping area in the DockManager component.
 /// @group dock-manager
-$kendo-dock-manager-dock-preview-border: $kendo-color-primary !default;
+$kendo-dock-manager-dock-preview-border: k-color(primary) !default;
 
 @forward "@progress/kendo-theme-core/scss/components/dock-manager/_variables.scss" with (
     $kendo-dock-manager-border-width: $kendo-dock-manager-border-width,

package/scss/draggable/_variables.scss

@@ -11,8 +11,8 @@ $kendo-drag-hint-font-size: var( --kendo-font-size, inherit ) !default;
 $kendo-drag-hint-font-family: var( --kendo-font-family, inherit ) !default;
 $kendo-drag-hint-line-height: math.div( 20, 14 ) !default;
 
-$kendo-drag-hint-bg: if($kendo-enable-color-system, k-color( base-subtle ), k-try-shade( $kendo-body-bg )) !default;
-$kendo-drag-hint-text: $kendo-body-text !default;
+$kendo-drag-hint-bg: k-color(base-subtle) !default;
+$kendo-drag-hint-text: k-color(on-app-surface) !default;
 $kendo-drag-hint-border: unset !default;
 $kendo-drag-hint-gradient: null !default;
 $kendo-drag-hint-shadow: k-elevation(3) !default;
@@ -28,7 +28,7 @@ $kendo-drop-hint-line-h-height: 1px !default;
 $kendo-drop-hint-line-v-width: $kendo-drop-hint-line-h-height !default;
 $kendo-drop-hint-line-v-height: $kendo-drop-hint-line-h-width !default;
 
-$kendo-drop-hint-bg: $kendo-color-primary !default;
+$kendo-drop-hint-bg: k-color(primary) !default;
 
 @forward "@progress/kendo-theme-core/scss/components/draggable/_variables.scss" with (
     $kendo-drag-hint-padding-x: $kendo-drag-hint-padding-x,

package/scss/drawer/_variables.scss

@@ -5,13 +5,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;
@@ -82,14 +82,14 @@ $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
-$kendo-drawer-focus-bg: $kendo-hover-bg !default;
+$kendo-drawer-focus-bg: k-color(base-hover) !default;
 /// The box shadow of the focused Drawer item.
 /// @group drawer
 $kendo-drawer-focus-shadow: none !default;
@@ -99,14 +99,14 @@ $kendo-drawer-focus-shadow: none !default;
 $kendo-drawer-selected-bg: unset !default;
 /// The text color of the selected Drawer item.
 /// @group drawer
-$kendo-drawer-selected-text: $kendo-color-secondary !default;
+$kendo-drawer-selected-text: k-color(secondary) !default;
 
 /// The background color of the selected and hovered Drawer item.
 /// @group drawer
-$kendo-drawer-selected-hover-bg: $kendo-hover-bg !default;
+$kendo-drawer-selected-hover-bg: k-color(base-hover) !default;
 /// The text color of the selected and hovered Drawer item.
 /// @group drawer
-$kendo-drawer-selected-hover-text: $kendo-color-secondary !default;
+$kendo-drawer-selected-hover-text: k-color(secondary) !default;
 
 @forward "@progress/kendo-theme-core/scss/components/drawer/_variables.scss" with (
     $kendo-drawer-bg: $kendo-drawer-bg,

package/scss/dropzone/_variables.scss

@@ -29,23 +29,23 @@ $kendo-dropzone-line-height: math.div( 20, 14 ) !default;
 
 /// The background color of the DropZone.
 /// @group dropzone
-$kendo-dropzone-bg: if($kendo-enable-color-system, k-color( base-subtle ), k-try-shade( $kendo-base-bg, 1 )) !default;
+$kendo-dropzone-bg: k-color(base-subtle) !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
@@ -65,7 +65,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 (
     $kendo-dropzone-padding-x: $kendo-dropzone-padding-x,

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,10 @@ $kendo-editor-filebrowser-tiles-padding-y: k-spacing(1) !default;
 /// @group editor
 $kendo-editor-content-padding: k-spacing(4) !default;
 
+$kendo-editor-ct-cell-text: k-color(on-secondary) !default;
+$kendo-editor-ct-cell-bg: k-color(secondary) !default;
+$kendo-editor-ct-cell-border: k-color(border) !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 +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

@@ -20,13 +20,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
@@ -61,11 +61,11 @@ $kendo-expander-header-focus-shadow: none !default;
 
 /// The text color of the ExpansionPanel title.
 /// @group expander
-$kendo-expander-title-text: $kendo-color-secondary !default;
+$kendo-expander-title-text: k-color(secondary) !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/_theme.scss

@@ -11,7 +11,7 @@
         .k-fab-solid-#{$name} {
             @include box-shadow($kendo-fab-shadow);
             border-color: $color;
-            color: if($kendo-enable-color-system, k-color( on-#{$name} ), k-contrast-color( $color ));
+            color: k-color(on-#{$name});
             background-color: $color;
         }
     }
@@ -20,8 +20,8 @@
     @each $name, $color in $kendo-fab-theme-colors {
         .k-hover.k-fab-solid-#{$name},
         .k-fab-solid-#{$name}:hover {
-            border-color: if($kendo-enable-color-system, k-color( #{$name}-hover ), k-true-mix( #ffffff, $color, 8%));
-            background-color: if($kendo-enable-color-system, k-color( #{$name}-hover ), k-true-mix( #ffffff, $color, 8%));
+            border-color: k-color(#{$name}-hover);
+            background-color: k-color(#{$name}-hover);
         }
     }
 
@@ -29,8 +29,8 @@
     @each $name, $color in $kendo-fab-theme-colors {
         .k-focus.k-fab-solid-#{$name},
         .k-fab-solid-#{$name}:focus {
-            border-color: if($kendo-enable-color-system, k-color( #{$name}-active ), k-true-mix( #ffffff, $color, 12%));
-            background-color: if($kendo-enable-color-system, k-color( #{$name}-active ), k-true-mix( #ffffff, $color, 12%));
+            border-color: k-color(#{$name}-active);
+            background-color: k-color(#{$name}-active);
         }
     }
 
@@ -39,8 +39,8 @@
         .k-active.k-fab-solid-#{$name},
         .k-selected.k-fab-solid-#{$name},
         .k-fab-solid-#{$name}:active {
-            border-color: if($kendo-enable-color-system, k-color( #{$name}-active ), k-true-mix( #ffffff, $color, 16%));
-            background-color: if($kendo-enable-color-system, k-color( #{$name}-active ), k-true-mix( #ffffff, $color, 16%));
+            border-color: k-color(#{$name}-active);
+            background-color: k-color(#{$name}-active);
             box-shadow: $kendo-fab-active-shadow;
         }
     }
@@ -50,9 +50,9 @@
         .k-disabled.k-fab-solid-#{$name},
         .k-fab-solid-#{$name}:disabled {
             @include box-shadow($kendo-fab-disabled-shadow);
-            border-color: if($kendo-enable-color-system, transparent, k-try-tint( k-try-shade( $kendo-body-bg, 12% ), 5));
-            background-color: if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 9%, transparent), k-try-tint( k-try-shade( $kendo-body-bg, 12% ), 5));
-            color: if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 32%, transparent), k-color-tint( $kendo-disabled-text, 4));
+            border-color: transparent;
+            background-color: color-mix(in srgb, k-color(on-app-surface) 9%, transparent);
+            color: color-mix(in srgb, k-color(on-app-surface) 32%, transparent);
             opacity: 1;
         }
     }
@@ -78,25 +78,25 @@
     // Hover state
     .k-fab-item.k-hover .k-fab-item-icon,
     .k-fab-item:hover .k-fab-item-icon {
-        border-color: if($kendo-enable-color-system, k-color( base-hover ), k-true-mix( #000000, $kendo-fab-item-icon-border, 8%));
-        background-color: if($kendo-enable-color-system, k-color( base-hover ), k-true-mix( #000000, $kendo-fab-item-icon-bg, 8%));
-        color: if($kendo-enable-color-system, k-color( on-base ), k-true-mix( #000000, $kendo-fab-item-icon-text, 8%));
+        border-color: k-color(base-hover);
+        background-color: k-color(base-hover);
+        color: k-color(on-base);
     }
 
     // Focus state
     .k-fab-item:focus .k-fab-item-icon,
     .k-fab-item.k-focus .k-fab-item-icon {
-        border-color: if($kendo-enable-color-system, k-color( base-active ), k-true-mix( #000000, $kendo-fab-item-icon-border, 12%));
-        background-color: if($kendo-enable-color-system, k-color( base-active ), k-true-mix( #000000, $kendo-fab-item-icon-bg, 12%));
-        color: if($kendo-enable-color-system, k-color( on-base ), k-true-mix( #000000, $kendo-fab-item-icon-text, 12%));
+        border-color: k-color(base-active);
+        background-color: k-color(base-active);
+        color: k-color(on-base);
     }
 
     // Active state
     .k-fab-item.k-active .k-fab-item-icon,
     .k-fab-item:active .k-fab-item-icon {
         @include box-shadow($kendo-fab-item-active-shadow);
-        border-color: if($kendo-enable-color-system, k-color( base ), k-true-mix( #ffffff, $kendo-fab-item-icon-border, 12%));
-        background-color: if($kendo-enable-color-system, k-color( base ), k-true-mix( #ffffff, $kendo-fab-item-icon-bg, 12%));
+        border-color: k-color(base);
+        background-color: k-color(base);
     }
 
     // Disabled state
@@ -107,8 +107,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 ) 60%, transparent), k-try-tint( $kendo-fab-item-bg, 8 ));
-            color: if($kendo-enable-color-system, color-mix(in srgb, k-color( on-base ) 60%, transparent), k-try-tint( $kendo-fab-item-text, 8 ));
+            background-color: color-mix(in srgb, k-color(base) 60%, transparent);
+            color: color-mix(in srgb, k-color(on-base) 60%, 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
@@ -129,13 +140,13 @@ $kendo-fab-active-shadow: k-elevation(7) !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,20 +21,20 @@ $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
 $kendo-file-manager-toolbar-border-width: $kendo-file-manager-border-width !default;
 /// The background color of the FileManager Toolbar.
 /// @group file-manager
-$kendo-file-manager-toolbar-bg: if($kendo-enable-color-system, k-color( surface ), k-try-shade( $kendo-button-bg, .5 )) !default;
+$kendo-file-manager-toolbar-bg: k-color(surface) !default;
 /// The text color of the FileManager Toolbar.
 /// @group file-manager
 $kendo-file-manager-toolbar-text: null !default;
@@ -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/floating-label/_theme.scss

@@ -13,7 +13,7 @@
         .k-invalid + .k-floating-label,
         .ng-invalid.ng-touched + .k-floating-label,
         .ng-invalid.ng-dirty + .k-floating-label {
-            @include fill( $color: $kendo-color-error );
+            @include fill( $color: k-color(error) );
         }
     }
 

package/scss/floating-label/_variables.scss

@@ -44,14 +44,14 @@ $kendo-floating-label-transition: .15s cubic-bezier( .4, 0, .2, 1 ) !default;
 $kendo-floating-label-bg: null !default;
 /// The text color of the Floating Label.
 /// @group floating-label
-$kendo-floating-label-text: $kendo-subtle-text !default;
+$kendo-floating-label-text: k-color(subtle) !default;
 
 /// The background color of the focused Floating Label.
 /// @group floating-label
 $kendo-floating-label-focus-bg: null !default;
 /// The text color of the focused Floating Label.
 /// @group floating-label
-$kendo-floating-label-focus-text: $kendo-color-primary !default;
+$kendo-floating-label-focus-text: k-color(primary) !default;
 
 @forward "@progress/kendo-theme-core/scss/components/floating-label/_variables.scss" with (
     $kendo-floating-label-scale: $kendo-floating-label-scale,

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;

package/scss/gantt/_variables.scss

@@ -20,13 +20,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(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( subtle ), color.mix( $kendo-gantt-text, $kendo-gantt-bg )) !default;
+$kendo-gantt-line-fill: k-color(subtle) !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(secondary) !default;
 
 /// The size of the Gantt task dot.
 /// @group gantt
@@ -79,29 +79,29 @@ $kendo-gantt-dot-hover-border: $kendo-gantt-text !default;
 
 /// The background color of the Gantt milestone.
 /// @group gantt
-$kendo-gantt-milestone-bg: $kendo-color-primary !default;
+$kendo-gantt-milestone-bg: k-color(primary) !default;
 /// The border color of the Gantt milestone.
 /// @group gantt
-$kendo-gantt-milestone-border: $kendo-color-primary !default;
+$kendo-gantt-milestone-border: k-color(primary) !default;
 /// The background color of the selected Gantt milestone.
 /// @group gantt
-$kendo-gantt-milestone-selected-bg: $kendo-color-secondary !default;
+$kendo-gantt-milestone-selected-bg: k-color(secondary) !default;
 /// The border color of the selected Gantt milestone.
 /// @group gantt
-$kendo-gantt-milestone-selected-border: $kendo-color-secondary !default;
+$kendo-gantt-milestone-selected-border: k-color(secondary) !default;
 
 /// The background color of the Gantt summary.
 /// @group gantt
-$kendo-gantt-summary-bg: if($kendo-enable-color-system, k-color( primary-emphasis ), color.mix( $kendo-color-primary, $kendo-gantt-bg )) !default;
+$kendo-gantt-summary-bg: k-color(primary-emphasis) !default;
 /// The background color of the Gantt summary progress.
 /// @group gantt
-$kendo-gantt-summary-progress-bg: $kendo-color-primary !default;
+$kendo-gantt-summary-progress-bg: k-color(primary) !default;
 /// The background color of the selected Gantt summary.
 /// @group gantt
-$kendo-gantt-summary-selected-bg: if($kendo-enable-color-system, k-color( secondary-subtle-active ), color.mix( $kendo-color-secondary, $kendo-gantt-bg )) !default;
+$kendo-gantt-summary-selected-bg: k-color(secondary-subtle-active) !default;
 /// The background color of the selected Gantt summary progress.
 /// @group gantt
-$kendo-gantt-summary-progress-selected-bg: $kendo-color-secondary !default;
+$kendo-gantt-summary-progress-selected-bg: k-color(secondary) !default;
 
 /// The horizontal padding of the Gantt task.
 /// @group gantt
@@ -114,28 +114,28 @@ $kendo-gantt-task-padding-y: k-spacing(1) !default;
 $kendo-gantt-task-border-width: 0px !default;
 /// The background color of the Gantt task.
 /// @group gantt
-$kendo-gantt-task-bg: if($kendo-enable-color-system, k-color( primary-emphasis ), color.mix( $kendo-color-primary, $kendo-gantt-bg )) !default;
+$kendo-gantt-task-bg: k-color(primary-emphasis) !default;
 /// The text color of the Gantt task.
 /// @group gantt
-$kendo-gantt-task-text: $kendo-color-primary-contrast !default;
+$kendo-gantt-task-text: k-color(on-primary) !default;
 /// The border color of the Gantt task.
 /// @group gantt
 $kendo-gantt-task-border: null !default;
 /// The background color of the Gantt task progress.
 /// @group gantt
-$kendo-gantt-task-progress-bg: $kendo-color-primary !default;
+$kendo-gantt-task-progress-bg: k-color(primary) !default;
 /// The background color of selected the Gantt task.
 /// @group gantt
-$kendo-gantt-task-selected-bg: if($kendo-enable-color-system, k-color( secondary-subtle-active ), color.mix( $kendo-color-secondary, $kendo-gantt-bg )) !default;
+$kendo-gantt-task-selected-bg: k-color(secondary-subtle-active) !default;
 /// The text color of the selected Gantt task.
 /// @group gantt
-$kendo-gantt-task-selected-text: $kendo-color-secondary-contrast !default;
+$kendo-gantt-task-selected-text: k-color(secondary)-contrast !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-color-secondary !default;
+$kendo-gantt-task-progress-selected-bg: k-color(secondary) !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