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

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);
     }
 
 

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,

package/scss/components/list/_theme.scss

@@ -64,7 +64,7 @@
         &.k-selected:hover,
         &.k-selected.k-hover {
             color: $kendo-list-item-selected-text;
-            background-color: if($kendo-enable-color-system, k-color( primary-hover ), k-color-shade( $kendo-list-item-selected-bg ));
+            background-color: k-color(primary-hover);
         }
     }
 

package/scss/components/listbox/_theme.scss

@@ -1,5 +1,5 @@
+@use "../../color-system/_functions.import.scss" as *;
 @use "../../mixins/index.import.scss" as *;
-@use "../../color-system/_swatch-legacy.scss" as *;
 @use "./variables.scss" as *;
 
 @mixin kendo-listbox--theme-base() {
@@ -14,7 +14,7 @@
             );
         }
         .k-drop-hint {
-            border-top-color: $kendo-color-primary;
+            border-top-color: k-color(primary);
         }
     }
 

package/scss/components/loader/_theme.scss

@@ -1,9 +1,9 @@
-@use "../../color-system/_swatch-legacy.scss" as *;
+@use "../../color-system/_functions.import.scss" as *;
 @use "./_variables.scss" as *;
 
 @mixin kendo-loader--theme-base() {
 
-    @each $name, $color in $kendo-theme-colors {
+    @each $name, $color in $kendo-loader-theme-colors {
         .k-loader-#{$name} {
             color: $color;
         }

package/scss/components/loader/_variables.scss

@@ -49,3 +49,5 @@ $kendo-loading-bg: null !default;
 $kendo-loading-text: null !default;
 $kendo-loading-opacity: null !default;
 $kendo-zindex-loading: null !default;
+
+$kendo-loader-theme-colors: null !default;

package/scss/components/marquee/_index.scss

@@ -0,0 +1,16 @@
+// Dependencies
+@use "../core/_index.scss" as *;
+
+// Component
+@forward "./_variables.scss";
+@use "./_layout.scss" as *;
+@use "./_theme.scss" as *;
+
+// Expose
+@mixin kendo-marquee--styles() {
+    @include import-once( "marquee" ) {
+        @include core-styles();
+        @include kendo-marquee--layout();
+        @include kendo-marquee--theme();
+    }
+}

package/scss/components/marquee/_layout.scss

@@ -0,0 +1,21 @@
+@mixin kendo-marquee--layout-base() {
+    // Marquee
+    .k-marquee {
+        position: absolute;
+        z-index: 100000;
+    }
+
+    .k-marquee-color,
+    .k-marquee-text {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+    }
+}
+
+
+@mixin kendo-marquee--layout() {
+    @include kendo-marquee--layout-base();
+}

package/scss/components/marquee/_theme.scss

@@ -0,0 +1,27 @@
+@use "./_variables.scss" as *;
+
+@mixin kendo-marquee--theme-base() {
+    // Marquee
+    .k-marquee-color {
+        color: $kendo-marquee-text;
+        background-color: $kendo-marquee-bg;
+        border-color: $kendo-marquee-border;
+        opacity: .6;
+    }
+    .k-marquee-text {
+        color: $kendo-marquee-text;
+    }
+
+    // Text selection
+    .k-text-selection {
+        ::selection {
+            background-color: $kendo-marquee-bg;
+            color: $kendo-marquee-text;
+        }
+    }
+}
+
+
+@mixin kendo-marquee--theme() {
+    @include kendo-marquee--theme-base();
+}

package/scss/components/marquee/_variables.scss

@@ -0,0 +1,3 @@
+$kendo-marquee-text: null !default;
+$kendo-marquee-bg: null !default;
+$kendo-marquee-border: null !default;

package/scss/components/mediaplayer/_theme.scss

@@ -19,7 +19,7 @@
     .k-mediaplayer-titlebar {
         color: $kendo-media-player-titlebar-text;
         background-image: linear-gradient( $kendo-media-player-titlebar-gradient );
-        text-shadow: 0 0 2px if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 50%, transparent), rgba( $kendo-media-player-text, .5 ));
+        text-shadow: 0 0 2px color-mix(in srgb, k-color(on-app-surface) 50%, transparent);
     }
 
 }

package/scss/components/messagebox/_theme.scss

@@ -1,26 +1,25 @@
 
 @use "../../functions/index.import.scss" as *;
 @use "../../mixins/index.import.scss" as *;
-@use "../../color-system/_swatch-legacy.scss" as *;
 @use "../../color-system/_functions.import.scss" as *;
 @use "./_variables.scss" as *;
 @use "../../_variables.scss" as *;
 
 @mixin kendo-messagebox--theme-base() {
 
-    @each $color-name, $color in $kendo-theme-colors {
+    @each $color-name, $color in $kendo-message-box-theme-colors {
         .k-messagebox-#{$color-name} {
             @if $color-name == "inverse" {
                 @include fill(
-                    if($kendo-enable-color-system, k-color( dark-on-subtle ), k-color-level( $color, $kendo-message-box-text-level )),
-                    if($kendo-enable-color-system, k-color( dark-subtle ), k-color-level( $color, $kendo-message-box-bg-level )),
-                    if($kendo-enable-color-system, k-color( dark-hover ), k-color-level( $color, $kendo-message-box-border-level ))
+                    k-color( dark-on-subtle ),
+                    k-color( dark-subtle ),
+                    k-color( dark-hover )
                 );
             } @else {
                 @include fill(
-                    if($kendo-enable-color-system, k-color( #{$color-name}-on-subtle ), k-color-level( $color, $kendo-message-box-text-level )),
-                    if($kendo-enable-color-system, k-color( #{$color-name}-subtle ), k-color-level( $color, $kendo-message-box-bg-level )),
-                    if($kendo-enable-color-system, k-color( #{$color-name}-emphasis ), k-color-level( $color, $kendo-message-box-border-level ))
+                    k-color( #{$color-name}-on-subtle ),
+                    k-color( #{$color-name}-subtle ),
+                    k-color( #{$color-name}-emphasis )
                 );
             }
         }

package/scss/components/messagebox/_variables.scss

@@ -13,3 +13,5 @@ $kendo-message-box-border-level: null !default;
 
 $kendo-message-box-link-font-style: null !default;
 $kendo-message-box-link-text-decoration: null !default;
+
+$kendo-message-box-theme-colors: null !default;

package/scss/components/notification/_variables.scss

@@ -21,7 +21,7 @@ $kendo-notification-icon-spacing: null !default;
 
     @each $name, $color in $colors {
         $_theme: map.merge(( $name: (
-            color: if($kendo-enable-color-system, k-color( on-#{$name} ), k-contrast-legacy( $color )),
+            color: k-color(on-#{$name}),
             background-color: $color,
             border: $color,
         )), $_theme );

package/scss/components/panel/_theme.scss

@@ -1,5 +1,5 @@
+@use "../../color-system/_functions.import.scss" as *;
 @use "../../mixins/index.import.scss" as *;
-@use "../../color-system/_swatch-legacy.scss" as *;
 @use "./variables.scss" as *;
 
 @mixin kendo-panel--theme--base() {
@@ -14,9 +14,9 @@
 
         > .k-header {
             @include fill(
-                var( --kendo-component-text, #{$kendo-component-text} ),
-                var( --kendo-component-bg, #{$kendo-component-bg} ),
-                var( --kendo-component-border, #{$kendo-component-border} )
+                k-color( on-app-surface ),
+                k-color( surface-alt ),
+                k-color( border )
             );
         }
     }

package/scss/components/pivotgrid/_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 *;
 @use "../popup/_variables.scss" as *;
 
@@ -134,7 +134,7 @@
     }
 
     .k-pivotgrid-configurator-content .k-form-field-wrapper {
-        @include fill( $border: $kendo-component-border );
+        @include fill( $border: k-color( border ) );
     }
 
 
@@ -191,7 +191,7 @@
         );
 
         .k-empty {
-            color: $kendo-subtle-text;
+            color: k-color(subtle);
         }
     }
 
@@ -223,15 +223,15 @@
     }
 
     .k-i-kpi-status-hold {
-        color: $kendo-color-warning;
+        color: k-color(warning);
     }
 
     .k-i-kpi-status-deny {
-        color: $kendo-color-error;
+        color: k-color(error);
     }
 
     .k-i-kpi-status-open {
-        color: $kendo-color-success;
+        color: k-color(success);
     }
 
 
@@ -239,7 +239,7 @@
     .k-pivotgrid-configurator-panel.kendo-jquery {
 
         .k-column-fields {
-            border-color: $kendo-component-border;
+            border-color: k-color(border);
         }
     }
 

package/scss/components/progressbar/_theme.scss

@@ -36,7 +36,7 @@
 
     .k-progressbar-indeterminate {
         @include fill( $kendo-progressbar-indeterminate-text, $kendo-progressbar-indeterminate-bg, $kendo-progressbar-indeterminate-border );
-        @include striped-gradient( if($kendo-enable-color-system, color-mix(in srgb, k-color( base-emphasis ) 55%, transparent), k-color-shade($kendo-progressbar-indeterminate-bg)) );
+        @include striped-gradient( color-mix(in srgb, k-color( base-emphasis ) 55%, transparent) );
         background-size: $kendo-progressbar-height $kendo-progressbar-height;
         animation: kendo-progressbar-indeterminate-animation $kendo-progressbar-animation-timing;
     }