@progress/kendo-theme-default 5.12.0 → 5.12.1-dev.1

package/scss/common/_base.scss

@@ -68,8 +68,8 @@
     // Text selection
     .k-text-selection {
         ::selection {
-            background-color: $primary;
-            color: $primary-contrast;
+            background-color: $kendo-color-primary;
+            color: $kendo-color-primary-contrast;
         }
     }
 
@@ -78,11 +78,11 @@
     .k-panel {
         @include border-radius( $kendo-border-radius-md );
         @include fill(
-            $panel-text,
-            $panel-bg,
-            $panel-border
+            $kendo-component-text,
+            $kendo-component-bg,
+            $kendo-component-border
         );
-        padding: $panel-padding-y $panel-padding-x;
+        padding: 0;
         border-width: 1px;
         border-style: solid;
         box-sizing: border-box;
@@ -90,20 +90,24 @@
         > .k-header {
             @include border-top-radius( $kendo-border-radius-md );
             @include fill(
-                $header-text,
-                $header-bg,
-                $header-border,
-                $header-gradient
+                $kendo-component-header-text,
+                $kendo-component-header-bg,
+                $kendo-component-header-border,
+                $kendo-component-header-gradient
             );
-            margin: #{-$panel-padding-y} #{-$panel-padding-x} $panel-padding-y;
-            padding: $header-padding-y $header-padding-x;
+            padding-inline: k-map-get( $kendo-spacing, 2 );
+            padding-block: k-map-get( $kendo-spacing, 1 );
+        }
+        > .k-content {
+            padding-inline: k-map-get( $kendo-spacing, 2 );
+            padding-block: k-map-get( $kendo-spacing, 1 );
         }
     }
     .k-content {
         @include fill(
-            $panel-text,
-            $panel-bg,
-            $panel-border
+            $kendo-component-text,
+            $kendo-component-bg,
+            $kendo-component-border
         );
     }
 
@@ -116,7 +120,7 @@
     .k-disabled,
     .k-widget[disabled],
     .k-disabled {
-        @include disabled( $disabled-styling );
+        @include disabled( $kendo-disabled-styling );
 
 
         .k-link {
@@ -144,7 +148,7 @@
         height: 0;
         border-width: 1px 0 0;
         border-style: solid;
-        border-color: $panel-border;
+        border-color: $kendo-component-border;
         display: block;
         float: none;
         clear: both;
@@ -178,7 +182,7 @@
         height: 0;
         border-width: 3px;
         border-style: solid;
-        border-color: $error $error transparent transparent;
+        border-color: $kendo-color-error $kendo-color-error transparent transparent;
         position: absolute;
         top: 0;
         right: 0;
@@ -187,87 +191,10 @@
     [dir = "rtl"],
     .k-rtl {
         .k-dirty {
-            border-color: transparent transparent $error $error;
+            border-color: transparent transparent $kendo-color-error $kendo-color-error;
             right: auto;
             left: 0;
         }
     }
 
 }
-
-@include exports( "common/placeholder" ) {
-
-    .k-placeholder-line {
-        width: $placeholder-line-width;
-        height: $placeholder-line-height;
-        background-color: $placeholder-bg;
-        display: inline-block;
-    }
-}
-
-@include exports( "common/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: ($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: (($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: (($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: (($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: (($drop-hint-arrow-size / 2) * $equilateral-index);
-            border-bottom-color: $drop-hint-bg;
-            border-top-width: 0;
-        }
-    }
-
-}

package/scss/common/_index.scss

@@ -1,9 +1,7 @@
 @import "../typography/_variables.scss";
 
-@import "_base.scss";
-@import "_animations.scss";
-@import "_dragdrop.scss";
-@import "_loading.scss";
-@import "_resizing.scss";
-@import "_scrollbar.scss";
-@import "_selection.scss";
+@import "./_base.scss";
+@import "./_animations.scss";
+@import "./_resizing.scss";
+@import "./_scrollbar.scss";
+@import "./_selection.scss";

package/scss/common/_selection.scss

@@ -15,13 +15,13 @@
     }
 
     .k-marquee-color {
-        color: $selected-text;
-        background-color: $selected-bg;
-        border-color: $selected-border;
+        color: $kendo-selected-text;
+        background-color: $kendo-selected-bg;
+        border-color: $kendo-selected-border;
         opacity: .6;
     }
     .k-marquee-text {
-        color: $selected-text;
+        color: $kendo-selected-text;
     }
 
 }

package/scss/core/_index.scss

@@ -1,9 +1,19 @@
-@import "functions/_index.scss";
-@import "mixins/_index.scss";
-@import "../_variables.scss";
+$wcag-min-contrast-ratio: 4.5 !default;
+
+// Functions
+@import "./functions/index.import.scss";
+
+// Color system
+@import "./color-system/index.import.scss";
+
+// Mixins
+@import "./mixins/index.import.scss";
 
-@import "_asp-fallback.scss";
-@import "_normalize.scss";
-@import "_extra.scss";
-@import "_layout.scss";
-@import "_color-system.scss";
+// Module system
+@import "./module-system/index.import.scss";
+
+// Common styles
+@import "./styles/index.import.scss";
+
+// Variables
+@import "../_variables.scss";

package/scss/core/color-system/index.import.scss

@@ -0,0 +1 @@
+@import "@progress/kendo-theme-core/scss/color-system/index.import.scss";

package/scss/core/functions/index.import.scss

@@ -0,0 +1 @@
+@import "@progress/kendo-theme-core/scss/functions/index.import.scss";

package/scss/core/mixins/index.import.scss

@@ -0,0 +1 @@
+@import "@progress/kendo-theme-core/scss/mixins/index.import.scss";

package/scss/core/module-system/index.import.scss

@@ -0,0 +1 @@
+@import "@progress/kendo-theme-core/scss/module-system/index.import.scss";

package/scss/core/styles/index.import.scss

@@ -0,0 +1 @@
+@import "@progress/kendo-theme-core/scss/styles/index.import.scss";

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

@@ -43,7 +43,7 @@
         font-size: $chart-font-size;
         line-height: $chart-line-height;
         -webkit-touch-callout: none;
-        -webkit-tap-highlight-color: $rgba-transparent;
+        -webkit-tap-highlight-color: $kendo-color-rgba-transparent;
     }
 
     .k-chart,
@@ -62,7 +62,7 @@
 
     .k-chart-tooltip-wrapper .k-animation-container-shown,
     .k-chart-tooltip-wrapper.k-animation-container-shown {
-        transition: left ease-in 80ms, top ease-in 80ms;
+        transition: $chart-tooltip-transition;
     }
 
     .k-sparkline-tooltip-wrapper,
@@ -97,7 +97,7 @@
     .k-chart-tooltip td {
         width: auto;
         text-align: left;
-        padding: $padding-y-sm $padding-x-sm;
+        padding: $kendo-padding-sm-y $kendo-padding-sm-x;
         line-height: $line-height;
         vertical-align: middle;
     }
@@ -152,31 +152,31 @@
     }
 
     .k-left-handle {
-        left: -($selection-handle-size / 2);
+        left: - k-math-div( $selection-handle-size, 2 );
     }
 
     .k-right-handle {
-        right: -($selection-handle-size / 2);
+        right: - k-math-div( $selection-handle-size, 2 );
     }
 
     .k-left-handle div {
-        margin: -($selection-handle-size) 0 0 (-($selection-handle-size / 1.5));
-        padding: ($selection-handle-size * 2) (($selection-handle-size / 1.5) * 2) 0 0;
+        margin: -($selection-handle-size) 0 0 (- k-math-div( $selection-handle-size, 1.5 ));
+        padding: ($selection-handle-size * 2) (k-math-div( $selection-handle-size, 1.5 ) * 2) 0 0;
     }
 
     .k-right-handle div {
-        margin: -($selection-handle-size) 0 0 (-($selection-handle-size / 1.5));
-        padding: ($selection-handle-size * 2) 0 0 (($selection-handle-size / 1.5) * 2);
+        margin: -($selection-handle-size) 0 0 (- k-math-div( $selection-handle-size, 1.5 ));
+        padding: ($selection-handle-size * 2) 0 0 (k-math-div( $selection-handle-size, 1.5 ) * 2);
     }
 
     .k-left-handle.k-handle-active div {
         margin-left: -($selection-handle-size * 2);
-        padding-left: ($selection-handle-size * 2) + ($selection-handle-size / 1.5);
+        padding-left: ($selection-handle-size * 2) + k-math-div( $selection-handle-size, 1.5 );
     }
 
     .k-right-handle.k-handle-active div {
         margin-left: -($selection-handle-size * 2);
-        padding-right: ($selection-handle-size * 2) + ($selection-handle-size / 1.5);
+        padding-right: ($selection-handle-size * 2) + k-math-div( $selection-handle-size, 1.5 );
     }
 
     .k-mask {
@@ -216,9 +216,6 @@
 
     .k-chart-dragging {
         user-select: none;
-        -moz-user-select: none;
-        -webkit-user-select: none;
-        -ms-user-select: none;
     }
 
     .k-chart-donut-center {
@@ -268,11 +265,6 @@
         width: 100%;
         height: 100%;
     }
-
-    // IE8-
-    .k-diagram img {
-        box-sizing: content-box;
-    }
 }
 
 
@@ -291,7 +283,7 @@
         display: block;
         overflow: hidden;
         -webkit-touch-callout: none;
-        -webkit-tap-highlight-color: $rgba-transparent;
+        -webkit-tap-highlight-color: $kendo-color-rgba-transparent;
 
         // Tile
         .k-treemap-tile {
@@ -311,7 +303,7 @@
 
         // Title
         .k-treemap-title {
-            padding: $padding-y-sm $padding-x-sm;
+            padding: $kendo-padding-sm-y $kendo-padding-sm-x;
             border-width: 0 0 1px;
             border-style: solid;
             border-color: inherit;
@@ -320,7 +312,7 @@
             background-repeat: repeat-x;
         }
         .k-treemap-title-vertical {
-            padding: $padding-x-sm $padding-y-sm;
+            padding: $kendo-padding-sm-x $kendo-padding-sm-y;
             width: $line-height-em;
             white-space: nowrap;
             overflow: hidden;
@@ -351,16 +343,16 @@
             right: 0;
         }
         .k-treemap-title + .k-treemap-wrap {
-            top: calc( #{$padding-y-sm * 2} + (#{$line-height} * #{$font-size}) + 1px);
+            top: calc( #{$kendo-padding-sm-y * 2} + (#{$line-height} * #{$font-size}) + 1px);
         }
         .k-treemap-title-vertical + .k-treemap-wrap {
-            left: calc( #{$padding-y-sm * 2} + (#{$line-height} * #{$font-size}) + 1px);
+            left: calc( #{$kendo-padding-sm-y * 2} + (#{$line-height} * #{$font-size}) + 1px);
         }
 
 
         // Leaf
         .k-leaf {
-            padding: $padding-x-sm;
+            padding: $kendo-padding-sm-x;
         }
     }
 }
@@ -410,10 +402,8 @@
 
     // export variables to allow use in scripts
     $exported: (
-        accent: $primary,
-        accent-contrast: $primary-contrast,
-        primary: $primary,
-        primary-contrast: $primary-contrast,
+        primary: $kendo-color-primary,
+        primary-contrast: $kendo-color-primary-contrast,
         base: $base-bg,
         background: $chart-bg,
 
@@ -421,15 +411,15 @@
 
         normal-background: $base-bg,
         normal-text-color: $base-text,
-        hover-background: $hovered-bg,
-        hover-text-color: $hovered-text,
-        selected-background: $selected-bg,
-        selected-text-color: $selected-text,
+        hover-background: $kendo-hover-bg,
+        hover-text-color: $kendo-hover-text,
+        selected-background: $kendo-selected-bg,
+        selected-text-color: $kendo-selected-text,
 
-        success: $success,
-        info: $info,
-        warning: $warning,
-        error: $error,
+        success: $kendo-color-success,
+        info: $kendo-color-info,
+        warning: $kendo-color-warning,
+        error: $kendo-color-error,
 
         series-a: $series-a,
         series-b: $series-b,
@@ -469,12 +459,12 @@
         series-29: $series-29,
         series-30: $series-30,
 
-        gauge-pointer: $primary,
-        gauge-track: try-shade( $chart-bg )
+        gauge-pointer: $kendo-color-primary,
+        gauge-track: k-try-shade( $chart-bg )
     );
 
     @each $name, $value in $exported {
-        $type: type-of($value);
+        $type: k-meta-type-of($value);
 
         .k-var--#{$name} {
             @if $type == "color" {

package/scss/dataviz/_theme.scss

@@ -63,10 +63,10 @@
     // Tooltip
     // TODO
     .k-chart-tooltip {
-        color: $white;
+        color: $kendo-color-white;
     }
     .k-chart-tooltip-inverse {
-        color: $black;
+        color: $kendo-color-black;
     }
 
     .k-chart-crosshair-tooltip,
@@ -109,7 +109,7 @@
     }
 
     .k-mask {
-        background-color: $component-bg;
+        background-color: $kendo-component-bg;
         opacity: .8;
     }
 }
@@ -120,31 +120,31 @@
     // Treemap
     .k-treemap {
         @include fill(
-            $component-text,
-            $component-bg,
-            $component-border
+            $kendo-component-text,
+            $kendo-component-bg,
+            $kendo-component-border
         );
 
         // Title
         .k-treemap-title {
             @include fill(
-                $header-text,
-                $header-bg,
-                $header-border,
-                $header-gradient
+                $kendo-component-header-text,
+                $kendo-component-header-bg,
+                $kendo-component-header-border,
+                $kendo-component-header-gradient
             );
         }
 
         // Leaf
         .k-leaf {
-            color: $component-bg;
+            color: $kendo-component-bg;
         }
         .k-leaf.k-inverse {
-            color: $component-text;
+            color: $kendo-component-text;
         }
         .k-leaf:hover,
         .k-leaf.k-hover {
-            box-shadow: inset 0 0 0 3px $component-border;
+            box-shadow: inset 0 0 0 3px $kendo-component-border;
         }
     }
 

package/scss/dataviz/_variables.scss

@@ -2,50 +2,50 @@
 /// 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 +94,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";