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

package/scss/colorgradient/_variables.scss

@@ -1,5 +1,5 @@
 // ColorGradient
-$colorgradient-spacer: map-get( $spacing, 3 ) !default;
+$colorgradient-spacer: k-map-get( $kendo-spacing, 3 ) !default;
 
 $colorgradient-width: 272px !default;
 $colorgradient-border-width: 1px !default;
@@ -10,9 +10,9 @@ $colorgradient-gap: $colorgradient-spacer !default;
 $colorgradient-font-family: $font-family !default;
 $colorgradient-font-size: $font-size !default;
 $colorgradient-line-height: $line-height !default;
-$colorgradient-bg: $component-bg !default;
-$colorgradient-text: $component-text !default;
-$colorgradient-border: $component-border !default;
+$colorgradient-bg: $kendo-component-bg !default;
+$colorgradient-text: $kendo-component-text !default;
+$colorgradient-border: $kendo-component-border !default;
 
 $colorgradient-focus-border: null !default;
 $colorgradient-focus-shadow: 1px 1px 7px 1px rgba(0, 0, 0, .3) !default;
@@ -34,18 +34,18 @@ $colorgradient-draghandle-border-width: 1px !default;
 $colorgradient-draghandle-border-radius: 50% !default;
 $colorgradient-draghandle-bg: transparent !default;
 $colorgradient-draghandle-text: null !default;
-$colorgradient-draghandle-border: rgba( $white, .8) !default;
+$colorgradient-draghandle-border: rgba( $kendo-color-white, .8) !default;
 $colorgradient-draghandle-shadow: 0 1px 4px rgba(0, 0, 0, .5) !default;
 $colorgradient-draghandle-focus-shadow: 0 1px 4px black !default;
 $colorgradient-draghandle-hover-shadow: $colorgradient-draghandle-focus-shadow !default;
 
-$colorgradient-canvas-draghandle-margin-y: -( $colorgradient-draghandle-height / 2 ) !default;
-$colorgradient-canvas-draghandle-margin-x: -( $colorgradient-draghandle-width / 2 ) !default;
+$colorgradient-canvas-draghandle-margin-y: - k-math-div( $colorgradient-draghandle-height, 2 ) !default;
+$colorgradient-canvas-draghandle-margin-x: - k-math-div( $colorgradient-draghandle-width, 2 ) !default;
 
 $colorgradient-input-width: 46px !default;
-$colorgradient-input-gap: ( $colorgradient-spacer / 1.5 ) !default;
-$colorgradient-input-label-gap: ( $colorgradient-spacer / 3 ) !default;
-$colorgradient-input-label-text: $subtle-text !default;
+$colorgradient-input-gap: k-math-div( $colorgradient-spacer, 1.5 ) !default;
+$colorgradient-input-label-gap: k-math-div( $colorgradient-spacer, 3 ) !default;
+$colorgradient-input-label-text: $kendo-subtle-text !default;
 
 $colorgradient-contrast-ratio-font-weight: $font-weight-bold !default;
-$colorgradient-contrast-spacer: ( $colorgradient-spacer / 1.5 ) !default;
+$colorgradient-contrast-spacer: k-math-div( $colorgradient-spacer, 1.5 ) !default;

package/scss/colorpalette/_index.scss

@@ -3,10 +3,10 @@
 
 // Dependencies
 @import "../common/_index.scss";
-@import "../utils/_flex.scss";
+// @import "../utils/_flex.scss";
 
 
 // Component
-@import "_variables.scss";
-@import "_layout.scss";
-@import "_theme.scss";
+@import "./_variables.scss";
+@import "./_layout.scss";
+@import "./_theme.scss";

package/scss/colorpalette/_layout.scss

@@ -11,7 +11,7 @@
         display: inline-flex;
         position: relative;
         -webkit-touch-callout: none;
-        -webkit-tap-highlight-color: $rgba-transparent;
+        -webkit-tap-highlight-color: $kendo-color-rgba-transparent;
 
         *,
         *::before,
@@ -35,7 +35,6 @@
         box-sizing: border-box;
         overflow: hidden;
         cursor: pointer;
-        -ms-high-contrast-adjust: none;
 
         &:hover,
         &.k-hover {

package/scss/colorpalette/_theme.scss

@@ -5,7 +5,7 @@
 
         &:focus,
         &.k-focus {
-            @include box-shadow( $colorpalette-tile-focus-shadow );
+            @include focus-indicator( $colorpalette-tile-focus-shadow );
         }
 
         &:hover,

package/scss/colorpalette/_variables.scss

@@ -3,7 +3,7 @@ $colorpalette-font-family: $font-family !default;
 $colorpalette-font-size: $font-size !default;
 $colorpalette-line-height: 0 !default;
 
-$colorpalette-tile-width: map-get( $spacing, 6 ) !default;
+$colorpalette-tile-width: k-map-get( $kendo-spacing, 6 ) !default;
 $colorpalette-tile-height: $colorpalette-tile-width !default;
 $colorpalette-tile-focus-shadow: 0 0 3px 1px rgba( black, .3 ), inset 0 0 0 1px rgba( white, .5 ) !default;
 $colorpalette-tile-hover-shadow: 0 0 3px 1px rgba( black, .3 ), inset 0 0 0 1px rgba( white, .8 ) !default;

package/scss/colorpicker/_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/combobox/_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/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 {
@@ -139,12 +143,12 @@
 @include exports( "common/misc/hr" ) {
 
     .k-hr {
-        margin: $spacer-y auto;
+        margin: k-map-get( $kendo-spacing, 4 ) auto;
         padding: 0;
         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,5 @@
-@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

@@ -5,10 +5,9 @@
 @import "../common/_index.scss";
 @import "../popup/_index.scss";
 @import "../tooltip/_index.scss";
-@import "../button/_variables.scss";
 
 
 // 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,
@@ -87,6 +87,8 @@
 
     .k-handle {
         cursor: e-resize;
+
+        // TODO: refactor and remove button dependency
         @include fill(
             $kendo-button-text,
             $kendo-button-bg,
@@ -109,7 +111,7 @@
     }
 
     .k-mask {
-        background-color: $component-bg;
+        background-color: $kendo-component-bg;
         opacity: .8;
     }
 }
@@ -120,31 +122,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;
         }
     }