@progress/kendo-theme-classic 5.11.1-dev.1 → 5.11.1-dev.2

package/dist/all.css

@@ -6870,7 +6870,8 @@ kendo-sortable {
     display: none;
 }
 
-.k-widget .k-icon.k-i-expand, .k-widget .k-icon.k-i-collapse {
+.k-icon-action {
+    padding: 4px;
     cursor: pointer;
 }
 
@@ -14966,98 +14967,98 @@ textarea.k-input-inner {
 }
 
 .k-chip-solid-base {
-    border-color: #bebebe;
+    border-color: #cacaca;
     color: #272727;
-    background-color: #eeeeee;
+    background-color: #f0f0f0;
+    background-image: linear-gradient(rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0));
 }
 
 .k-chip-solid-base:focus, .k-chip-solid-base.k-focus {
-    box-shadow: 0 0 0 2px rgba(39, 39, 39, 0.16);
-    background-color: #eeeeee;
+    box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.16);
 }
 
 .k-chip-solid-base:hover, .k-chip-solid-base.k-hover {
-    background-color: gainsboro;
+    background-color: #dddddd;
 }
 
 .k-chip-solid-base.k-selected {
-    background-color: #cbcbcb;
+    background-color: #cacaca;
 }
 
 .k-chip-solid-error {
-    border-color: #f4bfb3;
-    color: #d92800;
-    background-color: #fceeeb;
+    border-color: #e35e40;
+    color: #4c0e00;
+    background-color: #f7d4cc;
+    background-image: linear-gradient(rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0));
 }
 
 .k-chip-solid-error:focus, .k-chip-solid-error.k-focus {
     box-shadow: 0 0 0 2px rgba(217, 40, 0, 0.16);
-    background-color: #fceeeb;
 }
 
 .k-chip-solid-error:hover, .k-chip-solid-error.k-hover {
-    background-color: #f9ddd6;
+    background-color: #f2b4a6;
 }
 
 .k-chip-solid-error.k-selected {
-    background-color: #f6cbc2;
+    background-color: #ec9480;
 }
 
 .k-chip-solid-info {
-    border-color: #bde0eb;
-    color: #2498bc;
-    background-color: #edf7fa;
+    border-color: #5bb2cd;
+    color: #0d3542;
+    background-color: #d3eaf2;
+    background-image: linear-gradient(rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0));
 }
 
 .k-chip-solid-info:focus, .k-chip-solid-info.k-focus {
     box-shadow: 0 0 0 2px rgba(36, 152, 188, 0.16);
-    background-color: #edf7fa;
 }
 
 .k-chip-solid-info:hover, .k-chip-solid-info.k-hover {
-    background-color: #dceff4;
+    background-color: #b2dbe8;
 }
 
 .k-chip-solid-info.k-selected {
-    background-color: #cae6ef;
+    background-color: #92ccde;
 }
 
 .k-chip-solid-warning {
-    border-color: #ffe0b3;
-    color: #ff9800;
-    background-color: #fff7eb;
+    border-color: #ffb240;
+    color: #593500;
+    background-color: #ffeacc;
+    background-image: linear-gradient(rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0));
 }
 
 .k-chip-solid-warning:focus, .k-chip-solid-warning.k-focus {
     box-shadow: 0 0 0 2px rgba(255, 152, 0, 0.16);
-    background-color: #fff7eb;
 }
 
 .k-chip-solid-warning:hover, .k-chip-solid-warning.k-hover {
-    background-color: #ffefd6;
+    background-color: #ffdba6;
 }
 
 .k-chip-solid-warning.k-selected {
-    background-color: #ffe6c2;
+    background-color: #ffcc80;
 }
 
 .k-chip-solid-success {
-    border-color: #c5e4ca;
-    color: #3ea44e;
-    background-color: #f0f8f1;
+    border-color: #6ebb7a;
+    color: #16391b;
+    background-color: #d8eddc;
+    background-image: linear-gradient(rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0));
 }
 
 .k-chip-solid-success:focus, .k-chip-solid-success.k-focus {
     box-shadow: 0 0 0 2px rgba(62, 164, 78, 0.16);
-    background-color: #f0f8f1;
 }
 
 .k-chip-solid-success:hover, .k-chip-solid-success.k-hover {
-    background-color: #e0f0e3;
+    background-color: #bbdfc1;
 }
 
 .k-chip-solid-success.k-selected {
-    background-color: #d1e9d5;
+    background-color: #9fd2a7;
 }
 
 .k-chip-outline-base {
@@ -15067,7 +15068,7 @@ textarea.k-input-inner {
 }
 
 .k-chip-outline-base:focus, .k-chip-outline-base.k-focus {
-    box-shadow: 0 0 0 2px rgba(39, 39, 39, 0.16);
+    box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.16);
 }
 
 .k-chip-outline-base:hover, .k-chip-outline-base.k-hover {
@@ -15081,8 +15082,8 @@ textarea.k-input-inner {
 }
 
 .k-chip-outline-error {
-    border-color: #d92800;
-    color: #d92800;
+    border-color: #a31e00;
+    color: #a31e00;
     background-color: #ffffff;
 }
 
@@ -15092,17 +15093,17 @@ textarea.k-input-inner {
 
 .k-chip-outline-error:hover, .k-chip-outline-error.k-hover {
     color: white;
-    background-color: #d92800;
+    background-color: #a31e00;
 }
 
 .k-chip-outline-error.k-selected {
     color: white;
-    background-color: #d92800;
+    background-color: #a31e00;
 }
 
 .k-chip-outline-info {
-    border-color: #2498bc;
-    color: #2498bc;
+    border-color: #1b728d;
+    color: #1b728d;
     background-color: #ffffff;
 }
 
@@ -15112,17 +15113,17 @@ textarea.k-input-inner {
 
 .k-chip-outline-info:hover, .k-chip-outline-info.k-hover {
     color: white;
-    background-color: #2498bc;
+    background-color: #1b728d;
 }
 
 .k-chip-outline-info.k-selected {
     color: white;
-    background-color: #2498bc;
+    background-color: #1b728d;
 }
 
 .k-chip-outline-warning {
     border-color: #ff9800;
-    color: #ff9800;
+    color: #272727;
     background-color: #ffffff;
 }
 
@@ -15131,18 +15132,18 @@ textarea.k-input-inner {
 }
 
 .k-chip-outline-warning:hover, .k-chip-outline-warning.k-hover {
-    color: white;
+    color: #331e00;
     background-color: #ff9800;
 }
 
 .k-chip-outline-warning.k-selected {
-    color: white;
+    color: #331e00;
     background-color: #ff9800;
 }
 
 .k-chip-outline-success {
-    border-color: #3ea44e;
-    color: #3ea44e;
+    border-color: #2f7b3b;
+    color: #2f7b3b;
     background-color: #ffffff;
 }
 
@@ -15152,12 +15153,12 @@ textarea.k-input-inner {
 
 .k-chip-outline-success:hover, .k-chip-outline-success.k-hover {
     color: white;
-    background-color: #3ea44e;
+    background-color: #2f7b3b;
 }
 
 .k-chip-outline-success.k-selected {
     color: white;
-    background-color: #3ea44e;
+    background-color: #2f7b3b;
 }
 
 .k-color-preview {
@@ -23271,6 +23272,7 @@ kendo-card-footer {
 .k-popover-inner {
     position: relative;
     border-radius: inherit;
+    height: inherit;
 }
 
 .k-popover-header {
@@ -33041,6 +33043,11 @@ kendo-scheduler.k-scheduler.k-readonly-scheduler .k-event-delete {
     vertical-align: top;
 }
 
+.k-scheduler-layout td.k-selected,
+.k-scheduler-layout .k-scheduler-cell.k-selected {
+    outline: none;
+}
+
 .k-scheduler-layout tr + tr .k-scheduler-times tr th,
 .k-scheduler-layout .k-scheduler-pane + .k-scheduler-pane .k-scheduler-times tr th {
     border-bottom-color: transparent;
@@ -33130,6 +33137,10 @@ kendo-scheduler.k-scheduler.k-readonly-scheduler .k-event-delete {
     overflow: auto;
 }
 
+.k-scheduler-content:focus {
+    outline: none;
+}
+
 kendo-scheduler .k-event,
 .k-event {
     border-radius: 4px;

package/dist/all.scss

@@ -1757,6 +1757,7 @@ $default-scrollbar-width: 17px !default;
 $icon-size: 16px !default;
 $icon-size-lg: 32px !default;
 $icon-spacing: k-map-get( $spacing, 1 ) !default;
+$icon-padding: k-map-get( $spacing, 1 ) !default;
 
 /// The URL to the icon font that will be used by the theme
 /// The default value of `null` embeds the package font with a `data:` URL
@@ -5739,11 +5740,9 @@ $utils-border-radius: (
         display: none;
     }
 
-    .k-widget .k-icon {
-        &.k-i-expand,
-        &.k-i-collapse {
-            cursor: pointer;
-        }
+    .k-icon-action {
+        padding: $icon-padding;
+        cursor: pointer;
     }
 
     .k-icon-xs { font-size: ( $icon-size * .5 ); }
@@ -12266,7 +12265,7 @@ $kendo-chip-sizes: (
 
 /// The base background of the chip.
 /// @group chip
-$kendo-chip-base-bg: $base-text !default;
+$kendo-chip-base-bg: $kendo-button-bg !default;
 
 /// Theme colors map for the chip.
 /// @group chip
@@ -12280,34 +12279,37 @@ $kendo-chip-theme-colors: (
 
 /// The base background color of solid chip.
 /// @group chip
-$kendo-chip-solid-bg: k-try-tint( $kendo-chip-base-bg, 92% ) !default;
+$kendo-chip-solid-bg: $kendo-chip-base-bg !default;
 /// The base text color of solid chip.
 /// @group chip
-$kendo-chip-solid-text: $kendo-chip-base-bg !default;
+$kendo-chip-solid-text: $kendo-button-text !default;
 /// The base border color of solid chip.
 /// @group chip
-$kendo-chip-solid-border: k-try-tint( $kendo-chip-base-bg, 70% ) !default;
+$kendo-chip-solid-border: $kendo-button-border !default;
 /// The base shadow of solid chip.
 /// @group chip
-$kendo-chip-solid-shadow: 0 0 0 2px rgba( $kendo-chip-base-bg, .16 ) !default;
+$kendo-chip-solid-shadow: 0 0 0 2px if($dark-theme, rgba( 255, 255, 255, .16 ), rgba( 0, 0, 0, .16 )) !default;
+/// The base gradient of solid chip.
+/// @group chip
+$kendo-chip-solid-gradient: $kendo-button-gradient !default;
 
 /// The base background color of focused solid chip.
 /// @group chip
-$kendo-chip-solid-focus-bg: k-try-tint( $kendo-chip-base-bg, 92% ) !default;
+$kendo-chip-solid-focus-bg: null !default;
 /// The base text color of focused solid chip.
 /// @group chip
 $kendo-chip-solid-focus-text: null !default;
 
 /// The base background color of hovered solid chip.
 /// @group chip
-$kendo-chip-solid-hover-bg: k-try-tint( $kendo-chip-base-bg, 84% ) !default;
+$kendo-chip-solid-hover-bg: $kendo-button-hover-bg !default;
 /// The base text color of hovered solid chip.
 /// @group chip
 $kendo-chip-solid-hover-text: null !default;
 
 /// The base background color of selected solid chip.
 /// @group chip
-$kendo-chip-solid-selected-bg: k-try-tint( $kendo-chip-base-bg, 76% ) !default;
+$kendo-chip-solid-selected-bg: $kendo-button-active-bg !default;
 /// The base text color of selected solid chip.
 /// @group chip
 $kendo-chip-solid-selected-text: null !default;
@@ -12317,20 +12319,20 @@ $kendo-chip-solid-selected-text: null !default;
 $kendo-chip-outline-bg: $component-bg !default;
 /// The base text color of outline chip.
 /// @group chip
-$kendo-chip-outline-text: $kendo-chip-base-bg !default;
+$kendo-chip-outline-text: $kendo-chip-solid-text !default;
 /// The base border color of outline chip.
 /// @group chip
-$kendo-chip-outline-border: $kendo-chip-base-bg !default;
+$kendo-chip-outline-border: $kendo-chip-outline-text !default;
 /// The base shadow of outline chip.
 /// @group chip
-$kendo-chip-outline-shadow: 0 0 0 2px rgba( $kendo-chip-base-bg, .16 ) !default;
+$kendo-chip-outline-shadow: 0 0 0 2px if($dark-theme, rgba( 255, 255, 255, .16 ), rgba( 0, 0, 0, .16 )) !default;
 
 /// The base background color of hovered outline chip.
 /// @group chip
-$kendo-chip-outline-hover-bg: $kendo-chip-base-bg !default;
+$kendo-chip-outline-hover-bg: $kendo-chip-outline-text !default;
 /// The base text color of hovered outline chip.
 /// @group chip
-$kendo-chip-outline-hover-text: k-contrast-color( $kendo-chip-base-bg ) !default;
+$kendo-chip-outline-hover-text: contrast-wcag( $kendo-chip-outline-hover-bg ) !default;
 
 /// The base background color of selected outline chip.
 /// @group chip
@@ -12541,7 +12543,8 @@ $kendo-chip-list-sizes: (
                 @include fill(
                     $kendo-chip-solid-text,
                     $kendo-chip-solid-bg,
-                    $kendo-chip-solid-border
+                    $kendo-chip-solid-border,
+                    $kendo-chip-solid-gradient
                 );
 
                 &:focus,
@@ -12560,24 +12563,24 @@ $kendo-chip-list-sizes: (
                 }
             } @else {
                 @include fill(
-                    $color,
-                    try-tint( $color, 92% ),
-                    try-tint( $color, 70% )
+                    try-shade( $color, 65% ),
+                    try-tint( $color, 80% ),
+                    try-tint( $color, 25% ),
+                    $kendo-chip-solid-gradient
                 );
 
                 &:focus,
                 &.k-focus {
                     @include box-shadow( 0 0 0 2px rgba( $color, .16 ) );
-                    @include fill( $bg: try-tint( $color, 92% ) );
                 }
 
                 &:hover,
                 &.k-hover {
-                    @include fill( $bg: try-tint($color, 84% ) );
+                    @include fill( $bg: try-tint($color, 65% ) );
                 }
 
                 &.k-selected {
-                    @include fill( $bg: try-tint( $color, 76% ) );
+                    @include fill( $bg: try-tint( $color, 50% ) );
                 }
             }
         }
@@ -12613,30 +12616,56 @@ $kendo-chip-list-sizes: (
                         $bg: $kendo-chip-outline-selected-bg
                     );
                 }
+            } @else if ($name == "warning") {
+                @include fill(
+                    if( $dark-theme, tint($color, 25%), $kendo-chip-outline-text),
+                    if( $dark-theme, $black, $white ),
+                    if( $dark-theme, tint($color, 25%), $color)
+                );
+
+                &:focus,
+                &.k-focus {
+                    @include box-shadow( 0 0 0 2px if( $dark-theme, rgba( tint( $color, 50% ), .32 ), rgba( $color, .16 )) );
+                }
+
+                &:hover,
+                &.k-hover {
+                    @include fill(
+                        $color: if( $dark-theme, contrast-wcag( $color ), try-shade( $color, 80% ) ) ,
+                        $bg: if( $dark-theme, tint($color, 25%), $color)
+                    );
+                }
+
+                &.k-selected {
+                    @include fill(
+                        $color: if( $dark-theme, contrast-wcag( $color ), try-shade( $color, 80% ) ) ,
+                        $bg: if( $dark-theme, tint($color, 25%), $color)
+                    );
+                }
             } @else {
                 @include fill(
-                    $color,
-                    $white,
-                    $color
+                    try-shade( $color, 25% ),
+                    if( $dark-theme, $black, $white ),
+                    try-shade( $color, 25% )
                 );
 
                 &:focus,
                 &.k-focus {
-                    @include box-shadow( 0 0 0 2px rgba( $color, .16 ) );
+                    @include box-shadow( 0 0 0 2px if( $dark-theme, rgba( tint( $color, 50% ), .32 ), rgba( $color, .16 )) );
                 }
 
                 &:hover,
                 &.k-hover {
                     @include fill(
-                        $color: contrast-wcag( $color ),
-                        $bg: $color
+                        $color: contrast-wcag( try-shade( $color, 25% ) ),
+                        $bg: try-shade( $color, 25% )
                     );
                 }
 
                 &.k-selected {
                     @include fill(
-                        $color: contrast-wcag( $color ),
-                        $bg: $color
+                        $color: contrast-wcag( try-shade( $color, 25% ) ),
+                        $bg: try-shade( $color, 25% )
                     );
                 }
             }
@@ -25399,6 +25428,7 @@ $popover-callout-border: $popover-border !default;
     .k-popover-inner {
         position: relative;
         border-radius: inherit;
+        height: inherit;
     }
 
     // Header
@@ -38808,6 +38838,11 @@ $scheduler-tooltip-callout-text: $scheduler-tooltip-bg !default;
             vertical-align: top;
         }
 
+        td.k-selected,
+        .k-scheduler-cell.k-selected {
+            outline: none;
+        }
+
         // Remove bottom border from first cell of hours cells spaning on two rows
         tr + tr,
         .k-scheduler-pane + .k-scheduler-pane {
@@ -38897,6 +38932,10 @@ $scheduler-tooltip-callout-text: $scheduler-tooltip-bg !default;
         border-color: inherit;
         position: relative;
         overflow: auto;
+
+        &:focus {
+            outline: none;
+        }
     }
 
 

package/lib/swatches/classic-green-dark.json

@@ -3,7 +3,7 @@
     "name": "Classic Green Dark",
     "product": "kendo",
     "base": "@progress/kendo-theme-classic",
-    "version": "5.11.1-dev.1",
+    "version": "5.11.1-dev.2",
     "previewColors": [
         "#000000",
         "#131413",

package/lib/swatches/classic-green.json

@@ -3,7 +3,7 @@
     "name": "Classic Green",
     "product": "kendo",
     "base": "@progress/kendo-theme-classic",
-    "version": "5.11.1-dev.1",
+    "version": "5.11.1-dev.2",
     "previewColors": [
         "#ffffff",
         "#f3f4f3",

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

@@ -3,7 +3,7 @@
     "name": "Classic Main Dark",
     "product": "kendo",
     "base": "@progress/kendo-theme-classic",
-    "version": "5.11.1-dev.1",
+    "version": "5.11.1-dev.2",
     "previewColors": [
         "#000000",
         "#101010",

package/lib/swatches/classic-main.json

@@ -3,7 +3,7 @@
     "name": "Classic Main",
     "product": "kendo",
     "base": "@progress/kendo-theme-classic",
-    "version": "5.11.1-dev.1",
+    "version": "5.11.1-dev.2",
     "previewColors": [
         "#ffffff",
         "#f0f0f0",

package/lib/swatches/classic-opal-dark.json

@@ -3,7 +3,7 @@
     "name": "Classic Opal Dark",
     "product": "kendo",
     "base": "@progress/kendo-theme-classic",
-    "version": "5.11.1-dev.1",
+    "version": "5.11.1-dev.2",
     "previewColors": [
         "#000000",
         "#1e242d",

package/lib/swatches/classic-opal.json

@@ -3,7 +3,7 @@
     "name": "Classic Opal",
     "product": "kendo",
     "base": "@progress/kendo-theme-classic",
-    "version": "5.11.1-dev.1",
+    "version": "5.11.1-dev.2",
     "previewColors": [
         "#ffffff",
         "#def4fd",

package/lib/swatches/classic-silver-dark.json

@@ -3,7 +3,7 @@
     "name": "Classic Silver Dark",
     "product": "kendo",
     "base": "@progress/kendo-theme-classic",
-    "version": "5.11.1-dev.1",
+    "version": "5.11.1-dev.2",
     "previewColors": [
         "#000000",
         "#131314",

package/lib/swatches/classic-silver.json

@@ -3,7 +3,7 @@
     "name": "Classic Silver",
     "product": "kendo",
     "base": "@progress/kendo-theme-classic",
-    "version": "5.11.1-dev.1",
+    "version": "5.11.1-dev.2",
     "previewColors": [
         "#ffffff",
         "#f3f3f4",

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@progress/kendo-theme-classic",
   "description": "Sass port of less based themes for Kendo UI theme",
-  "version": "5.11.1-dev.1",
+  "version": "5.11.1-dev.2",
   "author": "Progress",
   "license": "Apache-2.0",
   "keywords": [
@@ -46,12 +46,12 @@
   },
   "dependencies": {
     "@progress/kendo-font-icons": "^0.6.0",
-    "@progress/kendo-theme-core": "^5.11.1-dev.1",
-    "@progress/kendo-theme-default": "^5.11.1-dev.1",
-    "@progress/kendo-theme-utils": "^5.11.1-dev.1"
+    "@progress/kendo-theme-core": "^5.11.1-dev.2",
+    "@progress/kendo-theme-default": "^5.11.1-dev.2",
+    "@progress/kendo-theme-utils": "^5.11.1-dev.2"
   },
   "devDependencies": {
     "sass-build": "^1.1.0"
   },
-  "gitHead": "19168e8bce86f6948eae191325e62150b6f31b8e"
+  "gitHead": "1abe5dc353ef37c2ad5ee6177c8fb1e3894956d6"
 }

package/scss/_variables.scss

@@ -63,6 +63,7 @@ $default-scrollbar-width: 17px !default;
 $icon-size: 16px !default;
 $icon-size-lg: 32px !default;
 $icon-spacing: k-map-get( $spacing, 1 ) !default;
+$icon-padding: k-map-get( $spacing, 1 ) !default;
 
 /// The URL to the icon font that will be used by the theme
 /// The default value of `null` embeds the package font with a `data:` URL

package/scss/chip/_variables.scss

@@ -60,7 +60,7 @@ $kendo-chip-sizes: (
 
 /// The base background of the chip.
 /// @group chip
-$kendo-chip-base-bg: $base-text !default;
+$kendo-chip-base-bg: $kendo-button-bg !default;
 
 /// Theme colors map for the chip.
 /// @group chip
@@ -74,34 +74,37 @@ $kendo-chip-theme-colors: (
 
 /// The base background color of solid chip.
 /// @group chip
-$kendo-chip-solid-bg: k-try-tint( $kendo-chip-base-bg, 92% ) !default;
+$kendo-chip-solid-bg: $kendo-chip-base-bg !default;
 /// The base text color of solid chip.
 /// @group chip
-$kendo-chip-solid-text: $kendo-chip-base-bg !default;
+$kendo-chip-solid-text: $kendo-button-text !default;
 /// The base border color of solid chip.
 /// @group chip
-$kendo-chip-solid-border: k-try-tint( $kendo-chip-base-bg, 70% ) !default;
+$kendo-chip-solid-border: $kendo-button-border !default;
 /// The base shadow of solid chip.
 /// @group chip
-$kendo-chip-solid-shadow: 0 0 0 2px rgba( $kendo-chip-base-bg, .16 ) !default;
+$kendo-chip-solid-shadow: 0 0 0 2px if($dark-theme, rgba( 255, 255, 255, .16 ), rgba( 0, 0, 0, .16 )) !default;
+/// The base gradient of solid chip.
+/// @group chip
+$kendo-chip-solid-gradient: $kendo-button-gradient !default;
 
 /// The base background color of focused solid chip.
 /// @group chip
-$kendo-chip-solid-focus-bg: k-try-tint( $kendo-chip-base-bg, 92% ) !default;
+$kendo-chip-solid-focus-bg: null !default;
 /// The base text color of focused solid chip.
 /// @group chip
 $kendo-chip-solid-focus-text: null !default;
 
 /// The base background color of hovered solid chip.
 /// @group chip
-$kendo-chip-solid-hover-bg: k-try-tint( $kendo-chip-base-bg, 84% ) !default;
+$kendo-chip-solid-hover-bg: $kendo-button-hover-bg !default;
 /// The base text color of hovered solid chip.
 /// @group chip
 $kendo-chip-solid-hover-text: null !default;
 
 /// The base background color of selected solid chip.
 /// @group chip
-$kendo-chip-solid-selected-bg: k-try-tint( $kendo-chip-base-bg, 76% ) !default;
+$kendo-chip-solid-selected-bg: $kendo-button-active-bg !default;
 /// The base text color of selected solid chip.
 /// @group chip
 $kendo-chip-solid-selected-text: null !default;
@@ -111,20 +114,20 @@ $kendo-chip-solid-selected-text: null !default;
 $kendo-chip-outline-bg: $component-bg !default;
 /// The base text color of outline chip.
 /// @group chip
-$kendo-chip-outline-text: $kendo-chip-base-bg !default;
+$kendo-chip-outline-text: $kendo-chip-solid-text !default;
 /// The base border color of outline chip.
 /// @group chip
-$kendo-chip-outline-border: $kendo-chip-base-bg !default;
+$kendo-chip-outline-border: $kendo-chip-outline-text !default;
 /// The base shadow of outline chip.
 /// @group chip
-$kendo-chip-outline-shadow: 0 0 0 2px rgba( $kendo-chip-base-bg, .16 ) !default;
+$kendo-chip-outline-shadow: 0 0 0 2px if($dark-theme, rgba( 255, 255, 255, .16 ), rgba( 0, 0, 0, .16 )) !default;
 
 /// The base background color of hovered outline chip.
 /// @group chip
-$kendo-chip-outline-hover-bg: $kendo-chip-base-bg !default;
+$kendo-chip-outline-hover-bg: $kendo-chip-outline-text !default;
 /// The base text color of hovered outline chip.
 /// @group chip
-$kendo-chip-outline-hover-text: k-contrast-color( $kendo-chip-base-bg ) !default;
+$kendo-chip-outline-hover-text: contrast-wcag( $kendo-chip-outline-hover-bg ) !default;
 
 /// The base background color of selected outline chip.
 /// @group chip