@progress/kendo-theme-default 6.8.0-dev.2 → 7.0.0

package/lib/swatches/default-blue.json

@@ -3,7 +3,7 @@
     "name": "Default Blue",
     "product": "kendo",
     "base": "@progress/kendo-theme-default",
-    "version": "6.8.0-dev.2",
+    "version": "7.0.0",
     "previewColors": [
         "#ffffff",
         "#f5f5f5",

package/lib/swatches/default-dataviz-v4.json

@@ -3,7 +3,7 @@
     "name": "Default Dataviz v4",
     "product": "kendo",
     "base": "@progress/kendo-theme-default",
-    "version": "6.8.0-dev.2",
+    "version": "7.0.0",
     "api": "legacy",
     "previewColors": [
         "#ff6358",

package/lib/swatches/default-green.json

@@ -3,7 +3,7 @@
     "name": "Default Green",
     "product": "kendo",
     "base": "@progress/kendo-theme-default",
-    "version": "6.8.0-dev.2",
+    "version": "7.0.0",
     "api": "legacy",
     "previewColors": [
         "#ffffff",

package/lib/swatches/default-main-dark.json

@@ -3,7 +3,7 @@
     "name": "Default Main Dark",
     "product": "kendo",
     "base": "@progress/kendo-theme-default",
-    "version": "6.8.0-dev.2",
+    "version": "7.0.0",
     "api": "legacy",
     "previewColors": [
         "#000000",

package/lib/swatches/default-main.json

@@ -3,7 +3,7 @@
     "name": "Default Main",
     "product": "kendo",
     "base": "@progress/kendo-theme-default",
-    "version": "6.8.0-dev.2",
+    "version": "7.0.0",
     "api": "legacy",
     "previewColors": [
         "#ffffff",

package/lib/swatches/default-nordic.json

@@ -3,7 +3,7 @@
     "name": "Default Nordic",
     "product": "kendo",
     "base": "@progress/kendo-theme-default",
-    "version": "6.8.0-dev.2",
+    "version": "7.0.0",
     "api": "legacy",
     "previewColors": [
         "#ffffff",

package/lib/swatches/default-ocean-blue-a11y.json

@@ -3,7 +3,7 @@
     "name": "Default Ocean Blue A11Y",
     "product": "kendo",
     "base": "@progress/kendo-theme-default",
-    "version": "6.8.0-dev.2",
+    "version": "7.0.0",
     "api": "legacy",
     "previewColors": [
         "#ffffff",

package/lib/swatches/default-ocean-blue.json

@@ -3,7 +3,7 @@
     "name": "Default Ocean Blue",
     "product": "kendo",
     "base": "@progress/kendo-theme-default",
-    "version": "6.8.0-dev.2",
+    "version": "7.0.0",
     "api": "legacy",
     "previewColors": [
         "#ffffff",

package/lib/swatches/default-orange.json

@@ -3,7 +3,7 @@
     "name": "Default Orange",
     "product": "kendo",
     "base": "@progress/kendo-theme-default",
-    "version": "6.8.0-dev.2",
+    "version": "7.0.0",
     "api": "legacy",
     "previewColors": [
         "#ffffff",

package/lib/swatches/default-purple.json

@@ -3,7 +3,7 @@
     "name": "Default Purple",
     "product": "kendo",
     "base": "@progress/kendo-theme-default",
-    "version": "6.8.0-dev.2",
+    "version": "7.0.0",
     "api": "legacy",
     "previewColors": [
         "#ffffff",

package/lib/swatches/default-turquoise.json

@@ -3,7 +3,7 @@
     "name": "Default Turquoise",
     "product": "kendo",
     "base": "@progress/kendo-theme-default",
-    "version": "6.8.0-dev.2",
+    "version": "7.0.0",
     "api": "legacy",
     "previewColors": [
         "#ffffff",

package/lib/swatches/default-urban.json

@@ -3,7 +3,7 @@
     "name": "Default Urban",
     "product": "kendo",
     "base": "@progress/kendo-theme-default",
-    "version": "6.8.0-dev.2",
+    "version": "7.0.0",
     "api": "legacy",
     "previewColors": [
         "#ffffff",

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@progress/kendo-theme-default",
   "description": "SASS resources for the default Kendo UI theme",
-  "version": "6.8.0-dev.2",
+  "version": "7.0.0",
   "author": "Progress",
   "license": "Apache-2.0",
   "keywords": [
@@ -49,9 +49,9 @@
     "postpublish": "echo 'no postpublish for default theme'"
   },
   "dependencies": {
-    "@progress/kendo-font-icons": "1.9.0",
-    "@progress/kendo-theme-core": "6.8.0-dev.2",
-    "@progress/kendo-theme-utils": "6.8.0-dev.2"
+    "@progress/kendo-svg-icons": "2.0.0",
+    "@progress/kendo-theme-core": "7.0.0",
+    "@progress/kendo-theme-utils": "7.0.0"
   },
-  "gitHead": "1d0254882897f857ca96fd31477a6e2c18d18433"
+  "gitHead": "61d73126ecd6c97602f73d0adf12a12bdafe4d0a"
 }

package/scss/_variables.scss

@@ -449,4 +449,4 @@ $kendo-invalid-shadow: null !default;
 
 // Loading
 $kendo-loading-opacity: .3 !default;
-$kendo-zindex-loading: 100 !default;
+$kendo-zindex-loading: 100 !default;

package/scss/action-sheet/_variables.scss

@@ -17,7 +17,7 @@ $kendo-actionsheet-line-height: $kendo-line-height-md !default;
 $kendo-actionsheet-bg: $kendo-component-bg !default;
 $kendo-actionsheet-text: $kendo-component-text !default;
 $kendo-actionsheet-border: $kendo-component-border !default;
-$kendo-actionsheet-shadow: 0 8px 10px -5px rgba(0, 0, 0, .2), 0 16px 24px 2px rgba(0, 0, 0, .14), 0 6px 30px 5px rgba(0, 0, 0, .12) !default;
+$kendo-actionsheet-shadow: k-elevation(7) !default;
 
 
 // Actionsheet header

package/scss/appbar/_variables.scss

@@ -48,7 +48,7 @@ $kendo-appbar-dark-text: k-contrast-legacy( $kendo-color-dark ) !default;
 
 /// The box shadow of the AppBar.
 /// @group appbar
-$kendo-appbar-box-shadow: 0px 1px 1px rgba(0, 0, 0, .16) !default;
+$kendo-appbar-box-shadow: k-elevation(4) !default;
 /// The box shadow of the AppBar with bottom position.
 /// @group appbar
-$kendo-appbar-bottom-box-shadow: 0px -1px 1px rgba(0, 0, 0, .16) !default;
+$kendo-appbar-bottom-box-shadow: $kendo-appbar-box-shadow !default;

package/scss/bottom-navigation/_layout.scss

@@ -33,6 +33,7 @@
         border-width: $kendo-bottom-nav-border-width;
     }
 
+    // TODO: do we even use this?
     .k-bottom-nav-shadow {
         box-shadow: $kendo-bottom-nav-shadow;
     }

package/scss/bottom-navigation/_variables.scss

@@ -49,7 +49,7 @@ $kendo-bottom-nav-item-gap: 0 k-map-get( $kendo-spacing, 1 ) !default;
 
 /// The box shadow of the BottomNavigation.
 /// @group bottom-navigation
-$kendo-bottom-nav-shadow: 0px 0px 5px rgba(0, 0, 0, .12) !default;
+$kendo-bottom-nav-shadow: k-elevation(4) !default;
 
 /// The text color of the flat BottomNavigation.
 /// @group bottom-navigation
@@ -59,4 +59,4 @@ $kendo-bottom-nav-flat-text: $kendo-component-text !default;
 $kendo-bottom-nav-flat-bg: $kendo-component-bg !default;
 /// The border color of the flat BottomNavigation.
 /// @group bottom-navigation
-$kendo-bottom-nav-flat-border: $kendo-component-border !default;
+$kendo-bottom-nav-flat-border: $kendo-component-border !default;

package/scss/breadcrumb/_layout.scss

@@ -76,8 +76,7 @@
     }
 
     .k-breadcrumb-link > .k-image,
-    .k-breadcrumb-icontext-link .k-icon,
-    .k-breadcrumb-icontext-link .k-svg-icon {
+    .k-breadcrumb-icontext-link .k-icon {
         margin-inline-end: $kendo-breadcrumb-link-icon-spacing;
     }
 

package/scss/calendar/_theme.scss

@@ -8,6 +8,7 @@
         );
 
 
+        // TODO: do we even use this?
         // Header / footer
         .k-header {
             @include fill(

package/scss/calendar/_variables.scss

@@ -19,6 +19,7 @@ $kendo-calendar-header-bg: $kendo-component-header-bg !default;
 $kendo-calendar-header-text: $kendo-component-header-text !default;
 $kendo-calendar-header-border: $kendo-component-header-border !default;
 $kendo-calendar-header-gradient: $kendo-component-header-gradient !default;
+// TODO: variable is used, but the selector using it is not! Potentially remove;
 $kendo-calendar-header-shadow: 0 1px 3px 1px rgba(black, .1) !default;
 
 $kendo-calendar-nav-gap: null !default;

package/scss/card/_variables.scss

@@ -20,7 +20,8 @@ $kendo-card-shadow: null !default;
 $kendo-card-focus-bg: null !default;
 $kendo-card-focus-text: null !default;
 $kendo-card-focus-border: rgba( black, .15 ) !default;
-$kendo-card-focus-shadow: 0 3px 4px 0 rgba( black, .06 ) !default;
+// TODO: double-check: the default theme is not supposed to elevate the card on focus
+$kendo-card-focus-shadow: null !default;
 
 $kendo-card-header-padding-x: $kendo-card-padding-x !default;
 $kendo-card-header-padding-y: $kendo-card-padding-y !default;

package/scss/chat/_variables.scss

@@ -52,16 +52,16 @@ $kendo-chat-border: $kendo-app-border !default;
 $kendo-chat-bubble-bg: $kendo-component-bg !default;
 $kendo-chat-bubble-text: $kendo-component-text !default;
 $kendo-chat-bubble-border: $kendo-chat-bubble-bg !default;
-$kendo-chat-bubble-shadow: 0 1px 2px rgba( $kendo-color-black, .08) !default;
-$kendo-chat-bubble-hover-shadow: 0 1px 2px rgba( $kendo-color-black, .16) !default;
-$kendo-chat-bubble-selected-shadow: 0 3px 10px rgba( $kendo-color-black, .16) !default;
+$kendo-chat-bubble-shadow: k-elevation(1) !default;
+$kendo-chat-bubble-hover-shadow: k-elevation(2) !default;
+$kendo-chat-bubble-selected-shadow: k-elevation(3) !default;
 
 $kendo-chat-alt-bubble-bg: $kendo-color-primary !default;
 $kendo-chat-alt-bubble-text: k-contrast-legacy( $kendo-chat-alt-bubble-bg ) !default;
 $kendo-chat-alt-bubble-border: $kendo-chat-alt-bubble-bg !default;
-$kendo-chat-alt-bubble-shadow: 0 1px 2px rgba( $kendo-chat-alt-bubble-bg, .2 ) !default;
-$kendo-chat-alt-bubble-hover-shadow: 0 1px 2px rgba( $kendo-chat-alt-bubble-bg, .2 ) !default;
-$kendo-chat-alt-bubble-selected-shadow: 0 3px 10px rgba( $kendo-chat-alt-bubble-bg, .4 ) !default;
+$kendo-chat-alt-bubble-shadow: k-elevation(1) !default;
+$kendo-chat-alt-bubble-hover-shadow: k-elevation(2) !default;
+$kendo-chat-alt-bubble-selected-shadow: k-elevation(3) !default;
 
 $kendo-chat-quick-reply-bg: transparent !default;
 $kendo-chat-quick-reply-text: $kendo-color-primary !default;

package/scss/coloreditor/_variables.scss

@@ -35,9 +35,10 @@ $kendo-color-editor-border: $kendo-component-border !default;
 /// The border color of the focused ColorEditor.
 /// @group coloreditor
 $kendo-color-editor-focus-border: null !default;
+// TODO: does this ever get focused? Isn't it always in a popup?
 /// The box shadow of the focused ColorEditor.
 /// @group coloreditor
-$kendo-color-editor-focus-shadow: 1px 1px 7px 1px rgba(0, 0, 0, .3) !default;
+$kendo-color-editor-focus-shadow: null  !default; // 1px 1px 7px 1px rgba(0, 0, 0, .3)
 
 /// The vertical padding of the ColorEditor header.
 /// @group coloreditor
@@ -77,4 +78,4 @@ $kendo-color-editor-color-gradient-focus-outline-color: rgba(0, 0, 0, .3) !defau
 $kendo-color-editor-color-gradient-focus-outline: 2px !default;
 /// The outline offset of the focused ColorGradient.
 /// @group coloreditor
-$kendo-color-editor-color-gradient-focus-outline-offset: 4px !default;
+$kendo-color-editor-color-gradient-focus-outline-offset: 4px !default;

package/scss/colorgradient/_layout.scss

@@ -67,6 +67,8 @@
         height: $kendo-color-gradient-draghandle-height;
         border-width: $kendo-color-gradient-draghandle-border-width;
         border-style: solid;
+        outline-width: $kendo-color-gradient-draghandle-outline-width;
+        outline-style: solid;
         box-sizing: border-box;
     }
 
@@ -165,14 +167,12 @@
             align-items: center;
             gap: k-math-div( $kendo-color-gradient-contrast-spacer, 2 );
 
-            .k-icon,
-            .k-svg-icon {
+            .k-icon {
                 vertical-align: middle;
             }
 
             // Needed for the double check icons
             .k-icon + .k-icon,
-            .k-svg-icon + .k-svg-icon,
             .k-icon-wrapper-host + .k-icon-wrapper-host .k-icon {
                 margin-inline-start: -13px;
             }

package/scss/colorgradient/_theme.scss

@@ -27,12 +27,14 @@
             $kendo-color-gradient-draghandle-bg,
             $kendo-color-gradient-draghandle-border
         );
+        outline-color: $kendo-color-gradient-draghandle-focus-shadow;
         @include box-shadow( $kendo-color-gradient-draghandle-shadow );
 
         &:focus,
         &.k-focus {
             @include fill( $bg: transparent, $border: $kendo-color-white );
-            @include focus-indicator( $kendo-color-gradient-draghandle-focus-shadow );
+            outline-color: $kendo-color-gradient-draghandle-focus-shadow;
+            @include focus-indicator( $kendo-color-gradient-draghandle-shadow );
         }
 
         &:hover,
@@ -40,7 +42,7 @@
         &.k-active,
         &:active {
             @include fill( $bg: transparent, $border: $kendo-color-white );
-            @include box-shadow( $kendo-color-gradient-draghandle-hover-shadow );
+            outline-color: $kendo-color-gradient-draghandle-hover-shadow;
         }
     }
 

package/scss/colorgradient/_variables.scss

@@ -48,7 +48,7 @@ $kendo-color-gradient-border: $kendo-component-border !default;
 $kendo-color-gradient-focus-border: null !default;
 /// The box shadow of the focused ColorGradient.
 /// @group cologradient
-$kendo-color-gradient-focus-shadow: 1px 1px 7px 1px rgba(0, 0, 0, .3) !default;
+$kendo-color-gradient-focus-shadow: k-elevation(3) !default;
 
 /// The border radius of the ColorGradient canvas.
 /// @group cologradient
@@ -86,6 +86,9 @@ $kendo-color-gradient-draghandle-height: 14px !default;
 /// The width of the border around the ColorGradient canvas drag handle.
 /// @group cologradient
 $kendo-color-gradient-draghandle-border-width: 1px !default;
+/// The width of the outline around the ColorGradient canvas drag handle.
+/// @group cologradient
+$kendo-color-gradient-draghandle-outline-width: 1px !default;
 /// The border radius of the ColorGradient canvas drag handle.
 /// @group cologradient
 $kendo-color-gradient-draghandle-border-radius: 50% !default;
@@ -98,15 +101,18 @@ $kendo-color-gradient-draghandle-bg: transparent !default;
 /// The color of the border around the ColorGradient canvas drag handle.
 /// @group cologradient
 $kendo-color-gradient-draghandle-border: rgba( $kendo-color-white, .8) !default;
-/// The box shadow of the ColorGradient canvas drag handle.
+/// The color of the outline around the ColorGradient canvas drag handle.
 /// @group cologradient
-$kendo-color-gradient-draghandle-shadow: 0 1px 4px rgba(0, 0, 0, .5) !default;
-/// The box shadow of the focused ColorGradient canvas drag handle.
+$kendo-color-gradient-draghandle-shadow: rgba( $kendo-color-black, .5 ) !default;
+/// The focus color of the outline around the ColorGradient canvas drag handle.
 /// @group cologradient
-$kendo-color-gradient-draghandle-focus-shadow: 0 1px 4px black !default;
-/// The box shadow of the hovered ColorGradient canvas drag handle.
+$kendo-color-gradient-draghandle-focus-shadow: $kendo-color-black !default;
+/// The hover color of the outline around the ColorGradient canvas drag handle.
+/// @group cologradient
+$kendo-color-gradient-draghandle-hover-shadow: $kendo-color-black !default;
+/// The box shadow of the ColorGradient canvas drag handle.
 /// @group cologradient
-$kendo-color-gradient-draghandle-hover-shadow: $kendo-color-gradient-draghandle-focus-shadow !default;
+$kendo-color-gradient-draghandle-shadow: k-elevation(2) !default;
 
 /// The vertical margin of the ColorGradient canvas drag handle.
 /// @group cologradient
@@ -133,4 +139,4 @@ $kendo-color-gradient-input-label-text: $kendo-subtle-text !default;
 $kendo-color-gradient-contrast-ratio-font-weight: $kendo-font-weight-bold !default;
 /// The spacing between the items in the ColorGradient contrast tool.
 /// @group cologradient
-$kendo-color-gradient-contrast-spacer: k-math-div( $kendo-color-gradient-spacer, 1.5 ) !default;
+$kendo-color-gradient-contrast-spacer: k-math-div( $kendo-color-gradient-spacer, 1.5 ) !default;

package/scss/common/_index.scss

@@ -1,4 +1,5 @@
 @import "./_base.scss";
 @import "./_animations.scss";
+@import "./_indicators.scss";
 @import "./_resizing.scss";
 @import "./_scrollbar.scss";

package/scss/common/_indicators.scss

@@ -0,0 +1,39 @@
+@include exports( "common/indicators/current-time" ) {
+
+    $kendo-current-time-width: 1px !default;
+    $kendo-current-time-color: #ff0000 !default;
+
+    // Layout
+    .k-current-time {
+        width: $kendo-current-time-width;
+        position: absolute;
+
+        &.k-current-time-arrow-left,
+        &.k-current-time-arrow-right,
+        &.k-current-time-arrow-down {
+            width: 0;
+            height: 0;
+            background: transparent;
+            border: 4px solid transparent;
+        }
+    }
+
+
+    // Theme
+    .k-current-time {
+        background: $kendo-current-time-color;
+
+        &.k-current-time-arrow-left {
+            border-right-color: $kendo-current-time-color;
+        }
+
+        &.k-current-time-arrow-right {
+            border-left-color: $kendo-current-time-color;
+        }
+
+        &.k-current-time-arrow-down {
+            border-top-color: $kendo-current-time-color;
+        }
+    }
+
+}

package/scss/core/_index.scss

@@ -8,4 +8,7 @@ $wcag-min-contrast-ratio: 4.5 !default;
 // Expose
 @include exports("kendo-core-styles") {
     @include kendo-core--styles();
+
+    // Elevation System
+    @include kendo-elevation--styles();
 }

package/scss/drawer/_layout.scss

@@ -153,7 +153,6 @@
             gap: $kendo-drawer-item-padding-x;
         }
 
-        .k-svg-icon,
         .k-icon {
             flex-shrink: 0;
             padding-inline: $kendo-drawer-icon-padding-x;

package/scss/editor/_layout.scss

@@ -139,13 +139,11 @@
         flex-shrink: 0;
 
         .k-editor-export {
-            .k-icon,
-            .k-svg-icon {
+            .k-icon {
                 margin-right: $kendo-editor-export-tool-icon-margin-x;
             }
 
             .k-icon,
-            .k-svg-icon,
             .k-export-tool-text {
                 vertical-align: middle;
             }
@@ -384,8 +382,7 @@
                 flex: 1;
                 width: 100px; // fix width for Edge
             }
-            .k-icon,
-            .k-svg-icon {
+            .k-icon {
                 margin: 0;
                 position: static;
             }
@@ -483,8 +480,7 @@
             left: $kendo-input-padding-x;
             top: $kendo-input-padding-y;
 
-            .k-icon,
-            .k-svg-icon {
+            .k-icon {
                 position: static;
                 margin-top: 0;
             }

package/scss/fab/_variables.scss

@@ -115,10 +115,10 @@ $kendo-fab-sizes: (
 
 /// The base shadow of the FAB.
 /// @group floating-action-button
-$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;
+$kendo-fab-shadow: k-elevation(5) !default;
 /// The shadow of the disabled FAB.
 /// @group floating-action-button
-$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;
+$kendo-fab-disabled-shadow: k-elevation(5) !default;
 /// The shadow of the active FAB.
 /// @group floating-action-button
 $kendo-fab-active-shadow: null !default;

package/scss/grid/_layout.scss

@@ -187,8 +187,7 @@
                 }
             }
 
-            .k-cell-inner > .k-link > .k-sort-icon .k-icon,
-            .k-cell-inner > .k-link > .k-sort-icon .k-svg-icon {
+            .k-cell-inner > .k-link > .k-sort-icon .k-icon {
                 display: flex;
             }
 
@@ -278,8 +277,7 @@
             text-overflow: clip;
         }
 
-        .k-grouping-row .k-icon,
-        .k-grouping-row .k-svg-icon {
+        .k-grouping-row .k-icon {
             margin-inline-start: calc( #{k-math-div( $kendo-icon-size, 2 )} - #{$kendo-grid-cell-padding-x} );
             margin-inline-end: k-math-div( $kendo-icon-size, 2 );
             text-decoration: none;
@@ -301,7 +299,7 @@
             text-align: center;
             overflow: visible;
 
-            > .k-icon {
+            > .k-font-icon {
                 padding-block: $kendo-grid-cell-padding-y;
                 padding-inline: 0;
                 width: 100%;
@@ -972,8 +970,7 @@
                 }
             }
 
-            .k-grouping-row .k-icon,
-            .k-grouping-row .k-svg-icon {
+            .k-grouping-row .k-icon {
                 margin-inline-start: calc( #{k-math-div( $kendo-icon-size, 2 )} - #{$_cell-padding-x} );
             }
 
@@ -985,8 +982,7 @@
             .k-drag-cell {
                 padding: 0;
 
-                > .k-icon,
-                > .k-svg-icon {
+                > .k-icon {
                     padding-block: $_cell-padding-y;
                     padding-inline: 0;
                 }
@@ -1313,7 +1309,6 @@
         cursor: pointer;
 
         > .k-icon,
-        > .k-svg-icon,
         > .k-expander-indicator {
             margin-inline-end: $kendo-icon-spacing;
         }

package/scss/grid/_theme.scss

@@ -113,16 +113,14 @@
         .k-grid-filter,
         .k-header-column-menu,
         .k-grid-header-menu,
-        .k-hierarchy-cell .k-icon,
-        .k-hierarchy-cell .k-svg-icon {
+        .k-hierarchy-cell .k-icon {
             color: $kendo-grid-header-text;
         }
 
         .k-grouping-row {
             background-color: $kendo-grid-grouping-row-bg;
 
-            .k-icon,
-            .k-svg-icon {
+            .k-icon {
                 color: $kendo-grid-header-text;
             }
 
@@ -194,8 +192,7 @@
         .k-grid-filter,
         .k-header-column-menu,
         .k-grid-header-menu,
-        .k-hierarchy-cell .k-icon,
-        .k-hierarchy-cell .k-svg-icon {
+        .k-hierarchy-cell .k-icon {
             &:hover {
                 color: $kendo-button-hover-text;
                 background-color: $kendo-button-hover-bg;

package/scss/icons/_layout.scss

@@ -1,11 +1,11 @@
-$ki-embed-font: true;
+$ki-embed-font: false;
 $ki-icon-size: $kendo-icon-size;
 
-@import "@progress/kendo-font-icons/scss/index.scss";
+@import "@progress/kendo-svg-icons/scss/index.scss";
 
 @mixin kendo-icon--layout-base() {
 
-    @include kendo-icon-styles();
+    @include kendo-svg-icon-styles();
 
     // Icon wrap
     .k-icon-wrap {
@@ -45,7 +45,7 @@ $ki-icon-size: $kendo-icon-size;
         right: 0;
         margin: 0 -.5em -.5em 0;
     }
-    .k-svg-icon.k-icon-modifier {
+    .k-icon.k-icon-modifier {
         width: 1em;
         height: 1em;
     }

package/scss/index.scss

@@ -172,6 +172,8 @@
     @include kendo-core--styles();
 
     // Color system
+    @include color-system-styles();
+
 
     // Typography and utils
     @include kendo-typography--styles();