@progress/kendo-theme-default 5.12.1-dev.0 → 5.12.1-dev.2

package/scss/upload/_theme.scss

@@ -2,136 +2,100 @@
 
     .k-upload {
         @include fill(
-            $upload-text,
-            $upload-bg,
-            $upload-border
+            $kendo-upload-text,
+            $kendo-upload-bg,
+            $kendo-upload-border
         );
 
-        .k-dropzone {
+        .k-dropzone,
+        .k-upload-dropzone {
             @include fill(
-                $upload-dropzone-text,
-                $upload-dropzone-bg,
-                $upload-dropzone-border
+                $kendo-upload-dropzone-text,
+                $kendo-upload-dropzone-bg,
+                $kendo-upload-dropzone-border
             );
 
-            &.k-dropzone-hover,
-            &.k-dropzone-hovered {
-                background-color: $upload-dropzone-hover-bg;
+            &.k-hover {
+                background-color: $kendo-upload-dropzone-hover-bg;
             }
 
             .k-dropzone-hint {
-                color: $upload-status-text;
-                opacity: $upload-status-text-opacity;
+                color: $kendo-upload-status-text;
+                opacity: $kendo-upload-status-text-opacity;
             }
 
         }
 
         .k-upload-files,
         .k-file {
-            border-color: $upload-border;
+            border-color: $kendo-upload-border;
         }
 
         .k-file {
-
             &.k-focus {
-                box-shadow: inset $upload-focused-shadow;
+                @include focus-indicator( $indicator: ( inset $kendo-upload-focus-shadow ), $inset: true );
             }
 
             .k-upload-action.k-focus {
-                box-shadow: $upload-focused-shadow;
+                @include focus-indicator( $kendo-upload-focus-shadow );
             }
 
         }
 
         .k-upload-status {
-            color: $upload-status-text;
-            opacity: $upload-status-text-opacity;
+            color: $kendo-upload-status-text;
+            opacity: $kendo-upload-status-text-opacity;
         }
 
         // Upload status: uploading
         .k-file-progress {
-
-            .k-file-name {
-                color: $upload-progress-text;
-            }
-            .k-progress {
-                background-color: $upload-progress-bg;
+            .k-progressbar .k-selected {
+                background-color: $kendo-upload-progress-bg;
             }
         }
 
 
         // Upload status: success
         .k-file-success {
-            .k-progress {
-                background-color: $upload-success-bg;
+            .k-file-validation-message {
+                color: $kendo-upload-success-text;
+            }
+
+            .k-progressbar .k-selected {
+                background-color: $kendo-upload-success-bg;
             }
         }
 
         // Upload satus: error
-        .k-file-error,
-        .k-file-invalid {
+        .k-file-error {
             .k-file-validation-message {
-                color: $upload-error-text;
+                color: $kendo-upload-error-text;
             }
-            .k-progress {
-                background-color: $upload-error-bg;
+            .k-progressbar .k-selected {
+                background-color: $kendo-upload-error-bg;
             }
         }
 
-        .k-file-extension-wrapper,
-        .k-multiple-files-extension-wrapper,
-        .k-file-group-wrapper,
-        .k-multiple-files-group-wrapper,
-        .k-file-invalid-extension-wrapper,
-        .k-multiple-files-invalid-extension-wrapper,
-        .k-file-invalid-group-wrapper,
-        .k-multiple-files-invalid-group-wrapper {
-            color: $upload-icon-color;
-            border-color: $upload-icon-color;
-        }
-
-        // old rendering
-        .k-file-invalid-extension-wrapper,
-        .k-multiple-files-invalid-extension-wrapper,
-        .k-file-error .k-file-extension-wrapper,
-        .k-file-invalid-group-wrapper,
-        .k-multiple-files-invalid-group-wrapper,
-        .k-file-error .k-file-group-wrapper {
-            border-color: $upload-icon-color;
-        }
-
-        // old rendering
-        .k-file-extension-wrapper::before,
-        .k-multiple-files-extension-wrapper::before,
-        .k-file-invalid-extension-wrapper::before,
-        .k-multiple-files-invalid-extension-wrapper::before,
-        .k-file-error .k-file-extension-wrapper::before {
-            background-color: $upload-bg;
-            border-color: transparent transparent $upload-icon-color $upload-icon-color;
-        }
-
-        // old rendering
-        .k-multiple-files-extension-wrapper::after,
-        .k-multiple-files-invalid-extension-wrapper::after {
-            border-top-color: $upload-icon-color;
-            border-left-color: $upload-icon-color;
+        .k-file-icon-wrapper {
+            color: $kendo-upload-icon-color;
+            border-color: $kendo-upload-icon-color;
         }
 
         .k-file-size,
         .k-file-validation-message,
-        .k-file-information {
-            color: $subtle-text;
+        .k-file-summary {
+            color: $kendo-subtle-text;
         }
 
-        .k-multiple-files-wrapper .k-file-information {
-            color: $upload-text;
+        .k-multiple-files-wrapper .k-file-summary {
+            color: $kendo-upload-text;
         }
 
         // Invalid,
         &.k-invalid,
         &.ng-invalid.ng-touched,
         &.ng-invalid.ng-dirty {
-            border-color: $invalid-border;
+            border-color: $kendo-invalid-border;
         }
     }
 

package/scss/upload/_variables.scss

@@ -1,48 +1,48 @@
 // Upload
-$upload-border-width: 1px !default;
-$upload-font-family: $font-family !default;
-$upload-font-size: $font-size !default;
-$upload-line-height: $line-height !default;
-$upload-max-height: 300px !default;
 
-$upload-bg: $component-bg !default;
-$upload-text: $component-text !default;
-$upload-border: $component-border !default;
+$kendo-upload-border-width: 1px !default;
+$kendo-upload-font-family: $font-family !default;
+$kendo-upload-font-size: $font-size !default;
+$kendo-upload-line-height: $line-height !default;
+$kendo-upload-max-height: 300px !default;
 
-$upload-dropzone-padding-x: map-get( $spacing, 2 ) !default;
-$upload-dropzone-padding-y: map-get( $spacing, 2 ) !default;
-$upload-dropzone-bg: $header-bg !default;
-$upload-dropzone-text: $header-text !default;
-$upload-dropzone-border: $upload-border !default;
-$upload-dropzone-hover-bg: $hovered-bg !default;
+$kendo-upload-bg: $kendo-component-bg !default;
+$kendo-upload-text: $kendo-component-text !default;
+$kendo-upload-border: $kendo-component-border !default;
 
-$upload-status-text: $subtle-text !default;
-$upload-status-text-opacity: null !default;
+$kendo-upload-dropzone-padding-x: k-map-get( $kendo-spacing, 2 ) !default;
+$kendo-upload-dropzone-padding-y: k-map-get( $kendo-spacing, 2 ) !default;
+$kendo-upload-dropzone-bg: $kendo-component-header-bg !default;
+$kendo-upload-dropzone-text: $kendo-component-header-text !default;
+$kendo-upload-dropzone-border: $kendo-upload-border !default;
+$kendo-upload-dropzone-hover-bg: $kendo-hover-bg !default;
 
-$upload-item-padding-x: map-get( $spacing, 2 ) !default;
-$upload-item-padding-y: map-get( $spacing, 2 ) !default;
+$kendo-upload-status-text: $kendo-subtle-text !default;
+$kendo-upload-status-text-opacity: null !default;
 
-$upload-multiple-items-spacing: 12px !default;
+$kendo-upload-item-padding-x: k-map-get( $kendo-spacing, 2 ) !default;
+$kendo-upload-item-padding-y: k-map-get( $kendo-spacing, 2 ) !default;
 
-$upload-validation-font-size: 11px !default;
-$upload-icon-spacing: $icon-spacing !default;
-$upload-icon-color: $subtle-text !default;
+$kendo-upload-multiple-items-spacing: 12px !default;
 
-$upload-item-image-width: 30px !default;
-$upload-item-image-height: 30px !default;
-$upload-item-image-border: 0px !default; // TODO: remove
+$kendo-upload-validation-font-size: 11px !default;
+$kendo-upload-icon-spacing: $kendo-icon-spacing !default;
+$kendo-upload-icon-color: $kendo-subtle-text !default;
 
-$upload-group-icon-size: $icon-size-lg !default;
+$kendo-upload-item-image-width: 30px !default;
+$kendo-upload-item-image-height: 30px !default;
+$kendo-upload-item-image-border: 0px !default; // TODO: remove
 
-$upload-progress-thickness: 2px !default;
-$upload-progress-bg: $info !default;
-$upload-progress-text: $component-text !default;
+$kendo-upload-group-icon-size: $kendo-icon-size-xxl !default;
 
-$upload-success-bg: $success !default;
-$upload-success-text: $success !default;
+$kendo-upload-progress-thickness: 2px !default;
+$kendo-upload-progress-bg: $kendo-color-info !default;
 
-$upload-error-bg: $error !default;
-$upload-error-text: $error !default;
-$upload-error-border: $error !default;
+$kendo-upload-success-bg: $kendo-color-success !default;
+$kendo-upload-success-text: $kendo-color-success !default;
 
-$upload-focused-shadow: 0 0 0 2px rgba(0, 0, 0, .13) !default;
+$kendo-upload-error-bg: $kendo-color-error !default;
+$kendo-upload-error-text: $kendo-color-error !default;
+$kendo-upload-error-border: $kendo-color-error !default;
+
+$kendo-upload-focus-shadow: 0 0 0 2px rgba(0, 0, 0, .13) !default;

package/scss/utils/_index.scss

@@ -2,26 +2,7 @@
 
 
 // Dependencies
-@import "../typography/_variables.scss";
 
 
 // Component
-@import "_aspect-ratio.scss";
-@import "_border.scss";
-@import "_display.scss";
-@import "_flex.scss";
-@import "_float.scss";
-@import "_grid.scss";
-@import "_order.scss";
-@import "_overflow.scss";
-@import "_pointer-events.scss";
-@import "_position.scss";
-@import "_resize.scss";
-@import "_spacing.scss";
-@import "_spacer.scss";
-@import "_table-layout.scss";
-@import "_text.scss";
-@import "_theme-colors.scss";
-@import "_touch-action.scss";
-@import "_transform.scss";
-@import "_user-select.scss";
+@import "@progress/kendo-theme-utils/scss/all.scss";

package/scss/validator/_index.scss

@@ -8,6 +8,6 @@
 
 
 // Component
-@import "_variables.scss";
-@import "_layout.scss";
-@import "_theme.scss";
+@import "./_variables.scss";
+@import "./_layout.scss";
+@import "./_theme.scss";

package/scss/virtual-scroller/_index.scss

@@ -5,6 +5,6 @@
 
 
 // Component
-@import "_variables.scss";
-@import "_layout.scss";
-@import "_theme.scss";
+@import "./_variables.scss";
+@import "./_layout.scss";
+@import "./_theme.scss";

package/scss/window/_index.scss

@@ -11,6 +11,6 @@
 
 
 // Component
-@import "_variables.scss";
-@import "_layout.scss";
-@import "_theme.scss";
+@import "./_variables.scss";
+@import "./_layout.scss";
+@import "./_theme.scss";

package/scss/window/_layout.scss

@@ -1,21 +1,21 @@
 @include exports("window/layout") {
 
     .k-window {
-        @include border-radius( $window-border-radius );
+        @include border-radius( $kendo-window-border-radius );
         padding: 0;
-        border-width: $window-border-width;
+        border-width: $kendo-window-border-width;
         border-style: solid;
         box-sizing: border-box;
         outline: 0;
-        font-family: $window-font-family;
-        font-size: $window-font-size;
-        line-height: $window-line-height;
+        font-family: $kendo-window-font-family;
+        font-size: $kendo-window-font-size;
+        line-height: $kendo-window-line-height;
         display: inline-flex;
         flex-direction: column;
         position: absolute;
         z-index: 10002;
         -webkit-touch-callout: none;
-        -webkit-tap-highlight-color: $rgba-transparent;
+        -webkit-tap-highlight-color: $kendo-color-rgba-transparent;
 
         // overlay during dragging
         // .k-overlay {
@@ -31,17 +31,17 @@
 
 
     // Window sizes
-    @each $size, $width in $window-sizes {
+    @each $size, $width in $kendo-window-sizes {
         .k-window-#{$size} { width: $width; }
     }
 
 
     // Title bar
     .k-window-titlebar {
-        @include border-top-radius( $window-border-radius );
-        padding: $window-titlebar-padding-y $window-titlebar-padding-x;
-        border-width: $window-titlebar-border-width;
-        border-style: $window-titlebar-border-style;
+        @include border-top-radius( $kendo-window-border-radius );
+        padding: $kendo-window-titlebar-padding-y $kendo-window-titlebar-padding-x;
+        border-width: $kendo-window-titlebar-border-width;
+        border-style: $kendo-window-titlebar-border-style;
         white-space: nowrap;
         display: flex;
         flex-direction: row;
@@ -57,8 +57,8 @@
     .k-window-title {
         padding: .5em 0;
         margin: -.5em 0;
-        font-size: $window-title-font-size;
-        line-height: $window-title-line-height;
+        font-size: $kendo-window-title-font-size;
+        line-height: $kendo-window-title-line-height;
         text-overflow: ellipsis;
         overflow: hidden;
         cursor: default;
@@ -73,30 +73,30 @@
 
 
     // Actions
-    .k-window-actions {
+    .k-window-titlebar-actions {
         margin: -5em 0;
-        margin-inline-end: calc( #{$window-titlebar-padding-y} - #{$window-titlebar-padding-x} );
+        margin-inline-end: calc( #{$kendo-window-titlebar-padding-y} - #{$kendo-window-titlebar-padding-x} );
         line-height: 1;
         display: flex;
-        gap: $window-actions-gap;
+        gap: $kendo-window-actions-gap;
         flex-flow: row nowrap;
         flex-shrink: 0;
         align-items: center;
         vertical-align: top;
     }
-    .k-window-action {
+    .k-window-titlebar-action {
         flex-shrink: 0;
-        opacity: $window-action-opacity;
+        opacity: $kendo-window-action-opacity;
     }
-    .k-window-action:hover {
-        opacity: $window-action-hover-opacity;
+    .k-window-titlebar-action:hover {
+        opacity: $kendo-window-action-hover-opacity;
     }
 
 
     // Content
     .k-window-content,
     .k-prompt-container {
-        padding: $window-inner-padding-y $window-inner-padding-x;
+        padding: $kendo-window-inner-padding-y $kendo-window-inner-padding-x;
         border-width: 0;
         border-color: inherit;
         color: inherit;
@@ -107,13 +107,13 @@
         flex: 1 1 auto;
     }
     .k-window-content + .k-prompt-container {
-        margin-top: -($window-inner-padding-y / 2);
+        margin-top: - k-math-div( $kendo-window-inner-padding-y, 2 );
     }
     .k-window-content:first-child {
-        padding-top: clamp( #{$window-inner-padding-y}, #{$window-titlebar-padding-y}, #{$window-titlebar-padding-y} );
+        padding-top: clamp( #{$kendo-window-inner-padding-y}, #{$kendo-window-titlebar-padding-y}, #{$kendo-window-titlebar-padding-y} );
     }
     .k-window-content:last-child {
-        padding-bottom: clamp( #{$window-inner-padding-y}, #{$window-titlebar-padding-y}, #{$window-titlebar-padding-y} );
+        padding-bottom: clamp( #{$kendo-window-inner-padding-y}, #{$kendo-window-titlebar-padding-y}, #{$kendo-window-titlebar-padding-y} );
     }
 
     .k-window-iframecontent {
@@ -129,11 +129,10 @@
     }
 
     // Buttons Layout
-    .k-window-buttons,
-    .k-window-buttongroup {
-        @include border-bottom-radius( $window-border-radius );
-        padding: $window-buttongroup-padding-y $window-buttongroup-padding-x;
-        border-width: $window-buttongroup-border-width 0 0;
+    .k-window-actions {
+        @include border-bottom-radius( $kendo-window-border-radius );
+        padding: $kendo-window-buttongroup-padding-y $kendo-window-buttongroup-padding-x;
+        border-width: $kendo-window-buttongroup-border-width 0 0;
         border-style: solid;
         border-color: inherit;
         flex: 0 0 auto;

package/scss/window/_theme.scss

@@ -3,17 +3,17 @@
     // Window
     .k-window {
         @include fill(
-            $window-text,
-            $window-bg,
-            $window-border
+            $kendo-window-text,
+            $kendo-window-bg,
+            $kendo-window-border
         );
-        @include box-shadow( $window-shadow );
+        @include box-shadow( $kendo-window-shadow );
     }
 
     .k-window {
         &:focus,
         &.k-focus {
-            @include box-shadow( $window-focused-shadow );
+            @include focus-indicator( $kendo-window-focus-shadow );
         }
     }
 
@@ -21,11 +21,19 @@
     // Titlebar
     .k-window-titlebar {
         @include fill(
-            $window-titlebar-text,
-            $window-titlebar-bg,
-            $window-titlebar-border,
-            $window-titlebar-gradient
+            $kendo-window-titlebar-text,
+            $kendo-window-titlebar-bg,
+            $kendo-window-titlebar-border,
+            $kendo-window-titlebar-gradient
         );
     }
 
+    // Window theme colors
+    @each $name, $color in $kendo-window-theme-colors {
+        .k-window-#{$name} .k-window-titlebar {
+            color: k-contrast-legacy( $color );
+            background-color: $color;
+        }
+    }
+
 }

package/scss/window/_variables.scss

@@ -1,44 +1,56 @@
+@import "../action-buttons/_variables.scss";
+
+
 // Window
-$window-border-width: 0px !default;
-$window-border-radius: 0px !default;
-$window-font-family: $font-family !default;
-$window-font-size: $font-size !default;
-$window-line-height: 1.25 !default;
 
-$window-titlebar-padding-x: 16px !default;
-$window-titlebar-padding-y: 12px !default;
-$window-titlebar-border-width: 0 0 1px !default;
-$window-titlebar-border-style: solid !default;
+$kendo-window-border-width: 0px !default;
+$kendo-window-border-radius: 0px !default;
+$kendo-window-font-family: $font-family !default;
+$kendo-window-font-size: $font-size !default;
+$kendo-window-line-height: 1.25 !default;
+
+$kendo-window-titlebar-padding-x: 16px !default;
+$kendo-window-titlebar-padding-y: 12px !default;
+$kendo-window-titlebar-border-width: 0 0 1px !default;
+$kendo-window-titlebar-border-style: solid !default;
 
-$window-title-font-size: $font-size-lg !default;
-$window-title-line-height: 1.25 !default;
+$kendo-window-title-font-size: $font-size-lg !default;
+$kendo-window-title-line-height: 1.25 !default;
 
-$window-actions-gap: null !default;
+$kendo-window-actions-gap: null !default;
 
-$window-action-opacity: null !default;
-$window-action-hover-opacity: null !default;
+$kendo-window-action-opacity: null !default;
+$kendo-window-action-hover-opacity: null !default;
 
-$window-inner-padding-x: 16px !default;
-$window-inner-padding-y: 16px !default;
+$kendo-window-inner-padding-x: 16px !default;
+$kendo-window-inner-padding-y: 16px !default;
 
-$window-buttongroup-padding-x: $actions-padding-x !default;
-$window-buttongroup-padding-y: $actions-padding-y !default;
-$window-buttongroup-border-width: 1px !default;
+$kendo-window-buttongroup-padding-x: $actions-padding-x !default;
+$kendo-window-buttongroup-padding-y: $actions-padding-y !default;
+$kendo-window-buttongroup-border-width: 1px !default;
 
-$window-bg: $component-bg !default;
-$window-text: $component-text !default;
-$window-border: $component-border !default;
+$kendo-window-bg: $kendo-component-bg !default;
+$kendo-window-text: $kendo-component-text !default;
+$kendo-window-border: $kendo-component-border !default;
 
-$window-titlebar-bg: $header-bg !default;
-$window-titlebar-text: $header-text !default;
-$window-titlebar-border: inherit !default;
-$window-titlebar-gradient: null !default;
+$kendo-window-titlebar-bg: $kendo-component-header-bg !default;
+$kendo-window-titlebar-text: $kendo-component-header-text !default;
+$kendo-window-titlebar-border: inherit !default;
+$kendo-window-titlebar-gradient: null !default;
 
-$window-shadow: 0 3px 3px 0 rgba(0, 0, 0, .06) !default;
-$window-focused-shadow: 1px 1px 7px 1px rgba(0, 0, 0, .3) !default;
+$kendo-window-shadow: 0 3px 3px 0 rgba(0, 0, 0, .06) !default;
+$kendo-window-focus-shadow: 1px 1px 7px 1px rgba(0, 0, 0, .3) !default;
 
-$window-sizes: (
+$kendo-window-sizes: (
     sm: 300px,
     md: 800px,
     lg: 1200px
 ) !default;
+
+/// Theme colors map for the window.
+/// @group window
+$kendo-window-theme-colors: (
+    "primary": k-map-get($kendo-theme-colors, "primary"),
+    "light": k-map-get($kendo-theme-colors, "light"),
+    "dark": k-map-get($kendo-theme-colors, "dark")
+) !default;

package/scss/wizard/_index.scss

@@ -10,6 +10,6 @@
 
 
 // Component
-@import "_variables.scss";
-@import "_layout.scss";
-@import "_theme.scss";
+@import "./_variables.scss";
+@import "./_layout.scss";
+@import "./_theme.scss";

package/scss/wizard/_layout.scss

@@ -23,7 +23,7 @@
 
         .k-wizard-step {
             box-sizing: border-box;
-            padding: calc(#{$wizard-content-padding-x / 4} + 2px);
+            padding: calc(#{k-math-div( $wizard-content-padding-x, 4 )} + 2px);
             width: 100%;
             display: flex;
             flex-direction: column;

package/scss/wizard/_theme.scss

@@ -3,13 +3,7 @@
     .k-wizard-step {
         &:focus,
         &.k-focus {
-            outline-color: $wizard-step-border-focused;
-        }
-
-        .k-ie &:focus,
-        .k-ie &.k-focus {
-            @include box-shadow($wizard-focused-shadow);
-            outline: none;
+            outline-color: $wizard-step-focus-border;
         }
     }
 

package/scss/wizard/_variables.scss

@@ -1,8 +1,8 @@
 // Wizard
-$wizard-padding-x: $padding-x * 2.5 !default;
+$wizard-padding-x: $kendo-padding-md-x * 2.5 !default;
 $wizard-padding-y: $wizard-padding-x !default;
-$wizard-content-padding-x: $padding-x * 4 !default;
-$wizard-content-padding-y: $padding-y * 8 !default;
+$wizard-content-padding-x: $kendo-padding-md-x * 4 !default;
+$wizard-content-padding-y: $kendo-padding-md-y * 8 !default;
 $wizard-buttons-margin-x: 10px !default;
 
 $wizard-border-width: 0px !default;
@@ -10,5 +10,4 @@ $wizard-font-size: $font-size !default;
 $wizard-line-height: $line-height !default;
 $wizard-font-family: $font-family !default;
 
-$wizard-step-border-focused: #656565 !default;
-$wizard-focused-shadow: inset 0 0 0 2px rgba(0, 0, 0, .13) !default;
+$wizard-step-focus-border: #656565 !default;