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

package/scss/components/dataviz/_theme.scss

@@ -1,7 +1,7 @@
 
 @use "../../mixins/index.import.scss" as *;
 @use "../../color-system/_constants.scss" as *;
-@use "../../color-system/_swatch-legacy.scss" as *;
+@use "../../color-system/_functions.import.scss" as *;
 @use "./variables.scss" as *;
 @use "../button/_variables.scss" as *;
 
@@ -74,7 +74,7 @@
     }
 
     .k-mask {
-        background-color: $kendo-component-bg;
+        background-color: k-color(surface-alt);
         opacity: .8;
     }
 
@@ -86,31 +86,30 @@
     // Treemap
     .k-treemap {
         @include fill(
-            $kendo-component-text,
-            $kendo-component-bg,
-            $kendo-component-border
+            $kendo-treemap-text,
+            $kendo-treemap-bg,
+            $kendo-treemap-border
         );
 
         // Title
         .k-treemap-title {
             @include fill(
-                $kendo-component-header-text,
-                $kendo-component-header-bg,
-                $kendo-component-header-border,
-                $kendo-component-header-gradient
+                $kendo-treemap-title-text,
+                $kendo-treemap-title-bg,
+                $kendo-treemap-title-border
             );
         }
 
         // Leaf
         .k-leaf {
-            color: $kendo-component-bg;
+            color: k-color(surface-alt);
         }
         .k-leaf.k-inverse {
-            color: $kendo-component-text;
+            color: k-color(on-app-surface);
         }
         .k-leaf:hover,
         .k-leaf.k-hover {
-            box-shadow: inset 0 0 0 3px $kendo-component-border;
+            box-shadow: inset 0 0 0 3px k-color(border);
         }
     }
 

package/scss/components/dataviz/_variables.scss

@@ -120,6 +120,14 @@ $kendo-treemap-line-height: null !default;
 $kendo-treemap-padding-x: null !default;
 $kendo-treemap-padding-y: null !default;
 
+$kendo-treemap-text: null !default;
+$kendo-treemap-bg: null !default;
+$kendo-treemap-border: null !default;
+
+$kendo-treemap-title-text: null !default;
+$kendo-treemap-title-bg: null !default;
+$kendo-treemap-title-border: null !default;
+
 // Chart Overlay
 $kendo-chart-overlay-bg: null !default;
 

package/scss/components/dialog/_theme.scss

@@ -5,6 +5,9 @@
 @use "./variables.scss" as *;
 
 @mixin kendo-dialog--theme-base() {
+    .k-dialog {
+        background-color: $kendo-dialog-bg;
+    }
 
     // Dialog titlebar
     .k-dialog-titlebar {
@@ -18,7 +21,7 @@
     // Dialog theme colors
     @each $name, $color in $kendo-dialog-theme-colors {
         .k-dialog-#{$name} .k-dialog-titlebar {
-            color: if($kendo-enable-color-system, k-color( on-#{$name} ), k-contrast-legacy( $color ));
+            color: k-color(on-#{$name});
             background-color: $color;
         }
     }

package/scss/components/dialog/_variables.scss

@@ -9,4 +9,6 @@ $kendo-dialog-buttongroup-padding-y: null !default;
 $kendo-dialog-buttongroup-border-width: null !default;
 $kendo-dialog-button-spacing: null !default;
 
+$kendo-dialog-bg: null !default;
+
 $kendo-dialog-theme-colors: null !default;

package/scss/components/drawer/_layout.scss

@@ -125,7 +125,8 @@
     }
     .k-drawer-items {
         margin: 0;
-        padding: 0;
+        padding-block: $kendo-drawer-items-padding-y;
+        padding-inline: $kendo-drawer-items-padding-x;
         list-style: none;
         display: flex;
         flex-direction: column;
@@ -134,13 +135,16 @@
     .k-drawer-item {
         padding-block: $kendo-drawer-item-padding-y;
         padding-inline: $kendo-drawer-item-padding-x;
+        border-radius: $kendo-drawer-item-border-radius;
         outline: 0;
         color: inherit;
         font-size: $kendo-drawer-item-font-size;
         line-height: $kendo-drawer-item-line-height;
+        font-weight: $kendo-drawer-item-font-weight;
         display: flex;
         flex-flow: row nowrap;
-        gap: $kendo-drawer-item-padding-x;
+        gap: $kendo-drawer-item-spacing;
+        align-items: center;
         cursor: pointer;
 
         > .k-drawer-link {

package/scss/components/drawer/_theme.scss

@@ -54,6 +54,11 @@
                 color: $kendo-drawer-selected-hover-text;
                 background-color: $kendo-drawer-selected-hover-bg;
             }
+
+            &:focus,
+            &.k-focus {
+                background-color: $kendo-drawer-selected-focus-bg;
+            }
         }
     }
     .k-drawer-separator {

package/scss/components/drawer/_variables.scss

@@ -19,13 +19,18 @@ $kendo-drawer-scrollbar-bg: null !default;
 $kendo-drawer-scrollbar-radius: null !default;
 $kendo-drawer-scrollbar-hover-color: null !default;
 
+$kendo-drawer-items-padding-x: null !default;
+$kendo-drawer-items-padding-y: null !default;
 $kendo-drawer-item-padding-x: null !default;
 $kendo-drawer-item-padding-y: null !default;
+$kendo-drawer-item-spacing: null !default;
 $kendo-drawer-item-font-size: null !default;
 $kendo-drawer-item-line-height: null !default;
+$kendo-drawer-item-font-weight: null !default;
 
 $kendo-drawer-item-level-padding-x: null !default;
 $kendo-drawer-item-level-count: null !default;
+$kendo-drawer-item-border-radius: null !default;
 
 $kendo-drawer-icon-padding-x: null !default;
 
@@ -44,3 +49,5 @@ $kendo-drawer-selected-text: null !default;
 
 $kendo-drawer-selected-hover-bg: null !default;
 $kendo-drawer-selected-hover-text: null !default;
+
+$kendo-drawer-selected-focus-bg: null !default;

package/scss/components/editor/_theme.scss

@@ -1,19 +1,19 @@
 @use "../../mixins/index.import.scss" as *;
-@use "../../color-system/_swatch-legacy.scss" as *;
+@use "../../color-system/_functions.import.scss" as *;
 @use "./variables.scss" as *;
 
 @mixin kendo-editor--theme-base() {
 
     .k-editor {
         @include fill(
-            $kendo-component-text,
-            $kendo-component-bg,
-            $kendo-component-border
+            k-color(on-app-surface),
+            k-color(surface-alt),
+            k-color(border)
         );
 
         &.k-readonly {
             .k-editor-content.k-focus {
-                outline-color: $kendo-body-text;
+                outline-color: k-color(on-app-surface);
             }
         }
     }
@@ -51,7 +51,7 @@
         &:hover,
         &.k-hover,
         &.k-active {
-            border-color: $kendo-component-border;
+            border-color: k-color(border);
         }
     }
 
@@ -68,7 +68,7 @@
     // Insert table
     .k-ct-popup {
         .k-selected {
-            @include fill( $kendo-selected-text, $kendo-selected-bg, $kendo-selected-border, none );
+            @include fill( $kendo-editor-ct-cell-text, $kendo-editor-ct-cell-bg, $kendo-editor-ct-cell-border, none );
         }
     }
 

package/scss/components/editor/_variables.scss

@@ -30,3 +30,7 @@ $kendo-editor-filebrowser-tiles-padding-x: null !default;
 $kendo-editor-filebrowser-tiles-padding-y: null !default;
 
 $kendo-editor-content-padding: null !default;
+
+$kendo-editor-ct-cell-text: null !default;
+$kendo-editor-ct-cell-bg: null !default;
+$kendo-editor-ct-cell-border: null !default;

package/scss/components/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,8 +22,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-try-shade( $color, .5 ));
-            background-color: if($kendo-enable-color-system, k-color( #{$name}-hover ), k-try-shade( $color, .5 ));
+            border-color: k-color(#{$name}-hover);
+            background-color: k-color(#{$name}-hover);
         }
     }
 
@@ -34,7 +34,7 @@
             @if $kendo-enable-focus-contrast {
                 @include box-shadow( inset 0 0 0 2px currentColor );
             } @else {
-                outline: $kendo-fab-outline-style $kendo-fab-outline-width if($kendo-enable-color-system, color-mix(in srgb, k-color( $name ) 30%, transparent), rgba( $color, .3 ));
+                outline: $kendo-fab-outline-style $kendo-fab-outline-width color-mix(in srgb, k-color($name) 30%, transparent);
             }
         }
     }
@@ -45,8 +45,8 @@
         .k-selected.k-fab-solid-#{$name},
         .k-fab-solid-#{$name}:active {
             @include box-shadow($kendo-fab-active-shadow);
-            border-color: if($kendo-enable-color-system, k-color( #{$name}-active ), k-try-shade( $color, 1.5));
-            background-color: if($kendo-enable-color-system, k-color( #{$name}-active ), k-try-shade( $color, 1.5));
+            border-color: k-color(#{$name}-active);
+            background-color: k-color(#{$name}-active);
         }
     }
 
@@ -55,8 +55,8 @@
         .k-disabled.k-fab-solid-#{$name},
         .k-fab-solid-#{$name}:disabled {
             @include box-shadow($kendo-fab-disabled-shadow);
-            background-color: if($kendo-enable-color-system, color-mix(in srgb, k-color( $name ) 60%, transparent), k-try-tint( $color, 5 ));
-            color: if($kendo-enable-color-system, color-mix(in srgb, k-color( on-#{$name} ) 60%, transparent), k-try-tint( k-contrast-legacy( $color ), 5 ));
+            background-color: color-mix(in srgb, k-color($name) 60%, transparent);
+            color: color-mix(in srgb, k-color(on-#{$name}) 60%, transparent);
             opacity: 1;
         }
     }
@@ -85,8 +85,8 @@
     // 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( border ), k-try-shade( $kendo-fab-item-icon-border, .5 ));
-        background-color: if($kendo-enable-color-system, k-color( base-hover ), k-try-shade( $kendo-fab-item-icon-bg, .5 ));
+        border-color: k-color(border);
+        background-color: k-color(base-hover);
     }
 
     // Focus state
@@ -95,7 +95,7 @@
     .k-fab-item.k-focus .k-fab-item-text,
     .k-fab-item.k-focus .k-fab-item-icon {
         @if $kendo-enable-focus-contrast {
-            @include box-shadow( inset 0 0 0 2px if($kendo-enable-color-system, k-color( on-app-surface ), if( $kendo-is-dark-theme, $kendo-color-white, $kendo-color-black )) );
+            @include box-shadow( inset 0 0 0 2px k-color(on-app-surface));
         } @else {
             outline: $kendo-fab-item-outline-style $kendo-fab-item-outline-width $kendo-fab-item-outline-color;
         }
@@ -105,8 +105,8 @@
     .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( border-alt ), k-try-shade( $kendo-fab-item-icon-border, 1 ));
-        background-color: if($kendo-enable-color-system, k-color( base-active ), k-try-shade( $kendo-fab-item-icon-bg, 1 ));
+        border-color: k-color(border-alt);
+        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 ) 60%, transparent), k-try-tint( $kendo-fab-item-bg, 5 ));
-            color: if($kendo-enable-color-system, color-mix(in srgb, k-color( on-base ) 60%, transparent), k-try-tint( $kendo-fab-item-text, 5 ));
+            background-color: color-mix(in srgb, k-color(base) 60%, transparent);
+            color: color-mix(in srgb, k-color(on-base) 60%, transparent);
         }
     }
 

package/scss/components/filter/_theme.scss

@@ -1,11 +1,11 @@
-@use "../../color-system/_swatch-legacy.scss" as *;
 @use "../../mixins/index.import.scss" as *;
+@use "../../color-system/_functions.import.scss" as *;
 @use "./variables.scss" as *;
 
 @mixin kendo-filter--theme-base() {
 
     .k-filter {
-        color: $kendo-component-text;
+        color: k-color(on-app-surface);
 
         .k-filter-preview-field {
             color: $kendo-filter-preview-field-text;
@@ -20,7 +20,7 @@
         .k-filter-toolbar::before,
         .k-filter-lines .k-filter-item:last-child > .k-filter-toolbar::after,
         .k-filter-lines .k-filter-item:last-child > * > .k-filter-toolbar::after {
-            background-color: $kendo-component-border;
+            background-color: k-color(border);
         }
 
         // Focus

package/scss/components/floating-label/_theme.scss

@@ -1,5 +1,5 @@
 @use "../../mixins/index.import.scss" as *;
-@use "../../color-system/_swatch-legacy.scss" as *;
+@use "../../color-system/_functions.import.scss" as *;
 @use "./_variables.scss" as *;
 
 @mixin kendo-floating-label--theme-base() {
@@ -24,7 +24,7 @@
         &.k-invalid > .k-floating-label,
         &.ng-invalid.ng-touched > .k-floating-label,
         &.ng-invalid.ng-dirty > .k-floating-label {
-            @include fill ( $color: $kendo-invalid-text );
+            @include fill ( $color: k-color(error) );
         }
     }
 

package/scss/components/forms/_layout.scss

@@ -1,7 +1,7 @@
 @use "sass:map";
 @use "../../mixins/index.import.scss" as *;
-@use "../../color-system/_swatch-legacy.scss" as *;
 @use "../../spacing/index.import.scss" as *;
+@use "../../_variables.scss" as *;
 @use "./_variables.scss" as *;
 @use "../input/_variables.scss" as *;
 
@@ -113,7 +113,13 @@
         .k-form-field-disabled {
             .k-label,
             .k-form-label {
-                @include disabled( $kendo-disabled-styling... );
+                @include disabled(
+                    $color: var(--kendo-disabled-text, unset),
+                    $bg: var(--kendo-disabled-bg, unset),
+                    $border: var(--kendo-disabled-border, unset),
+                    $opacity: var(--kendo-disabled-opacity, unset),
+                    $filter: var(--kendo-disabled-filter, unset)
+                );
             }
         }
 

package/scss/components/forms/_theme.scss

@@ -1,12 +1,12 @@
 @use "../../mixins/index.import.scss" as *;
-@use "../../color-system/_swatch-legacy.scss" as *;
+@use "../../color-system/_functions.import.scss" as *;
 @use "./_variables.scss" as *;
 
 @mixin kendo-form--theme-base() {
 
     .k-form,
     .k-form-inline {
-        @include fill( $color: $kendo-body-text );
+        @include fill( $color: k-color(on-app-surface) );
 
         fieldset {
             legend {
@@ -19,18 +19,18 @@
         }
 
         .k-field-info {
-            @include fill( $color: $kendo-subtle-text );
+            @include fill( $color: k-color(subtle) );
         }
 
         .k-alert-error {
-            @include fill( $color: $kendo-color-error );
+            @include fill( $color: k-color(error) );
         }
     }
 
     .k-form-error,
     .k-text-error,
     .k-form-field-error .k-label {
-        @include fill( $color: $kendo-color-error );
+        @include fill( $color: k-color(error) );
     }
 
     .k-form-separator {

package/scss/components/gantt/_theme.scss

@@ -1,5 +1,4 @@
 @use "../../mixins/index.import.scss" as *;
-@use "../../color-system/_swatch-legacy.scss" as *;
 @use "../../color-system/_functions.import.scss" as *;
 @use "./variables.scss" as *;
 
@@ -104,7 +103,7 @@
         );
 
         &.k-task-delayed {
-            @include repeating-striped-gradient($kendo-gantt-delayed-bg, $kendo-body-bg, 90deg, 4px, 2px);
+            @include repeating-striped-gradient($kendo-gantt-delayed-bg, k-color(app-surface), 90deg, 4px, 2px);
         }
 
         &.k-task-advanced {
@@ -228,7 +227,7 @@
 
     // Delay offset
     .k-task-offset {
-        @include repeating-striped-gradient($kendo-gantt-delayed-bg, $kendo-body-bg, 135deg, 4px, 2px);
+        @include repeating-striped-gradient($kendo-gantt-delayed-bg, k-color(app-surface), 135deg, 4px, 2px);
 
         .k-resize-e::before {
             @include fill(
@@ -242,7 +241,7 @@
     }
 
     .k-task-offset:hover {
-        @include repeating-striped-gradient($kendo-gantt-delayed-bg-lighter, $kendo-body-bg, 135deg, 4px, 2px);
+        @include repeating-striped-gradient($kendo-gantt-delayed-bg-lighter, k-color(app-surface), 135deg, 4px, 2px);
     }
 
     .k-pdf-export .k-task-offset {

package/scss/components/grid/_theme.scss

@@ -1,6 +1,6 @@
 @use "../../mixins/index.import.scss" as *;
 @use "../../color-system/_constants.scss" as *;
-@use "../../color-system/_swatch-legacy.scss" as *;
+@use "../../color-system/_functions.import.scss" as *;
 @use "../../_variables.scss" as *;
 @use "./variables.scss" as *;
 @use "../button/_variables.scss" as *;
@@ -214,8 +214,8 @@
                 @include focus-indicator( inset 0 0 0 2px rgba( $kendo-color-black, .1 ), true );
             }
             &.k-active {
-                color: $kendo-selected-text;
-                background-color: $kendo-selected-bg;
+                color: k-color(on-primary);
+                background-color: k-color(primary);
             }
         }
 
@@ -285,15 +285,12 @@
         &.k-table-row.k-selected .k-table-td.k-grid-row-sticky,
         &.k-table-row td.k-grid-content-sticky.k-selected,
         &.k-table-row .k-table-td.k-grid-content-sticky.k-selected {
-            @if($kendo-enable-color-system) {
-                @include fill( $bg: $kendo-grid-sticky-bg );
+            @include fill( $bg: $kendo-grid-sticky-bg );
 
-                &::before {
-                    @include fill( $bg: $kendo-grid-sticky-selected-bg );
-                }
-            } @else {
+            &::before {
                 @include fill( $bg: $kendo-grid-sticky-selected-bg );
             }
+
         }
 
         &.k-selected.k-table-alt-row td.k-grid-content-sticky,
@@ -301,13 +298,9 @@
         &.k-selected.k-table-alt-row .k-table-td.k-grid-row-sticky,
         &.k-table-alt-row td.k-grid-content-sticky.k-selected,
         &.k-table-alt-row .k-table-td.k-grid-content-sticky.k-selected {
-            @if($kendo-enable-color-system) {
-                @include fill( $bg: $kendo-grid-sticky-alt-bg );
+            @include fill( $bg: $kendo-grid-sticky-alt-bg );
 
-                &::before {
-                    @include fill( $bg: $kendo-grid-sticky-selected-alt-bg );
-                }
-            } @else {
+            &::before {
                 @include fill( $bg: $kendo-grid-sticky-selected-alt-bg );
             }
         }
@@ -335,13 +328,9 @@
         &.k-hover td.k-grid-content-sticky.k-selected,
         &:hover .k-table-td.k-grid-content-sticky.k-selected,
         &.k-hover .k-table-td.k-grid-content-sticky.k-selected {
-            @if($kendo-enable-color-system) {
-                background-color: $kendo-grid-sticky-hover-bg;
+            background-color: $kendo-grid-sticky-hover-bg;
 
-                &::before {
-                    background-color: $kendo-grid-sticky-selected-hover-bg;
-                }
-            } @else {
+            &::before {
                 background-color: $kendo-grid-sticky-selected-hover-bg;
             }
         }

package/scss/components/input/_layout.scss

@@ -1,7 +1,7 @@
 @use "sass:map";
 @use "../../mixins/index.import.scss" as *;
-@use "../../color-system/_swatch-legacy.scss" as *;
 @use "../../color-system/_constants.scss" as *;
+@use "../../_variables.scss" as *;
 @use "./_variables.scss" as *;
 @use "../icons/_variables.scss" as *;
 
@@ -68,16 +68,6 @@
     textarea.k-textarea {
         padding-block: $kendo-input-padding-y;
         padding-inline: $kendo-input-padding-x;
-
-        &:disabled,
-        &[disabled] {
-            @include disabled( $kendo-disabled-styling... );
-        }
-    }
-
-    :is([disabled], .k-disabled) :is(input.k-input, textarea.k-textarea):is(:disabled, [disabled]) {
-        opacity: 1;
-        filter: grayscale(0);
     }
 
     textarea.k-textarea {
@@ -94,16 +84,6 @@
         padding-inline: $kendo-input-padding-x;
         appearance: auto;
         align-items: center;
-
-        &:disabled,
-        &[disabled] {
-            @include disabled( $kendo-disabled-styling... );
-        }
-    }
-
-    :is([disabled], .k-disabled) select.k-picker:is(:disabled, [disabled]) {
-        opacity: 1;
-        filter: grayscale(0);
     }
 
 
@@ -538,11 +518,7 @@
                 box-sizing: content-box;
             }
         }
-        .k-dropdown-operator.k-picker-#{$size} {
-            .k-input-button {
-                padding: $_padding-y;
-            }
-        }
+
         select.k-picker-#{$size} {
             padding-block: $_padding-y;
             padding-inline: $_padding-x;

package/scss/components/input/_theme.scss

@@ -1,5 +1,5 @@
 @use "../../mixins/index.import.scss" as *;
-@use "../../color-system/_swatch-legacy.scss" as *;
+@use "../../color-system/_functions.import.scss" as *;
 @use "./_variables.scss" as *;
 
 @mixin kendo-input--theme-base() {
@@ -63,7 +63,7 @@
             @include fill( $border: $kendo-input-invalid-border );
 
             .k-input-validation-icon {
-                color: $kendo-invalid-text;
+                color: k-color(error);
             }
 
             &:focus,
@@ -152,7 +152,7 @@
             @include fill( $border: $kendo-input-invalid-border );
 
             .k-input-validation-icon {
-                color: $kendo-invalid-text;
+                color: k-color(error);
             }
 
             &:focus,
@@ -236,7 +236,7 @@
             @include fill( $border: $kendo-input-invalid-border );
 
             .k-input-validation-icon {
-                color: $kendo-invalid-text;
+                color: k-color(error);
             }
 
             &:focus,
@@ -331,7 +331,7 @@
             @include fill( $border: $kendo-input-invalid-border );
 
             .k-input-validation-icon {
-                color: $kendo-invalid-text;
+                color: k-color(error);
             }
 
             &:focus,
@@ -402,7 +402,7 @@
             @include fill( $border: $kendo-input-invalid-border );
 
             .k-input-validation-icon {
-                color: $kendo-invalid-text;
+                color: k-color(error);
             }
 
             &:focus,
@@ -497,7 +497,7 @@
             @include fill( $border: $kendo-input-invalid-border );
 
             .k-input-validation-icon {
-                color: $kendo-invalid-text;
+                color: k-color(error);
             }
 
             &:focus,