@progress/kendo-theme-bootstrap 5.11.1-dev.1 → 5.12.0

package/dist/all.css

@@ -6874,7 +6874,8 @@ kendo-sortable {
     display: none;
 }
 
-.k-widget .k-icon.k-i-expand, .k-widget .k-icon.k-i-collapse {
+.k-icon-action {
+    padding: 0.25rem;
     cursor: pointer;
 }
 
@@ -15018,98 +15019,93 @@ textarea.k-input-inner {
 }
 
 .k-chip-solid-base {
-    border-color: #bcbebf;
+    border-color: #e4e7eb;
     color: #212529;
-    background-color: #edeeee;
+    background-color: #e4e7eb;
 }
 
 .k-chip-solid-base:focus, .k-chip-solid-base.k-focus {
-    box-shadow: 0 0 0 2px rgba(33, 37, 41, 0.16);
-    background-color: #edeeee;
+    box-shadow: 0 0 0 2px rgba(228, 231, 235, 0.16);
 }
 
 .k-chip-solid-base:hover, .k-chip-solid-base.k-hover {
-    background-color: #dbdcdd;
+    background-color: #ced3db;
 }
 
 .k-chip-solid-base.k-selected {
-    background-color: #cacbcc;
+    background-color: #c7cdd5;
 }
 
 .k-chip-solid-error {
-    border-color: #f5c2c7;
-    color: #dc3545;
-    background-color: #fceff0;
+    border-color: #e56874;
+    color: #4d1318;
+    background-color: #f8d7da;
 }
 
 .k-chip-solid-error:focus, .k-chip-solid-error.k-focus {
     box-shadow: 0 0 0 2px rgba(220, 53, 69, 0.16);
-    background-color: #fceff0;
 }
 
 .k-chip-solid-error:hover, .k-chip-solid-error.k-hover {
-    background-color: #f9dfe1;
+    background-color: #f3b8be;
 }
 
 .k-chip-solid-error.k-selected {
-    background-color: #f7cfd2;
+    background-color: #ee9aa2;
 }
 
 .k-chip-solid-info {
-    border-color: #b6effb;
-    color: #0dcaf0;
-    background-color: #ecfbfe;
+    border-color: #4ad7f4;
+    color: #054754;
+    background-color: #cff4fc;
 }
 
 .k-chip-solid-info:focus, .k-chip-solid-info.k-focus {
     box-shadow: 0 0 0 2px rgba(13, 202, 240, 0.16);
-    background-color: #ecfbfe;
 }
 
 .k-chip-solid-info:hover, .k-chip-solid-info.k-hover {
-    background-color: #d8f7fd;
+    background-color: #aaecfa;
 }
 
 .k-chip-solid-info.k-selected {
-    background-color: #c5f2fb;
+    background-color: #86e5f8;
 }
 
 .k-chip-solid-warning {
-    border-color: #ffecb5;
-    color: #ffc107;
-    background-color: #fffaeb;
+    border-color: #ffd145;
+    color: #594402;
+    background-color: #fff3cd;
 }
 
 .k-chip-solid-warning:focus, .k-chip-solid-warning.k-focus {
     box-shadow: 0 0 0 2px rgba(255, 193, 7, 0.16);
-    background-color: #fffaeb;
 }
 
 .k-chip-solid-warning:hover, .k-chip-solid-warning.k-hover {
-    background-color: #fff5d7;
+    background-color: #ffe9a8;
 }
 
 .k-chip-solid-warning.k-selected {
-    background-color: #fff0c3;
+    background-color: #ffe083;
 }
 
 .k-chip-solid-success {
-    border-color: #badbcc;
-    color: #198754;
-    background-color: #edf5f1;
+    border-color: #53a57f;
+    color: #092f1d;
+    background-color: #d1e7dd;
 }
 
 .k-chip-solid-success:focus, .k-chip-solid-success.k-focus {
     box-shadow: 0 0 0 2px rgba(25, 135, 84, 0.16);
-    background-color: #edf5f1;
 }
 
 .k-chip-solid-success:hover, .k-chip-solid-success.k-hover {
-    background-color: #daece4;
+    background-color: #afd5c3;
 }
 
 .k-chip-solid-success.k-selected {
-    background-color: #c8e2d6;
+    background-color: #8cc3aa;
 }
 
 .k-chip-outline-base {
@@ -15119,7 +15115,7 @@ textarea.k-input-inner {
 }
 
 .k-chip-outline-base:focus, .k-chip-outline-base.k-focus {
-    box-shadow: 0 0 0 2px rgba(33, 37, 41, 0.16);
+    box-shadow: 0 0 0 2px rgba(228, 231, 235, 0.16);
 }
 
 .k-chip-outline-base:hover, .k-chip-outline-base.k-hover {
@@ -15133,8 +15129,8 @@ textarea.k-input-inner {
 }
 
 .k-chip-outline-error {
-    border-color: #dc3545;
-    color: #dc3545;
+    border-color: #a52834;
+    color: #a52834;
     background-color: #ffffff;
 }
 
@@ -15144,17 +15140,17 @@ textarea.k-input-inner {
 
 .k-chip-outline-error:hover, .k-chip-outline-error.k-hover {
     color: white;
-    background-color: #dc3545;
+    background-color: #a52834;
 }
 
 .k-chip-outline-error.k-selected {
     color: white;
-    background-color: #dc3545;
+    background-color: #a52834;
 }
 
 .k-chip-outline-info {
-    border-color: #0dcaf0;
-    color: #0dcaf0;
+    border-color: #0a98b4;
+    color: #0a98b4;
     background-color: #ffffff;
 }
 
@@ -15164,17 +15160,17 @@ textarea.k-input-inner {
 
 .k-chip-outline-info:hover, .k-chip-outline-info.k-hover {
     color: white;
-    background-color: #0dcaf0;
+    background-color: #0a98b4;
 }
 
 .k-chip-outline-info.k-selected {
     color: white;
-    background-color: #0dcaf0;
+    background-color: #0a98b4;
 }
 
 .k-chip-outline-warning {
     border-color: #ffc107;
-    color: #ffc107;
+    color: #212529;
     background-color: #ffffff;
 }
 
@@ -15183,18 +15179,18 @@ textarea.k-input-inner {
 }
 
 .k-chip-outline-warning:hover, .k-chip-outline-warning.k-hover {
-    color: black;
+    color: #332701;
     background-color: #ffc107;
 }
 
 .k-chip-outline-warning.k-selected {
-    color: black;
+    color: #332701;
     background-color: #ffc107;
 }
 
 .k-chip-outline-success {
-    border-color: #198754;
-    color: #198754;
+    border-color: #13653f;
+    color: #13653f;
     background-color: #ffffff;
 }
 
@@ -15204,12 +15200,22 @@ textarea.k-input-inner {
 
 .k-chip-outline-success:hover, .k-chip-outline-success.k-hover {
     color: white;
-    background-color: #198754;
+    background-color: #13653f;
 }
 
 .k-chip-outline-success.k-selected {
     color: white;
-    background-color: #198754;
+    background-color: #13653f;
+}
+
+.k-chip-outline-info {
+    border-color: #0dcaf0;
+    color: #212529;
+}
+
+.k-chip-outline-info:hover, .k-chip-outline-info.k-hover, .k-chip-outline-info.k-selected {
+    color: #212529;
+    background-color: #0dcaf0;
 }
 
 .k-color-preview {
@@ -23402,6 +23408,7 @@ kendo-card-footer {
 .k-popover-inner {
     position: relative;
     border-radius: inherit;
+    height: inherit;
 }
 
 .k-popover-header {
@@ -33298,6 +33305,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;
@@ -33387,6 +33399,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: 0.375rem;

package/dist/all.scss

@@ -3762,6 +3762,7 @@ $default-scrollbar-width: 17px !default;
 $icon-size: 16px !default;
 $icon-size-lg: 32px !default;
 $icon-spacing: k-map-get( $spacing, 2 ) !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
@@ -7764,11 +7765,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 ); }
@@ -14306,7 +14305,7 @@ $kendo-chip-sizes: (
 
 /// The base background color 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
@@ -14320,34 +14319,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;
+/// 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;
@@ -14357,20 +14359,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;
 
 /// 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: k-contrast-color( $kendo-chip-outline-hover-bg ) !default;
 
 /// The base background color of selected outline chip.
 /// @group chip
@@ -14581,7 +14583,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,
@@ -14600,24 +14603,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% ) );
                 }
             }
         }
@@ -14653,30 +14656,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% )
                     );
                 }
             }
@@ -14687,6 +14716,31 @@ $kendo-chip-list-sizes: (
 
 // #endregion
 
+@include exports( "chip/theme/bootstrap" ) {
+
+    @each $name, $color in $kendo-chip-theme-colors {
+        .k-chip-outline-#{$name} {
+
+            @if ($name == "info") {
+                @include fill (
+                    $color: if( $dark-theme, k-color-tint($color, 25%), $kendo-chip-outline-text),
+                    $border: if( $dark-theme, k-color-tint($color, 25%), $color)
+                );
+
+                &:hover,
+                &.k-hover,
+                &.k-selected {
+                    @include fill(
+                        $color: if( $dark-theme, k-contrast-color($color), $kendo-chip-outline-text),
+                        $bg: $color
+                    );
+                }
+
+            }
+        }
+    }
+}
+
 // #endregion
 
 // #endregion
@@ -27587,6 +27641,7 @@ $popover-callout-border: $popover-border !default;
     .k-popover-inner {
         position: relative;
         border-radius: inherit;
+        height: inherit;
     }
 
     // Header
@@ -41146,6 +41201,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 {
@@ -41235,6 +41295,10 @@ $scheduler-tooltip-callout-text: $scheduler-tooltip-bg !default;
         border-color: inherit;
         position: relative;
         overflow: auto;
+
+        &:focus {
+            outline: none;
+        }
     }
 
 

package/lib/swatches/bootstrap-3-dark.json

@@ -3,7 +3,7 @@
     "name": "Bootstrap 3 Dark",
     "product": "kendo",
     "base": "@progress/kendo-theme-bootstrap",
-    "version": "5.11.1-dev.1",
+    "version": "5.12.0",
     "previewColors": [
         "#000000",
         "#222222",

package/lib/swatches/bootstrap-3.json

@@ -3,7 +3,7 @@
     "name": "Bootstrap 3",
     "product": "kendo",
     "base": "@progress/kendo-theme-bootstrap",
-    "version": "5.11.1-dev.1",
+    "version": "5.12.0",
     "previewColors": [
         "#ffffff",
         "#f5f5f5",

package/lib/swatches/bootstrap-4-dark.json

@@ -3,7 +3,7 @@
     "name": "Bootstrap 4 Dark",
     "product": "kendo",
     "base": "@progress/kendo-theme-bootstrap",
-    "version": "5.11.1-dev.1",
+    "version": "5.12.0",
     "previewColors": [
         "#000000",
         "#212529",

package/lib/swatches/bootstrap-4.json

@@ -3,7 +3,7 @@
     "name": "Bootstrap 4",
     "product": "kendo",
     "base": "@progress/kendo-theme-bootstrap",
-    "version": "5.11.1-dev.1",
+    "version": "5.12.0",
     "previewColors": [
         "#ffffff",
         "#f8f9fa",

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

@@ -3,7 +3,7 @@
     "name": "Bootstrap Dataviz v4",
     "product": "kendo",
     "base": "@progress/kendo-theme-bootstrap",
-    "version": "5.11.1-dev.1",
+    "version": "5.12.0",
     "previewColors": [
         "#0275d8",
         "#5bc0de",

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

@@ -3,7 +3,7 @@
     "name": "Bootstrap Main Dark",
     "product": "kendo",
     "base": "@progress/kendo-theme-bootstrap",
-    "version": "5.11.1-dev.1",
+    "version": "5.12.0",
     "previewColors": [
         "#000000",
         "#212529",

package/lib/swatches/bootstrap-main.json

@@ -3,7 +3,7 @@
     "name": "Bootstrap Main",
     "product": "kendo",
     "base": "@progress/kendo-theme-bootstrap",
-    "version": "5.11.1-dev.1",
+    "version": "5.12.0",
     "previewColors": [
         "#ffffff",
         "#f8f9fa",

package/lib/swatches/bootstrap-nordic.json

@@ -3,7 +3,7 @@
     "name": "Bootstrap Nordic",
     "product": "kendo",
     "base": "@progress/kendo-theme-bootstrap",
-    "version": "5.11.1-dev.1",
+    "version": "5.12.0",
     "previewColors": [
         "#ffffff",
         "#f8f9fa",

package/lib/swatches/bootstrap-turquoise-dark.json

@@ -3,7 +3,7 @@
     "name": "Bootstrap Turquoise Dark",
     "product": "kendo",
     "base": "@progress/kendo-theme-bootstrap",
-    "version": "5.11.1-dev.1",
+    "version": "5.12.0",
     "previewColors": [
         "#000000",
         "#292b2c",

package/lib/swatches/bootstrap-turquoise.json

@@ -3,7 +3,7 @@
     "name": "Bootstrap Turquoise",
     "product": "kendo",
     "base": "@progress/kendo-theme-bootstrap",
-    "version": "5.11.1-dev.1",
+    "version": "5.12.0",
     "previewColors": [
         "#ffffff",
         "#f2f2f2",

package/lib/swatches/bootstrap-urban.json

@@ -3,7 +3,7 @@
     "name": "Bootstrap Urban",
     "product": "kendo",
     "base": "@progress/kendo-theme-bootstrap",
-    "version": "5.11.1-dev.1",
+    "version": "5.12.0",
     "previewColors": [
         "#ffffff",
         "#e3eef4",

package/lib/swatches/bootstrap-vintage.json

@@ -3,7 +3,7 @@
     "name": "Bootstrap Vintage",
     "product": "kendo",
     "base": "@progress/kendo-theme-bootstrap",
-    "version": "5.11.1-dev.1",
+    "version": "5.12.0",
     "previewColors": [
         "#ffffff",
         "#f2efe8",

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@progress/kendo-theme-bootstrap",
   "description": "Bootstrap theme for Kendo UI",
-  "version": "5.11.1-dev.1",
+  "version": "5.12.0",
   "author": "Progress",
   "license": "Apache-2.0",
   "keywords": [
@@ -46,13 +46,13 @@
   },
   "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.12.0",
+    "@progress/kendo-theme-default": "^5.12.0",
+    "@progress/kendo-theme-utils": "^5.12.0",
     "bootstrap": "^5.2.1"
   },
   "devDependencies": {
     "sass-build": "^1.1.0"
   },
-  "gitHead": "19168e8bce86f6948eae191325e62150b6f31b8e"
+  "gitHead": "9eaba5fe84f407f8f7240d2391cf6f5807f8eef4"
 }

package/scss/_variables.scss

@@ -66,6 +66,7 @@ $default-scrollbar-width: 17px !default;
 $icon-size: 16px !default;
 $icon-size-lg: 32px !default;
 $icon-spacing: k-map-get( $spacing, 2 ) !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/_theme.scss

@@ -1 +1,26 @@
 @import "~@progress/kendo-theme-default/scss/chip/_theme.scss";
+
+@include exports( "chip/theme/bootstrap" ) {
+
+    @each $name, $color in $kendo-chip-theme-colors {
+        .k-chip-outline-#{$name} {
+
+            @if ($name == "info") {
+                @include fill (
+                    $color: if( $dark-theme, k-color-tint($color, 25%), $kendo-chip-outline-text),
+                    $border: if( $dark-theme, k-color-tint($color, 25%), $color)
+                );
+
+                &:hover,
+                &.k-hover,
+                &.k-selected {
+                    @include fill(
+                        $color: if( $dark-theme, k-contrast-color($color), $kendo-chip-outline-text),
+                        $bg: $color
+                    );
+                }
+
+            }
+        }
+    }
+}

package/scss/chip/_variables.scss

@@ -60,7 +60,7 @@ $kendo-chip-sizes: (
 
 /// The base background color 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;
+/// 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;
 
 /// 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: k-contrast-color( $kendo-chip-outline-hover-bg ) !default;
 
 /// The base background color of selected outline chip.
 /// @group chip