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

package/scss/dataviz/_variables.scss

@@ -1,51 +1,55 @@
+@import "../button/_variables.scss";
+
+
 // Chart
+
 /// The first base series color and its light and dark shades.
 /// @group charts
 $series-a: #ff6358 !default;
-$series-a-dark: mix(black, $series-a, 25%) !default;
-$series-a-darker: mix(black, $series-a, 50%) !default;
-$series-a-light: mix(white, $series-a, 25%) !default;
-$series-a-lighter: mix(white, $series-a, 50%) !default;
+$series-a-dark: k-color-mix(black, $series-a, 25%) !default;
+$series-a-darker: k-color-mix(black, $series-a, 50%) !default;
+$series-a-light: k-color-mix(white, $series-a, 25%) !default;
+$series-a-lighter: k-color-mix(white, $series-a, 50%) !default;
 
 /// The second base series color and its light and dark shades.
 /// @group charts
 $series-b: #ffe162 !default;
-$series-b-dark: mix(black, $series-b, 25%) !default;
-$series-b-darker: mix(black, $series-b, 50%) !default;
-$series-b-light: mix(white, $series-b, 25%) !default;
-$series-b-lighter: mix(white, $series-b, 50%) !default;
+$series-b-dark: k-color-mix(black, $series-b, 25%) !default;
+$series-b-darker: k-color-mix(black, $series-b, 50%) !default;
+$series-b-light: k-color-mix(white, $series-b, 25%) !default;
+$series-b-lighter: k-color-mix(white, $series-b, 50%) !default;
 
 /// The third base series color and its light and dark shades.
 /// @group charts
 $series-c: #4cd180 !default;
-$series-c-dark: mix(black, $series-c, 25%) !default;
-$series-c-darker: mix(black, $series-c, 50%) !default;
-$series-c-light: mix(white, $series-c, 25%) !default;
-$series-c-lighter: mix(white, $series-c, 50%) !default;
+$series-c-dark: k-color-mix(black, $series-c, 25%) !default;
+$series-c-darker: k-color-mix(black, $series-c, 50%) !default;
+$series-c-light: k-color-mix(white, $series-c, 25%) !default;
+$series-c-lighter: k-color-mix(white, $series-c, 50%) !default;
 
 /// The fourth base series color and its light and dark shades.
 /// @group charts
 $series-d: #4b5ffa !default;
-$series-d-dark: mix(black, $series-d, 25%) !default;
-$series-d-darker: mix(black, $series-d, 50%) !default;
-$series-d-light: mix(white, $series-d, 25%) !default;
-$series-d-lighter: mix(white, $series-d, 50%) !default;
+$series-d-dark: k-color-mix(black, $series-d, 25%) !default;
+$series-d-darker: k-color-mix(black, $series-d, 50%) !default;
+$series-d-light: k-color-mix(white, $series-d, 25%) !default;
+$series-d-lighter: k-color-mix(white, $series-d, 50%) !default;
 
 /// The fifth base series color and its light and dark shades.
 /// @group charts
 $series-e: #ac58ff !default;
-$series-e-dark: mix(black, $series-e, 25%) !default;
-$series-e-darker: mix(black, $series-e, 50%) !default;
-$series-e-light: mix(white, $series-e, 25%) !default;
-$series-e-lighter: mix(white, $series-e, 50%) !default;
+$series-e-dark: k-color-mix(black, $series-e, 25%) !default;
+$series-e-darker: k-color-mix(black, $series-e, 50%) !default;
+$series-e-light: k-color-mix(white, $series-e, 25%) !default;
+$series-e-lighter: k-color-mix(white, $series-e, 50%) !default;
 
 /// The sixth base series color and its light and dark shades.
 /// @group charts
 $series-f: #ff5892 !default;
-$series-f-dark: mix(black, $series-f, 25%) !default;
-$series-f-darker: mix(black, $series-f, 50%) !default;
-$series-f-light: mix(white, $series-f, 25%) !default;
-$series-f-lighter: mix(white, $series-f, 50%) !default;
+$series-f-dark: k-color-mix(black, $series-f, 25%) !default;
+$series-f-darker: k-color-mix(black, $series-f, 50%) !default;
+$series-f-light: k-color-mix(white, $series-f, 25%) !default;
+$series-f-lighter: k-color-mix(white, $series-f, 50%) !default;
 
 /// The series colors in order:
 /// base, light, dark, lighter, darker
@@ -94,38 +98,39 @@ $chart-title-font-size: 1.143em !default;
 $chart-pane-title-font-size: $chart-label-font-size !default;
 $chart-pane-title-font-weight: $font-weight-normal !default;
 
-$chart-inactive: rgba( $body-text, .5 ) !default;
-
 /// The color of the Chart grid lines (major).
 /// @group charts
-$chart-major-lines: rgba( if( $dark-theme, $white, $black ), .08 ) !default;
+$chart-major-lines: rgba( if( $dark-theme, $kendo-color-white, $kendo-color-black ), .08 ) !default;
 
 /// The color of the Chart grid lines (minor).
 /// @group charts
-$chart-minor-lines: rgba( if( $dark-theme, $white, $black ), .04 ) !default;
+$chart-minor-lines: rgba( if( $dark-theme, $kendo-color-white, $kendo-color-black ), .04 ) !default;
 
+$chart-inactive: rgba( $kendo-body-text, .5 ) !default;
 $chart-area-opacity: .6 !default;
 $chart-area-inactive-opacity: .1 !default;
 $chart-line-inactive-opacity: .3 !default;
 
-$chart-bg: $component-bg !default;
-$chart-text: $component-text !default;
-$chart-border: $component-border !default;
+$chart-tooltip-transition: left 300ms cubic-bezier(0, .33, .19, 1), top 300ms cubic-bezier(0, .33, .19, 1) !default;
+
+$chart-bg: $kendo-component-bg !default;
+$chart-text: $kendo-component-text !default;
+$chart-border: $kendo-component-border !default;
 
-$chart-crosshair-background: rgba( if( $dark-theme, $white, $black ), .5 ) !default;
+$chart-crosshair-background: rgba( if( $dark-theme, $kendo-color-white, $kendo-color-black ), .5 ) !default;
 $chart-crosshair-shared-tooltip-color: $chart-text !default;
-$chart-crosshair-shared-tooltip-background: try-shade( $chart-bg, 1 ) !default;
-$chart-crosshair-shared-tooltip-border: rgba( if( $dark-theme, $white, $black ), .08) !default;
+$chart-crosshair-shared-tooltip-background: k-try-shade( $chart-bg, 1 ) !default;
+$chart-crosshair-shared-tooltip-border: rgba( if( $dark-theme, $kendo-color-white, $kendo-color-black ), .08) !default;
 
-$chart-notes-background: rgba( if( $dark-theme, $white, $black ), .5 ) !default;
-$chart-notes-border: rgba( if( $dark-theme, $white, $black ), .5 ) !default;
-$chart-notes-lines: rgba( if( $dark-theme, $white, $black ), .5 ) !default;
+$chart-notes-background: rgba( if( $dark-theme, $kendo-color-white, $kendo-color-black ), .5 ) !default;
+$chart-notes-border: rgba( if( $dark-theme, $kendo-color-white, $kendo-color-black ), .5 ) !default;
+$chart-notes-lines: rgba( if( $dark-theme, $kendo-color-white, $kendo-color-black ), .5 ) !default;
 
-$error-bars-background: rgba( if( $dark-theme, $white, $black ), .5 ) !default;
+$error-bars-background: rgba( if( $dark-theme, $kendo-color-white, $kendo-color-black ), .5 ) !default;
 
 $selection-handle-size: 22px !default;
-$selection-border-color: rgba( if( $dark-theme, $white, $black ), .08 ) !default;
-$selection-shadow: inset 0 1px 7px rgba( if( $dark-theme, $white, $black ), .15) !default;
+$selection-border-color: rgba( if( $dark-theme, $kendo-color-white, $kendo-color-black ), .08 ) !default;
+$selection-shadow: inset 0 1px 7px rgba( if( $dark-theme, $kendo-color-white, $kendo-color-black ), .15) !default;
 
 
 // TreeMap

package/scss/dateinput/_index.scss

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

package/scss/datepicker/_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/daterangepicker/_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/daterangepicker/_layout.scss

@@ -6,7 +6,7 @@
         display: flex;
         flex-flow: row nowrap;
         align-items: flex-end;
-        gap: map-get( $spacing, 2 );
+        gap: k-map-get( $kendo-spacing, 2 );
 
         *,
         *::before,

package/scss/datetimepicker/_index.scss

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

package/scss/dialog/_index.scss

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

package/scss/dialog/_layout.scss

@@ -42,7 +42,7 @@
 
 
     // Actions
-    .k-dialog-actions {}
+    .k-dialog-titlebar-actions {}
     .k-dialog-action {}
 
 
@@ -51,33 +51,18 @@
 
 
     // Buttons
-    .k-dialog-buttongroup {
-        @include border-bottom-radius( $window-border-radius );
-        padding: $dialog-buttongroup-padding-y $dialog-buttongroup-padding-x;
-        border-width: $dialog-buttongroup-border-width 0 0;
+    .k-dialog-actions {
+        @include border-bottom-radius( $kendo-window-border-radius );
+        padding: $kendo-dialog-buttongroup-padding-y $kendo-dialog-buttongroup-padding-x;
+        border-width: $kendo-dialog-buttongroup-border-width 0 0;
         border-style: solid;
         border-color: inherit;
         flex: 0 0 auto;
         display: flex;
         flex-flow: row wrap;
         align-items: center;
-        gap: $dialog-button-spacing;
+        gap: $kendo-dialog-button-spacing;
         overflow: hidden;
     }
 
-
-    // Legacy spacing
-    .k-ie .k-dialog-buttongroup {
-
-        .k-button ~ .k-button {
-            margin-left: $dialog-button-spacing;
-
-            .k-rtl &,
-            [dir="rtl"] & {
-                margin-left: 0;
-                margin-right: $dialog-button-spacing;
-            }
-        }
-    }
-
 }

package/scss/dialog/_theme.scss

@@ -2,10 +2,18 @@
     // Titlebar
     .k-dialog-titlebar {
         @include fill(
-            $dialog-titlebar-text,
-            $dialog-titlebar-bg,
-            $dialog-titlebar-border
+            $kendo-dialog-titlebar-text,
+            $kendo-dialog-titlebar-bg,
+            $kendo-dialog-titlebar-border
         );
     }
 
+    // Dialog theme colors
+    @each $name, $color in $kendo-dialog-theme-colors {
+        .k-dialog-#{$name} .k-dialog-titlebar {
+            color: k-contrast-legacy( $color );
+            background-color: $color;
+        }
+    }
+
 }

package/scss/dialog/_variables.scss

@@ -1,10 +1,18 @@
 // Dialog
-$dialog-titlebar-bg: $primary !default;
-$dialog-titlebar-text: $primary-contrast !default;
-$dialog-titlebar-border: inherit !default;
+$kendo-dialog-titlebar-bg: $kendo-component-header-bg !default;
+$kendo-dialog-titlebar-text: $kendo-component-header-text !default;
+$kendo-dialog-titlebar-border: inherit !default;
 
-$dialog-buttongroup-padding-x: $actions-padding-x !default;
-$dialog-buttongroup-padding-y: $actions-padding-y !default;
-$dialog-buttongroup-border-width: 1px !default;
+$kendo-dialog-buttongroup-padding-x: $actions-padding-x !default;
+$kendo-dialog-buttongroup-padding-y: $actions-padding-y !default;
+$kendo-dialog-buttongroup-border-width: 1px !default;
 
-$dialog-button-spacing: $actions-button-spacing !default;
+$kendo-dialog-button-spacing: $actions-button-spacing !default;
+
+/// Theme colors map for the dialog.
+/// @group dialog
+$kendo-dialog-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/draggable/_index.scss

@@ -0,0 +1,10 @@
+@import "../core/_index.scss";
+
+
+// Dependencies
+
+
+// Component
+@import "./_variables.scss";
+@import "./_layout.scss";
+@import "./_theme.scss";

package/scss/draggable/_layout.scss

@@ -0,0 +1,122 @@
+@include exports( "draggable/layout" ) {
+
+    // Layout
+    .k-drag-clue {
+        @include border-radius( $drag-clue-border-radius );
+        padding: $drag-clue-padding-y $drag-clue-padding-x;
+        border-width: $drag-clue-border-width;
+        border-style: if( $drag-clue-border-width == null, null, solid );
+        box-sizing: border-box;
+        font-size: $drag-clue-font-size;
+        font-family: $drag-clue-font-family;
+        line-height: $drag-clue-line-height;
+        display: inline-flex;
+        flex-flow: row nowrap;
+        align-items: center;
+        align-content: center;
+        white-space: nowrap;
+        opacity: $drag-clue-opacity;
+        overflow: hidden;
+        position: absolute;
+        z-index: 20000;
+        cursor: move;
+    }
+    .k-drag-status,
+    .k-drag-clue .k-drag-status {
+        margin: 0;
+        margin-right: .4ex;
+    }
+
+
+    // Drop hint
+    .k-drop-hint {
+        display: flex;
+        gap: $drop-hint-arrow-spacing;
+        justify-content: space-between;
+        align-items: center;
+        position: absolute;
+        z-index: 1000;
+        transform: translate(-50%, -50%);
+    }
+
+    .k-drop-hint-start,
+    .k-drop-hint-end {
+        flex-shrink: 0;
+        border-width: k-math-div( $drop-hint-arrow-size, 2 );
+        border-style: solid;
+        border-color: transparent;
+    }
+
+    .k-drop-hint-line {
+        flex-grow: 1;
+        background-color: $drop-hint-bg;
+    }
+
+    .k-drop-hint-h {
+        .k-drop-hint-start {
+            border-left-width: ( k-math-div( $drop-hint-arrow-size, 2 ) * $equilateral-index );
+            border-left-color: $drop-hint-bg;
+            border-right-width: 0;
+        }
+
+        .k-drop-hint-line {
+            width: $drop-hint-line-h-width;
+            height: $drop-hint-line-h-height;
+        }
+
+        .k-drop-hint-end {
+            border-right-width: ( k-math-div( $drop-hint-arrow-size, 2 ) * $equilateral-index );
+            border-right-color: $drop-hint-bg;
+            border-left-width: 0;
+        }
+    }
+
+    .k-drop-hint-v {
+        flex-direction: column;
+
+        .k-drop-hint-start {
+            border-top-width: ( k-math-div( $drop-hint-arrow-size, 2 ) * $equilateral-index );
+            border-top-color: $drop-hint-bg;
+            border-bottom-width: 0;
+        }
+
+        .k-drop-hint-line {
+            width: $drop-hint-line-v-width;
+            height: $drop-hint-line-v-height;
+        }
+
+        .k-drop-hint-end {
+            border-bottom-width: ( k-math-div( $drop-hint-arrow-size, 2 ) * $equilateral-index );
+            border-bottom-color: $drop-hint-bg;
+            border-top-width: 0;
+        }
+    }
+
+
+    // Reorder cue
+    .k-reorder-cue {
+        position: absolute;
+
+        &::before,
+        &::after {
+            content: "";
+            width: 0;
+            height: 0;
+            border: 3px solid transparent;
+            position: absolute;
+            transform: translateX(-50%);
+        }
+
+        &::before {
+            border-bottom-width: 0;
+            border-top-color: currentColor;
+            top: -4px;
+        }
+        &::after {
+            border-top-width: 0;
+            border-bottom-color: currentColor;
+            bottom: -4px;
+        }
+    }
+
+}

package/scss/draggable/_theme.scss

@@ -0,0 +1,14 @@
+@include exports( "draggable/theme" ) {
+
+    // Theme
+    .k-drag-clue {
+        @include fill(
+            $drag-clue-text,
+            $drag-clue-bg,
+            $drag-clue-border,
+            $drag-clue-gradient
+        );
+        @include box-shadow( $drag-clue-shadow );
+    }
+
+}

package/scss/draggable/_variables.scss

@@ -0,0 +1,27 @@
+// Drag hint
+$drag-clue-padding-x: $kendo-padding-md-x !default;
+$drag-clue-padding-y: $kendo-padding-md-y !default;
+$drag-clue-border-width: 1px !default;
+$drag-clue-border-radius: $kendo-border-radius-md !default;
+$drag-clue-font-size: $font-size !default;
+$drag-clue-font-family: $font-family !default;
+$drag-clue-line-height: $line-height !default;
+
+$drag-clue-bg: $base-bg !default;
+$drag-clue-text: $base-text !default;
+$drag-clue-border: $base-border !default;
+$drag-clue-gradient: null !default;
+$drag-clue-shadow: null !default;
+
+$drag-clue-opacity: null !default;
+
+
+// Drop hint
+$drop-hint-arrow-size: 8px !default;
+$drop-hint-arrow-spacing: k-math-div( $drop-hint-arrow-size, 2 ) !default;
+$drop-hint-line-h-width: 20px !default;
+$drop-hint-line-h-height: 1px !default;
+$drop-hint-line-v-width: $drop-hint-line-h-height !default;
+$drop-hint-line-v-height: $drop-hint-line-h-width !default;
+
+$drop-hint-bg: $kendo-color-primary !default;

package/scss/drawer/_index.scss

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

package/scss/drawer/_layout.scss

@@ -16,16 +16,16 @@
         border-style: solid;
         box-sizing: border-box;
         outline: 0;
-        font-family: $drawer-font-family;
-        font-size: $drawer-font-size;
-        line-height: $drawer-line-height;
+        font-family: $kendo-drawer-font-family;
+        font-size: $kendo-drawer-font-size;
+        line-height: $kendo-drawer-line-height;
         display: flex;
         flex-direction: column;
         flex: 0 0 auto;
         transition: all 300ms ease-in-out; // sass-lint:disable-line no-transition-all
         overflow: hidden;
         -webkit-touch-callout: none;
-        -webkit-tap-highlight-color: $rgba-transparent;
+        -webkit-tap-highlight-color: $kendo-color-rgba-transparent;
 
         *,
         *::before,
@@ -38,13 +38,13 @@
         .k-drawer-expanded &.k-drawer-start,
         .k-drawer-left.k-drawer-mini &,
         .k-drawer-left.k-drawer-expanded & {
-            border-right-width: $drawer-border-width;
+            border-right-width: $kendo-drawer-border-width;
         }
         .k-drawer-mini &.k-drawer-end,
         .k-drawer-expanded &.k-drawer-end,
         .k-drawer-right.k-drawer-mini &,
         .k-drawer-right.k-drawer-expanded & {
-            border-left-width: $drawer-border-width;
+            border-left-width: $kendo-drawer-border-width;
         }
 
         // Position
@@ -114,10 +114,10 @@
 
         // Scrollbar styles for Chrome, Safari and Opera
         &::-webkit-scrollbar {
-            width: $drawer-scrollbar-width;
+            width: $kendo-drawer-scrollbar-width;
         }
         &::-webkit-scrollbar-thumb {
-            border-radius: $drawer-scrollbar-radius;
+            border-radius: $kendo-drawer-scrollbar-radius;
         }
     }
     .k-drawer-items,
@@ -130,29 +130,30 @@
         align-items: stretch;
     }
     .k-drawer-item {
-        padding: $drawer-item-padding-y $drawer-item-padding-x;
+        padding: $kendo-drawer-item-padding-y $kendo-drawer-item-padding-x;
         outline: 0;
         color: inherit;
-        font-size: $drawer-item-font-size;
-        line-height: $drawer-item-line-height;
+        font-size: $kendo-drawer-item-font-size;
+        line-height: $kendo-drawer-item-line-height;
         display: flex;
         flex-flow: row nowrap;
+        gap: $kendo-drawer-item-padding-x;
         cursor: pointer;
 
         > .k-drawer-link {
-            margin: (-$drawer-item-padding-y) (-$drawer-item-padding-x);
-            padding: $drawer-item-padding-y $drawer-item-padding-x;
+            margin: (-$kendo-drawer-item-padding-y) (-$kendo-drawer-item-padding-x);
+            padding: $kendo-drawer-item-padding-y $kendo-drawer-item-padding-x;
             color: inherit;
             display: flex;
             flex-flow: row nowrap;
             flex: 1 0 auto;
+            gap: $kendo-drawer-item-padding-x;
         }
 
         .k-icon {
-            margin: 0 $drawer-item-padding-x;
             height: auto;
-            font-size: $drawer-icon-size;
-            line-height: $drawer-item-line-height;
+            font-size: $kendo-drawer-icon-size;
+            line-height: $kendo-drawer-item-line-height;
             flex-shrink: 0;
 
             &.k-i-none {
@@ -161,7 +162,6 @@
         }
 
         .k-item-text {
-            padding: 0 $drawer-item-padding-x;
             display: inline-block;
             white-space: nowrap;
             overflow: hidden;
@@ -171,12 +171,13 @@
         .k-drawer-toggle {
             margin-inline-start: auto;
             cursor: pointer;
+            display: flex;
         }
 
         // Hierarchy items
-        @for $i from 1 through $drawer-item-level-count {
+        @for $i from 1 through $kendo-drawer-item-level-count {
             &.k-level-#{$i} {
-                padding-inline-start: ( $drawer-item-level-padding-x * $i );
+                padding-inline-start: ( $i + 1) * $kendo-drawer-item-level-padding-x;
             }
         }
     }
@@ -191,7 +192,7 @@
     .k-drawer-mini {
 
         .k-drawer-wrapper {
-            width: $drawer-mini-initial-width;
+            width: $kendo-drawer-mini-initial-width;
         }
 
     }
@@ -205,7 +206,7 @@
         .k-drawer-mini .k-drawer-start,
         .k-drawer-expanded .k-drawer-start,
         &.k-drawer-expanded .k-drawer-start {
-            border-left-width: $drawer-border-width;
+            border-left-width: $kendo-drawer-border-width;
             border-right-width: 0;
         }
         &.k-drawer-mini .k-drawer-end,
@@ -213,7 +214,7 @@
         &.k-drawer-expanded .k-drawer-end
         .k-drawer-expanded .k-drawer-end {
             border-left-width: 0;
-            border-right-width: $drawer-border-width;
+            border-right-width: $kendo-drawer-border-width;
         }
 
         // Position