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

package/scss/components/radio/_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 *;
 
 @mixin kendo-radio--layout-base() {
@@ -72,10 +72,6 @@
 
 
     // Disabled state
-    .k-radio:disabled,
-    .k-radio.k-disabled {
-        @include disabled( $kendo-disabled-styling... );
-    }
     .k-radio:disabled:checked,
     .k-radio.k-disabled.k-checked {
         @if $kendo-radio-indicator-type == "image" {

package/scss/components/rating/_theme.scss

@@ -1,10 +1,10 @@
-@use "../../color-system/_swatch-legacy.scss" as *;
+@use "../../color-system/_functions.import.scss" as *;
 @use "./variables.scss" as *;
 
 @mixin kendo-rating--theme-base() {
 
     .k-rating {
-        color: $kendo-component-text;
+        color: k-color(on-app-surface);
 
         &:focus,
         &.k-focus {

package/scss/components/scheduler/_theme.scss

@@ -1,7 +1,6 @@
 @use "../../color-system/_functions.import.scss" as *;
 @use "../../mixins/index.import.scss" as *;
 @use "../../functions/index.import.scss" as *;
-@use "../../color-system/_swatch-legacy.scss" as *;
 @use "../../_variables.scss" as *;
 @use "./variables.scss" as *;
 
@@ -35,7 +34,7 @@
     }
 
     .k-scheduler-header {
-        background-color: $kendo-base-bg;
+        background-color: $kendo-scheduler-header-bg;
     }
 
     .k-scheduler-header-wrap {
@@ -74,7 +73,7 @@
 
     .k-scheduler-layout td.k-selected,
     .k-scheduler-layout .k-scheduler-cell.k-selected {
-        background-color: if($kendo-enable-color-system, color-mix(in srgb, k-color( primary ) 25%, transparent), rgba($kendo-selected-bg, .25));
+        background-color: color-mix(in srgb, k-color(primary) 25%, transparent);
     }
 
     .k-scheduler-layout-flex {
@@ -117,7 +116,7 @@
         }
 
         &.k-event-inverse {
-            color: if($kendo-enable-color-system, if($kendo-enable-focus-contrast, black, k-color( on-app-surface )), k-contrast-legacy( $kendo-scheduler-event-text ));
+            color: if($kendo-enable-focus-contrast, black, k-color(on-app-surface));
         }
 
         &.k-event-ongoing {
@@ -134,7 +133,7 @@
     .k-scheduler-marquee {}
     .k-scheduler-marquee::before,
     .k-scheduler-marquee::after {
-        border-color: $kendo-color-primary;
+        border-color: k-color(primary);
     }
 
     // Edit dialog
@@ -171,10 +170,10 @@
         .k-scheduler-content .k-scheduler-row:hover,
         .k-scheduler-content .k-scheduler-row.k-hover {
             @include fill(
-                $kendo-hover-text,
-                $kendo-hover-bg,
-                $kendo-hover-border,
-                $kendo-hover-gradient
+                k-color( on-app-surface ),
+                k-color( base-hover ),
+                k-color( border ),
+                null
             );
         }
 
@@ -191,7 +190,7 @@
 
         // Selected
         .k-scheduler-content tr.k-selected {
-            background-color: if($kendo-enable-color-system, color-mix(in srgb, k-color( primary ) 25%, transparent), rgba($kendo-selected-bg, .25));
+            background-color: color-mix(in srgb, k-color(primary) 25%, transparent);
         }
         .k-scheduler-content tr.k-selected .k-scheduler-datecolumn,
         .k-scheduler-content tr.k-selected .k-scheduler-groupcolumn {

package/scss/components/scheduler/_variables.scss

@@ -104,3 +104,5 @@ $kendo-scheduler-rtl-indicators-margin: null !default;
 
 $kendo-scheduler-marquee-label-inset-x: null !default;
 $kendo-scheduler-marquee-label-inset-y: null !default;
+
+$kendo-scheduler-header-bg: null !default;

package/scss/components/slider/_theme.scss

@@ -1,4 +1,4 @@
-@use "../../color-system/_swatch-legacy.scss" as *;
+@use "../../color-system/_functions.import.scss" as *;
 @use "../../mixins/index.import.scss" as *;
 @use "../../border-radii/index.import.scss" as *;
 @use "./variables.scss" as *;
@@ -8,7 +8,7 @@
     // Slider
     .k-slider {
         // TODO: extract variables
-        color: $kendo-component-text;
+        color: k-color(on-app-surface);
 
         .k-slider-track,
         .k-slider-selection {

package/scss/components/spreadsheet/_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 "../button/_variables.scss" as *;
 @use "../list/_variables.scss" as *;
@@ -115,7 +115,7 @@
 
     // Filter button
     .k-spreadsheet .k-filter-range {
-        border-color: $kendo-color-primary;
+        border-color: k-color(primary);
     }
     .k-spreadsheet-filter {
         @include fill(

package/scss/components/stepper/_theme.scss

@@ -1,6 +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 *;
 @use "./variables.scss" as *;
 
@@ -38,7 +37,7 @@
             .k-step-link:focus  {
                 // Labels only
                 .k-step-label:only-child {
-                    @include focus-indicator( $indicator: ( inset 0 0 0 $kendo-stepper-indicator-focus-size $kendo-component-border ), $inset: true );
+                    @include focus-indicator( $indicator: ( inset 0 0 0 $kendo-stepper-indicator-focus-size k-color( border ) ), $inset: true );
                 }
             }
 
@@ -47,22 +46,14 @@
             &.k-disabled,
             &:disabled {
                 .k-step-indicator {
-                    @if($kendo-enable-color-system) {
-                        @include fill(
-                            $kendo-stepper-indicator-disabled-text,
-                            k-color( app-surface ),
-                            $kendo-stepper-indicator-disabled-border
-                        );
-
-                        &::before {
-                            background-color: $kendo-stepper-indicator-disabled-bg;
-                        }
-                    } @else {
-                        @include fill(
-                            $kendo-stepper-indicator-disabled-text,
-                            $kendo-stepper-indicator-disabled-bg,
-                            $kendo-stepper-indicator-disabled-border
-                        );
+                    @include fill(
+                        $kendo-stepper-indicator-disabled-text,
+                        k-color( app-surface ),
+                        $kendo-stepper-indicator-disabled-border
+                    );
+
+                    &::before {
+                        background-color: $kendo-stepper-indicator-disabled-bg;
                     }
                 }
 
@@ -79,13 +70,13 @@
             );
         }
         .k-step-indicator::after {
-            @include box-shadow( inset 0 0 0 $kendo-stepper-indicator-focus-size $kendo-component-bg );
+            @include box-shadow( inset 0 0 0 $kendo-stepper-indicator-focus-size k-color( surface-alt ) );
         }
         .k-step-label:only-child {
             @include fill(
-                $kendo-component-text,
-                $kendo-component-bg,
-                $kendo-component-border
+                k-color( on-app-surface ),
+                k-color( surface-alt ),
+                k-color( border )
             );
         }
 
@@ -121,23 +112,16 @@
             &.k-disabled,
             &:disabled {
                 .k-step-indicator {
-                    @if($kendo-enable-color-system) {
-                        @include fill(
-                            $kendo-stepper-indicator-done-disabled-text,
-                            k-color( app-surface ),
-                            $kendo-stepper-indicator-done-disabled-border
-                        );
-
-                        &::before {
-                            background-color: $kendo-stepper-indicator-done-disabled-bg;
-                        }
-                    } @else {
-                        @include fill(
-                            $kendo-stepper-indicator-done-disabled-text,
-                            $kendo-stepper-indicator-done-disabled-bg,
-                            $kendo-stepper-indicator-done-disabled-border
-                        );
+                    @include fill(
+                        $kendo-stepper-indicator-done-disabled-text,
+                        k-color( app-surface ),
+                        $kendo-stepper-indicator-done-disabled-border
+                    );
+
+                    &::before {
+                        background-color: $kendo-stepper-indicator-done-disabled-bg;
                     }
+
                 }
             }
         }
@@ -174,22 +158,14 @@
             &.k-disabled,
             &:disabled {
                 .k-step-indicator {
-                    @if($kendo-enable-color-system) {
-                        @include fill(
-                            $kendo-stepper-indicator-current-disabled-text,
-                            k-color( app-surface ),
-                            $kendo-stepper-indicator-current-disabled-border
-                        );
-
-                        &::before {
-                            background-color: $kendo-stepper-indicator-current-disabled-bg;
-                        }
-                    } @else {
-                        @include fill(
-                            $kendo-stepper-indicator-current-disabled-text,
-                            $kendo-stepper-indicator-current-disabled-bg,
-                            $kendo-stepper-indicator-current-disabled-border
-                        );
+                    @include fill(
+                        $kendo-stepper-indicator-current-disabled-text,
+                        k-color( app-surface ),
+                        $kendo-stepper-indicator-current-disabled-border
+                    );
+
+                    &::before {
+                        background-color: $kendo-stepper-indicator-current-disabled-bg;
                     }
                 }
             }

package/scss/components/switch/_theme.scss

@@ -1,4 +1,5 @@
 @use "../../mixins/index.import.scss" as *;
+@use "../../color-system/_constants.scss" as *;
 @use "../../_variables.scss" as *;
 @use "./variables.scss" as *;
 
@@ -62,7 +63,7 @@
                     $kendo-switch-off-track-focus-gradient
                 );
                 @if $kendo-enable-focus-contrast {
-                    @include box-shadow( 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( 0 0 0 2px k-color( on-app-surface ));
                 } @else {
                     outline: $kendo-switch-off-track-focus-ring;
                 }
@@ -142,7 +143,7 @@
                     $kendo-switch-on-track-focus-gradient
                 );
                 @if $kendo-enable-focus-contrast {
-                    @include box-shadow( 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( 0 0 0 2px k-color( on-app-surface ), if( $kendo-is-dark-theme, $kendo-color-white, $kendo-color-black ));
                 } @else {
                     outline: $kendo-switch-on-track-focus-ring;
                 }

package/scss/components/taskboard/_theme.scss

@@ -1,5 +1,5 @@
 @use "../../mixins/index.import.scss" as *;
-@use "../../color-system/_swatch-legacy.scss" as *;
+@use "../../_variables.scss" as *;
 @use "./variables.scss" as *;
 
 @mixin kendo-task-board--theme-base() {
@@ -97,7 +97,7 @@
         }
 
         &.k-disabled {
-            @include disabled( $kendo-disabled-styling... );
+            box-shadow: none;
         }
     }
 

package/scss/components/timeline/_theme.scss

@@ -1,4 +1,4 @@
-@use "../../color-system/_swatch-legacy.scss" as *;
+@use "../../color-system/_functions.import.scss" as *;
 @use "../../mixins/index.import.scss" as *;
 @use "./variables.scss" as *;
 @use "../card/_variables.scss" as *;
@@ -36,14 +36,14 @@
                 }
 
                 &::-webkit-scrollbar-thumb:hover {
-                    background: $kendo-hover-border;
+                    background: k-color(border);
                 }
             }
         }
 
         // TODO: remove
         .k-timeline-date {
-            color: $kendo-body-text;
+            color: k-color(on-app-surface);
         }
 
         .k-timeline-arrow.k-disabled {

package/scss/components/timeselector/_theme.scss

@@ -1,6 +1,6 @@
 @use "sass:math";
 @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-time-selector--theme-base() {
@@ -21,11 +21,11 @@
 
         .k-time-now {
             // TODO: use a variable
-            color: $kendo-link-text;
+            color: $kendo-time-selector-now-button-text;
         }
         .k-time-now:hover {
             // TODO: use a variable
-            color: $kendo-link-hover-text;
+            color: $kendo-time-selector-now-button-hover-text;
         }
     }
 
@@ -59,7 +59,7 @@
         }
 
         .k-item:hover {
-            color: $kendo-color-primary;
+            color: k-color(primary);
         }
     }
 

package/scss/components/timeselector/_variables.scss

@@ -52,3 +52,6 @@ $kendo-time-selector-lg-list-item-padding-x: null !default;
 $kendo-time-selector-lg-list-item-padding-y: null !default;
 
 $kendo-time-selector-sizes: null !default;
+
+$kendo-time-selector-now-button-text: null !default;
+$kendo-time-selector-now-button-hover-text: null !default;

package/scss/components/toolbar/_layout.scss

@@ -170,6 +170,12 @@
         }
     }
 
+    // Workaround for scrollable scenario with buttons inside badge container
+    .k-toolbar-items-scroll:has(.k-badge-container) {
+        padding-block-start: .5em;
+        margin-block-start: -.5em;
+    }
+
     .k-toolbar-items-list {
         display: flex;
         flex-flow: row wrap;

package/scss/components/tooltip/_variables.scss

@@ -25,7 +25,7 @@ $kendo-tooltip-shadow: 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/typography/_theme.scss

@@ -1,13 +1,13 @@
 @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-typography--theme-base() {
 
     .k-body {
         @include fill(
-            $kendo-body-text,
-            $kendo-body-bg
+            k-color( on-app-surface ),
+            k-color( app-surface )
         );
     }
 

package/scss/components/upload/_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-upload--theme-base() {
@@ -88,7 +88,7 @@
         .k-file-size,
         .k-file-validation-message,
         .k-file-summary {
-            color: $kendo-subtle-text;
+            color: k-color(subtle);
         }
 
         .k-multiple-files-wrapper .k-file-summary {
@@ -99,7 +99,7 @@
         &.k-invalid,
         &.ng-invalid.ng-touched,
         &.ng-invalid.ng-dirty {
-            border-color: $kendo-invalid-border;
+            border-color: k-color(error)
         }
     }
 

package/scss/components/window/_theme.scss

@@ -35,7 +35,7 @@
     // Window theme colors
     @each $name, $color in $kendo-window-theme-colors {
         .k-window-#{$name} .k-window-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/styles/_base.scss

@@ -1,3 +1,4 @@
+@use "sass:map";
 @use "../mixins/_disabled.scss" as *;
 @use "../spacing/index.import.scss" as *;
 @use "../_variables.scss" as *;
@@ -6,14 +7,14 @@
 
     // Disabled state
     .k-disabled,
-    .k-widget[disabled],
-    .k-disabled {
+    [disabled],
+    :disabled {
         @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)
+            $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)
         );
 
         .k-link {
@@ -38,7 +39,7 @@
         height: 0;
         border-width: 1px 0 0;
         border-style: solid;
-        border-color: var( --kendo-hr-border, unset );
+        border-color: inherit;
         display: block;
         float: none;
         clear: both;

package/scss/styles/index.import.scss

@@ -4,7 +4,6 @@
 @forward "./_layout.scss";
 @forward "./_normalize.scss";
 @forward "./_base.scss";
-@forward "./_selection.scss";
 @forward "./_scrollbar.scss";
 @forward "./_resizing.scss";
 @forward "./_utils-components.scss";
@@ -15,7 +14,6 @@
 @use "./_layout.scss" as *;
 @use "./_normalize.scss" as *;
 @use "./_base.scss" as *;
-@use "./_selection.scss" as *;
 @use "./_scrollbar.scss" as *;
 @use "./_resizing.scss" as *;
 @use "./_utils-components.scss" as *;
@@ -29,7 +27,6 @@
         @include kendo-core--styles--layout();
         @include kendo-core--styles--normalize();
         @include kendo-core--styles--base();
-        @include kendo-core--styles--selection();
         @include kendo-core--styles--scrollbar();
         @include kendo-core--styles--resizing();
         @include kendo-core--styles--utils-components();

package/scss/color-system/_swatch-legacy.scss

@@ -1,150 +0,0 @@
-// Primary colors
-$kendo-color-primary: null !default;
-$kendo-color-primary-lighter: null !default;
-$kendo-color-primary-darker: null !default;
-$kendo-color-primary-contrast: null !default;
-
-// Secondary colors
-$kendo-color-secondary: null !default;
-$kendo-color-secondary-lighter: null !default;
-$kendo-color-secondary-darker: null !default;
-$kendo-color-secondary-contrast: null !default;
-
-// Tertiary colors
-$kendo-color-tertiary: null !default;
-$kendo-color-tertiary-lighter: null !default;
-$kendo-color-tertiary-darker: null !default;
-$kendo-color-tertiary-contrast: null !default;
-
-// Info colors
-$kendo-color-info: null !default;
-$kendo-color-info-lighter: null !default;
-$kendo-color-info-darker: null !default;
-
-// Success colors
-$kendo-color-success: null !default;
-$kendo-color-success-lighter: null !default;
-$kendo-color-success-darker: null !default;
-
-// Warning colors
-$kendo-color-warning: null !default;
-$kendo-color-warning-lighter: null !default;
-$kendo-color-warning-darker: null !default;
-
-// Error colors
-$kendo-color-error: null !default;
-$kendo-color-error-lighter: null !default;
-$kendo-color-error-darker: null !default;
-
-
-$kendo-color-dark: null !default;
-
-// Light colors
-$kendo-color-light: null !default;
-
-// Inverse colors
-$kendo-color-inverse: null !default;
-
-// Body styles
-$kendo-body-bg: null !default;
-$kendo-body-text: null !default;
-
-// App styles
-$kendo-app-bg: null !default;
-$kendo-app-text: $kendo-body-text !default;
-$kendo-app-border: null !default;
-
-// Component styles
-$kendo-component-bg: null !default;
-$kendo-component-text: $kendo-body-text  !default;
-$kendo-component-border: null !default;
-
-$kendo-base-bg: null !default;
-$kendo-base-text: $kendo-body-text !default;
-$kendo-base-border: $kendo-app-border !default;
-$kendo-base-gradient: null !default;
-
-// States styles
-$kendo-hover-bg: null !default;
-$kendo-hover-text: $kendo-base-text !default;
-$kendo-hover-border: $kendo-base-border !default;
-$kendo-hover-gradient: $kendo-base-gradient !default;
-
-$kendo-selected-bg: $kendo-color-primary !default;
-$kendo-selected-text: $kendo-color-primary-contrast !default;
-$kendo-selected-border: $kendo-base-border !default;
-$kendo-selected-gradient: $kendo-base-gradient !default;
-
-$kendo-selected-hover-bg: null !default;
-$kendo-selected-hover-text: $kendo-selected-text !default;
-$kendo-selected-hover-border: $kendo-base-border !default;
-$kendo-selected-hover-gradient: $kendo-base-gradient  !default;
-
-$kendo-component-header-bg: $kendo-base-bg !default;
-$kendo-component-header-text: $kendo-base-text !default;
-$kendo-component-header-border: $kendo-base-border !default;
-$kendo-component-header-gradient: null !default;
-
-$kendo-focus-outline: null !default;
-
-$kendo-subtle-text: null !default;
-
-// Link
-$kendo-link-text: $kendo-color-primary !default;
-$kendo-link-hover-text: null !default;
-
-// Validator
-$kendo-invalid-bg: null !default;
-$kendo-invalid-text: $kendo-color-error !default;
-$kendo-invalid-border: $kendo-color-error !default;
-$kendo-invalid-shadow: null !default;
-
-$kendo-valid-bg: null !default;
-$kendo-valid-text: $kendo-color-success !default;
-$kendo-valid-border: $kendo-color-success !default;
-$kendo-valid-shadow: null !default;
-
-// Disabled Styling
-
-$kendo-disabled-bg: null !default;
-$kendo-disabled-text: null !default;
-$kendo-disabled-border: null !default;
-$kendo-disabled-opacity: null !default;
-$kendo-disabled-filter: null !default;
-
-$kendo-disabled-styling: (
-    bg: $kendo-disabled-bg,
-    color: $kendo-disabled-text,
-    border: $kendo-disabled-border,
-    opacity: $kendo-disabled-opacity,
-    filter: $kendo-disabled-filter
-) !default;
-
-$kendo-theme-colors: (
-    "primary": $kendo-color-primary,
-    "secondary": $kendo-color-secondary,
-    "tertiary": $kendo-color-tertiary,
-    "info": $kendo-color-info,
-    "success": $kendo-color-success,
-    "warning": $kendo-color-warning,
-    "error": $kendo-color-error,
-    "dark": $kendo-color-dark,
-    "light": $kendo-color-light,
-    "inverse": $kendo-color-inverse,
-) !default;
-
-:root {
-    --kendo-disabled-text: #{$kendo-disabled-text};
-    --kendo-disabled-bg: #{$kendo-disabled-bg};
-    --kendo-disabled-border: #{$kendo-disabled-border};
-    --kendo-disabled-opacity: #{$kendo-disabled-opacity};
-    --kendo-disabled-filter: #{$kendo-disabled-filter};
-
-    --kendo-hr-border: #{$kendo-component-border};
-
-    --kendo-marquee-text: #{$kendo-selected-text};
-    --kendo-marquee-bg: #{$kendo-selected-bg};
-    --kendo-marquee-border: #{$kendo-selected-border};
-
-    --kendo-text-selection-bg: #{$kendo-color-primary};
-}