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

package/scss/fab/_theme.scss

@@ -7,7 +7,7 @@
             outline: $kendo-fab-border-width solid $color;
             outline-offset: -$kendo-fab-border-width;
             border-color: $color;
-            color: contrast-wcag( $color );
+            color: k-contrast-legacy( $color );
             background-color: $color;
         }
     }
@@ -16,8 +16,8 @@
     @each $name, $color in $kendo-fab-theme-colors {
         .k-hover.k-fab-solid-#{$name},
         .k-fab-solid-#{$name}:hover {
-            border-color: try-shade( $color, .5 );
-            background-color: try-shade( $color, .5 );
+            border-color: k-try-shade( $color, .5 );
+            background-color: k-try-shade( $color, .5 );
         }
     }
 
@@ -25,9 +25,13 @@
     @each $name, $color in $kendo-fab-theme-colors {
         .k-fab-solid-#{$name}.k-focus,
         .k-fab-solid-#{$name}:focus {
-            outline-style: solid;
-            outline-width: 2px;
-            outline-color: rgba( $color, .3 );
+            @if $kendo-enable-focus-contrast {
+                @include box-shadow( inset 0 0 0 2px currentColor );
+            } @else {
+                outline-style: solid;
+                outline-width: 2px;
+                outline-color: rgba( $color, .3 );
+            }
         }
     }
 
@@ -37,8 +41,8 @@
         .k-selected.k-fab-solid-#{$name},
         .k-fab-solid-#{$name}:active {
             @include box-shadow($kendo-fab-active-shadow);
-            border-color: try-shade( $color, 1.5);
-            background-color: try-shade( $color, 1.5);
+            border-color: k-try-shade( $color, 1.5);
+            background-color: k-try-shade( $color, 1.5);
         }
     }
 
@@ -47,8 +51,8 @@
         .k-disabled.k-fab-solid-#{$name},
         .k-fab-solid-#{$name}:disabled {
             @include box-shadow($kendo-fab-disabled-shadow);
-            background-color: try-tint( $color, 5 );
-            color: try-tint( contrast-wcag( $color ), 5 );
+            background-color: k-try-tint( $color, 5 );
+            color: k-try-tint( k-contrast-legacy( $color ), 5 );
             opacity: 1;
         }
     }
@@ -77,8 +81,8 @@
     // Hover state
     .k-fab-item.k-hover .k-fab-item-icon,
     .k-fab-item:hover .k-fab-item-icon {
-        border-color: try-shade( $kendo-fab-item-icon-border, .5 );
-        background-color: try-shade( $kendo-fab-item-icon-bg, .5 );
+        border-color: k-try-shade( $kendo-fab-item-icon-border, .5 );
+        background-color: k-try-shade( $kendo-fab-item-icon-bg, .5 );
     }
 
     // Focus state
@@ -86,17 +90,21 @@
     .k-fab-item:focus .k-fab-item-icon,
     .k-fab-item.k-focus .k-fab-item-text,
     .k-fab-item.k-focus .k-fab-item-icon {
-        outline-style: solid;
-        outline-width: 2px;
-        outline-color: rgba(0, 0, 0, .08);
+        @if $kendo-enable-focus-contrast {
+            @include box-shadow( inset 0 0 0 2px if( $dark-theme, $kendo-color-white, $kendo-color-black ) );
+        } @else {
+            outline-style: solid;
+            outline-width: 2px;
+            outline-color: rgba(0, 0, 0, .08);
+        }
     }
 
     // Active state
     .k-fab-item.k-active .k-fab-item-icon,
     .k-fab-item:active .k-fab-item-icon {
         @include box-shadow($kendo-fab-item-active-shadow);
-        border-color: try-shade( $kendo-fab-item-icon-border, 1);
-        background-color: try-shade( $kendo-fab-item-icon-bg, 1);
+        border-color: k-try-shade( $kendo-fab-item-icon-border, 1);
+        background-color: k-try-shade( $kendo-fab-item-icon-bg, 1);
     }
 
     // Disabled state
@@ -107,8 +115,8 @@
         .k-fab-item-text,
         .k-fab-item-icon {
             @include box-shadow($kendo-fab-item-disabled-shadow);
-            background-color: try-tint( $kendo-fab-item-bg, 5 );
-            color: try-tint( $kendo-fab-item-text, 5 );
+            background-color: k-try-tint( $kendo-fab-item-bg, 5 );
+            color: k-try-tint( $kendo-fab-item-text, 5 );
         }
     }
 

package/scss/fab/_variables.scss

@@ -19,15 +19,15 @@ $kendo-fab-line-height: $line-height !default;
 
 /// Horizontal padding of the FAB.
 /// @group floating-action-button
-$kendo-fab-padding-x: map-get( $spacing, 4 ) !default;
-$kendo-fab-padding-x-sm: ( $kendo-fab-padding-x / 2 ) !default;
+$kendo-fab-padding-x: k-map-get( $kendo-spacing, 4 ) !default;
+$kendo-fab-padding-x-sm: k-math-div( $kendo-fab-padding-x, 2 ) !default;
 $kendo-fab-padding-x-md: $kendo-fab-padding-x !default;
 $kendo-fab-padding-x-lg: ( $kendo-fab-padding-x * 1.5 ) !default;
 
 /// Vertical padding of the FAB.
 /// @group floating-action-button
 $kendo-fab-padding-y: $kendo-fab-padding-x !default;
-$kendo-fab-padding-y-sm: ( $kendo-fab-padding-y / 2 ) !default;
+$kendo-fab-padding-y-sm: k-math-div( $kendo-fab-padding-y, 2 ) !default;
 $kendo-fab-padding-y-md: $kendo-fab-padding-y !default;
 $kendo-fab-padding-y-lg: ( $kendo-fab-padding-y * 1.5 ) !default;
 
@@ -39,18 +39,18 @@ $kendo-fab-icon-width: 20px !default;
 $kendo-fab-icon-height: $kendo-fab-icon-width !default;
 /// FAB icon spacing.
 /// @group floating-action-button
-$kendo-fab-icon-spacing: map-get( $spacing, 1 ) / 2 !default;
+$kendo-fab-icon-spacing: k-map-get( $kendo-spacing, 0.5 ) !default; // sass-lint:disable-line leading-zero
 
 /// FAB items horizontal padding.
 /// @group floating-action-button
 $kendo-fab-items-padding-x: 0px !default;
 /// FAB items vertical padding.
 /// @group floating-action-button
-$kendo-fab-items-padding-y: map-get( $spacing, 4 ) !default;
+$kendo-fab-items-padding-y: k-map-get( $kendo-spacing, 4 ) !default;
 
 /// FAB item text horizontal padding.
 /// @group floating-action-button
-$kendo-fab-item-text-padding-x: map-get( $spacing, 1 ) !default;
+$kendo-fab-item-text-padding-x: k-map-get( $kendo-spacing, 1 ) !default;
 /// FAB item text vertical padding.
 /// @group floating-action-button
 $kendo-fab-item-text-padding-y: $kendo-fab-item-text-padding-x !default;
@@ -69,7 +69,7 @@ $kendo-fab-item-text-line-height: 1.2 !default;
 
 /// FAB item icon horizontal padding.
 /// @group floating-action-button
-$kendo-fab-item-icon-padding-x: map-get( $spacing, 2 ) !default;
+$kendo-fab-item-icon-padding-x: k-map-get( $kendo-spacing, 2 ) !default;
 /// FAB item icon vertical padding.
 /// @group floating-action-button
 $kendo-fab-item-icon-padding-y: $kendo-fab-item-icon-padding-x !default;
@@ -95,20 +95,20 @@ $kendo-fab-theme-colors: $kendo-theme-colors !default;
 $kendo-fab-shadow: 0 6px 10px rgba(0, 0, 0, .14), 0 1px 18px rgba(0, 0, 0, .12), 0 3px 5px rgba(0, 0, 0, .2) !default;
 /// The disabled shadow of the FAB.
 /// @group floating-action-button
-$kendo-fab-disabled-shadow: 0 6px 10px try-tint( rgba(0, 0, 0, .14), .5 ), 0 1px 18px try-tint( rgba(0, 0, 0, .12), .5 ), 0 3px 5px try-tint( rgba(0, 0, 0, .2), .5 ) !default;
+$kendo-fab-disabled-shadow: 0 6px 10px k-try-tint( rgba(0, 0, 0, .14), .5 ), 0 1px 18px k-try-tint( rgba(0, 0, 0, .12), .5 ), 0 3px 5px k-try-tint( rgba(0, 0, 0, .2), .5 ) !default;
 /// The active shadow of the FAB.
 /// @group floating-action-button
 $kendo-fab-active-shadow: null !default;
 
 /// The base text color of the FAB item.
 /// @group floating-action-button
-$kendo-fab-item-text: $component-text !default;
+$kendo-fab-item-text: $kendo-component-text !default;
 /// The base background color of the FAB item.
 /// @group floating-action-button
-$kendo-fab-item-bg: $component-bg !default;
+$kendo-fab-item-bg: $kendo-component-bg !default;
 /// The base border color of the FAB item.
 /// @group floating-action-button
-$kendo-fab-item-border: $component-border !default;
+$kendo-fab-item-border: $kendo-component-border !default;
 
 /// The base text color of the FAB item icon.
 /// @group floating-action-button

package/scss/filemanager/_index.scss

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

package/scss/filemanager/_layout.scss

@@ -105,7 +105,7 @@
 
         // File name
         .k-file-name {
-            margin-top: ($filemanager-spacer / 2);
+            margin-top: k-math-div( $filemanager-spacer, 2 );
             display: block;
             text-align: center;
             overflow: hidden;
@@ -127,7 +127,7 @@
 
         // File preview
         .k-file-preview {
-            margin-right: $icon-spacing;
+            margin-right: $kendo-icon-spacing;
             display: inline-flex;
             flex-direction: row;
             vertical-align: middle;
@@ -233,7 +233,7 @@
         align-items: center;
     }
     .k-filemanager-drag-hint .k-icon {
-        margin-right: $icon-spacing;
+        margin-right: $kendo-icon-spacing;
     }
 
 }

package/scss/filemanager/_variables.scss

@@ -1,12 +1,12 @@
 // File manager
-$filemanager-spacer: map-get( $spacing, 4 ) !default;
+$filemanager-spacer: k-map-get( $kendo-spacing, 4 ) !default;
 $filemanager-border-width: 1px !default;
 $filemanager-font-family: $font-family !default;
 $filemanager-font-size: $font-size !default;
 $filemanager-line-height: $line-height !default;
-$filemanager-bg: $component-bg !default;
-$filemanager-text: $component-text !default;
-$filemanager-border: $component-border !default;
+$filemanager-bg: $kendo-component-bg !default;
+$filemanager-text: $kendo-component-text !default;
+$filemanager-border: $kendo-component-border !default;
 
 $filemanager-toolbar-border-width: $filemanager-border-width !default;
 $filemanager-toolbar-bg: null !default;
@@ -22,10 +22,10 @@ $filemanager-navigation-bg: null !default;
 $filemanager-navigation-text: null !default;
 $filemanager-navigation-border: null !default;
 
-$filemanager-breadcrumb-padding-x: map-get( $spacing, 2 ) !default;
-$filemanager-breadcrumb-padding-y: map-get( $spacing, 2 ) !default;
+$filemanager-breadcrumb-padding-x: k-map-get( $kendo-spacing, 2 ) !default;
+$filemanager-breadcrumb-padding-y: k-map-get( $kendo-spacing, 2 ) !default;
 $filemanager-breadcrumb-border-width: $filemanager-border-width !default;
-$filemanager-breadcrumb-bg: $toolbar-bg !default;
+$filemanager-breadcrumb-bg: $kendo-toolbar-bg !default;
 $filemanager-breadcrumb-text: null !default;
 $filemanager-breadcrumb-border: null !default;
 
@@ -33,17 +33,17 @@ $filemanager-listview-bg: null !default;
 $filemanager-listview-text: null !default;
 $filemanager-listview-border: null !default;
 
-$filemanager-listview-item-padding-x: map-get( $spacing, 4 ) !default;
-$filemanager-listview-item-padding-y: map-get( $spacing, 4 ) !default;
+$filemanager-listview-item-padding-x: k-map-get( $kendo-spacing, 4 ) !default;
+$filemanager-listview-item-padding-y: k-map-get( $kendo-spacing, 4 ) !default;
 $filemanager-listview-item-width: 120px !default;
 $filemanager-listview-item-height: 120px !default;
 $filemanager-listview-item-bg: null !default;
 $filemanager-listview-item-text: null !default;
 $filemanager-listview-item-border: null !default;
 
-$filemanager-listview-item-icon-size: ($icon-size * 3) !default;
+$filemanager-listview-item-icon-size: ($kendo-icon-size * 3) !default;
 $filemanager-listview-item-icon-bg: null !default;
-$filemanager-listview-item-icon-text: try-tint($filemanager-text, 4) !default;
+$filemanager-listview-item-icon-text: k-try-tint($filemanager-text, 4) !default;
 $filemanager-listview-item-icon-border: null !default;
 $filemanager-listview-item-icon-selected-bg: null !default;
 $filemanager-listview-item-icon-selected-text: inherit !default;
@@ -58,12 +58,12 @@ $filemanager-preview-padding-y: $filemanager-spacer !default;
 $filemanager-preview-width: 20% !default;
 $filemanager-preview-border-width: $filemanager-border-width !default;
 $filemanager-preview-spacing: $filemanager-spacer !default;
-$filemanager-preview-column-gap: map-get( $spacing, 1 ) !default;
+$filemanager-preview-column-gap: k-map-get( $kendo-spacing, 1 ) !default;
 $filemanager-preview-bg: null !default;
 $filemanager-preview-text: null !default;
 $filemanager-preview-border: null !default;
 
-$filemanager-preview-icon-size: ($icon-size * 6) !default;
+$filemanager-preview-icon-size: ($kendo-icon-size * 6) !default;
 $filemanager-preview-icon-bg: null !default;
-$filemanager-preview-icon-text: try-tint($filemanager-text, 4) !default;
+$filemanager-preview-icon-text: k-try-tint($filemanager-text, 4) !default;
 $filemanager-preview-icon-border: null !default;

package/scss/filter/_index.scss

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

package/scss/filter/_theme.scss

@@ -1,7 +1,7 @@
 @include exports("filter/theme") {
 
     .k-filter {
-        color: $component-text;
+        color: $kendo-component-text;
 
         .k-filter-preview-field {
             color: $filter-preview-field-text;
@@ -16,13 +16,13 @@
         .k-filter-toolbar::before,
         .k-filter-lines .k-filter-item:last-child > .k-filter-toolbar::after,
         .k-filter-lines .k-filter-item:last-child > * > .k-filter-toolbar::after {
-            background-color: $component-border;
+            background-color: $kendo-component-border;
         }
 
         // Focus
         .k-toolbar:focus,
         .k-toolbar.k-focus {
-            @include box-shadow( $filter-toolbar-focus-shadow );
+            @include focus-indicator( $filter-toolbar-focus-shadow );
         }
     }
 

package/scss/filter/_variables.scss

@@ -1,13 +1,13 @@
 // Filter expression builder
-$filter-padding-x: $padding-x !default;
-$filter-padding-y: $padding-y !default;
+$filter-padding-x: $kendo-padding-md-x !default;
+$filter-padding-y: $kendo-padding-md-y !default;
 
 $filter-bottom-margin: 30px !default;
 $filter-line-size: 1px !default;
 
 $filter-operator-dropdown-width: 15em !default;
 
-$filter-preview-field-text: $primary !default;
-$filter-preview-operator-text: $subtle-text !default;
+$filter-preview-field-text: $kendo-color-primary !default;
+$filter-preview-operator-text: $kendo-subtle-text !default;
 
 $filter-toolbar-focus-shadow: 0 0 0 2px rgba(0, 0, 0, .08) !default;

package/scss/floating-label/_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/forms/_index.scss

@@ -3,15 +3,11 @@
 
 // Dependencies // TODO: extract variables
 @import "../common/_index.scss";
-@import "../tooltip/_variables.scss";
-@import "../button/_variables.scss";
-@import "../input/_variables.scss";
 @import "../toolbar/_index.scss";
 @import "../action-buttons/_index.scss";
-@import "../window/_variables.scss";
 
 
 // Component
-@import "_variables.scss";
-@import "_layout.scss";
-@import "_theme.scss";
+@import "./_variables.scss";
+@import "./_layout.scss";
+@import "./_theme.scss";