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

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;
                 }
@@ -80,6 +81,15 @@
                     $kendo-switch-off-track-disabled-gradient
                 );
             }
+
+            .k-switch-thumb {
+                @include fill(
+                    $kendo-switch-off-thumb-disabled-text,
+                    $kendo-switch-off-thumb-disabled-bg,
+                    $kendo-switch-off-thumb-disabled-border,
+                    $kendo-switch-off-thumb-disabled-gradient
+                );
+            }
         }
 
         .k-switch-label-on {
@@ -142,7 +152,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;
                 }
@@ -160,6 +170,15 @@
                     $kendo-switch-on-track-disabled-gradient
                 );
             }
+
+            .k-switch-thumb {
+                @include fill(
+                    $kendo-switch-on-thumb-disabled-text,
+                    $kendo-switch-on-thumb-disabled-bg,
+                    $kendo-switch-on-thumb-disabled-border,
+                    $kendo-switch-on-thumb-disabled-gradient
+                );
+            }
         }
 
         .k-switch-label-off {

package/scss/components/switch/_variables.scss

@@ -43,6 +43,11 @@ $kendo-switch-off-thumb-hover-text: null !default;
 $kendo-switch-off-thumb-hover-border: null !default;
 $kendo-switch-off-thumb-hover-gradient: null !default;
 
+$kendo-switch-off-thumb-disabled-bg: null !default;
+$kendo-switch-off-thumb-disabled-text: null !default;
+$kendo-switch-off-thumb-disabled-border: null !default;
+$kendo-switch-off-thumb-disabled-gradient: null !default;
+
 
 $kendo-switch-on-track-bg: null !default;
 $kendo-switch-on-track-text: null !default;
@@ -74,3 +79,8 @@ $kendo-switch-on-thumb-hover-bg: null !default;
 $kendo-switch-on-thumb-hover-text: null !default;
 $kendo-switch-on-thumb-hover-border: null !default;
 $kendo-switch-on-thumb-hover-gradient: null !default;
+
+$kendo-switch-on-thumb-disabled-bg: null !default;
+$kendo-switch-on-thumb-disabled-text: null !default;
+$kendo-switch-on-thumb-disabled-border: null !default;
+$kendo-switch-on-thumb-disabled-gradient: null !default;

package/scss/components/tabstrip/_layout.scss

@@ -449,7 +449,6 @@
                 display: none !important; // stylelint-disable-line declaration-no-important
             }
         }
-
     }
 
 

package/scss/components/tabstrip/_theme.scss

@@ -94,9 +94,21 @@
     // Selected indicator
     @if ($kendo-tabstrip-indicator-size) {
 
-        .k-tabstrip-items-wrapper {
-            .k-item.k-active::after {
-                border-color: $kendo-tabstrip-indicator-color;
+        .k-tabstrip-top,
+        .k-tabstrip-bottom {
+            > .k-tabstrip-items-wrapper {
+                .k-item.k-active .k-link::after {
+                    background: $kendo-tabstrip-indicator-color;
+                }
+            }
+        }
+
+        .k-tabstrip-left,
+        .k-tabstrip-right {
+            > .k-tabstrip-items-wrapper {
+                .k-item.k-active::after {
+                    background: $kendo-tabstrip-indicator-color;
+                }
             }
         }
     }

package/scss/components/tabstrip/_variables.scss

@@ -53,7 +53,6 @@ $kendo-tabstrip-item-selected-border: null !default;
 $kendo-tabstrip-item-selected-gradient: null !default;
 $kendo-tabstrip-item-selected-font-weight: null !default;
 
-
 $kendo-tabstrip-item-focus-shadow: null !default;
 
 $kendo-tabstrip-item-dragging-shadow: null !default;

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() {
@@ -18,14 +18,15 @@
     // Time selector header
     .k-time-header,
     .k-time-selector-header {
+        .k-title {
+            color: $kendo-time-selector-header-title-text;
+        }
 
         .k-time-now {
-            // TODO: use a variable
-            color: $kendo-link-text;
+            color: $kendo-time-selector-header-time-now-text;
         }
         .k-time-now:hover {
-            // TODO: use a variable
-            color: $kendo-link-hover-text;
+            color: $kendo-time-selector-header-time-now-hover-text;
         }
     }
 
@@ -59,7 +60,7 @@
         }
 
         .k-item:hover {
-            color: $kendo-color-primary;
+            color: k-color(primary);
         }
     }
 

package/scss/components/timeselector/_variables.scss

@@ -12,6 +12,9 @@ $kendo-time-selector-border: null !default;
 $kendo-time-selector-header-padding-x: null !default;
 $kendo-time-selector-header-padding-y: null !default;
 $kendo-time-selector-header-border-width: null !default;
+$kendo-time-selector-header-title-text: null !default;
+$kendo-time-selector-header-time-now-text: null !default;
+$kendo-time-selector-header-time-now-hover-text: null !default;
 
 $kendo-time-selector-fast-selection-gap: null !default;
 
@@ -52,3 +55,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};
-}

package/scss/styles/_selection.scss

@@ -1,36 +0,0 @@
-@mixin kendo-core--styles--selection() {
-
-    // Marquee
-    .k-marquee {
-        position: absolute;
-        z-index: 100000;
-    }
-
-    .k-marquee-color,
-    .k-marquee-text {
-        position: absolute;
-        top: 0;
-        left: 0;
-        width: 100%;
-        height: 100%;
-    }
-
-    .k-marquee-color {
-        color: var( --kendo-marquee-text, unset );
-        background-color: var( --kendo-marquee-bg, unset );
-        border-color: var( --kendo-marquee-border, unset );
-        opacity: .6;
-    }
-    .k-marquee-text {
-        color: var( --kendo-marquee-text, unset );
-    }
-
-    // Text selection
-    .k-text-selection {
-        ::selection {
-            background-color: var( --kendo-text-selection-bg, unset );
-            color: var( --kendo-marquee-text, unset );
-        }
-    }
-
-}