@progress/kendo-theme-classic 5.0.0-beta.0 → 5.0.0-beta.4

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.0.0-beta.0",
+  "version": "5.0.0-beta.4",
   "author": "Progress",
   "license": "Apache-2.0",
   "keywords": [
@@ -49,7 +49,7 @@
     "postpublish": "echo 'no postpublish for classic theme'"
   },
   "dependencies": {
-    "@progress/kendo-theme-default": "^5.0.0-beta.0"
+    "@progress/kendo-theme-default": "^5.0.0-beta.4"
   },
-  "gitHead": "cf3cf196b3134f227f04a272b4dc4a480b008a84"
+  "gitHead": "1e906bdc564c2df671a6c1552c81dd56bc08d1c4"
 }

package/scss/appbar/_variables.scss

@@ -2,7 +2,7 @@
 $appbar-margin-y: null !default;
 $appbar-margin-x: null !default;
 $appbar-padding-y: map-get( $spacing, 2 ) !default;
-$appbar-padding-x: map-get( $spacing, 4 ) !default;
+$appbar-padding-x: map-get( $spacing, 2 ) !default;
 $appbar-border-width: 0px !default;
 
 $appbar-zindex: 1000 !default;

package/scss/autocomplete/_variables.scss

@@ -1,20 +1 @@
 // Autocomplete
-$autocomplete-bg: $kendo-input-bg !default;
-$autocomplete-text: $kendo-input-text !default;
-$autocomplete-border: $kendo-input-border !default;
-$autocomplete-shadow: $kendo-input-shadow !default;
-
-$autocomplete-hovered-bg: $kendo-input-hover-bg !default;
-$autocomplete-hovered-text: $kendo-input-hover-text !default;
-$autocomplete-hovered-border: $kendo-input-hover-border !default;
-$autocomplete-hovered-shadow: $kendo-input-hover-shadow !default;
-
-$autocomplete-focused-bg: $kendo-input-focus-bg !default;
-$autocomplete-focused-text: $kendo-input-focus-text !default;
-$autocomplete-focused-border: $kendo-input-focus-border !default;
-$autocomplete-focused-shadow: $kendo-input-focus-shadow !default;
-
-$autocomplete-disabled-bg: null !default;
-$autocomplete-disabled-text: null !default;
-$autocomplete-disabled-border: null !default;
-$autocomplete-disabled-shadow: null !default;

package/scss/button/_variables.scss

@@ -6,24 +6,21 @@ $kendo-button-border-width: 1px !default;
 
 /// Border radius of the button.
 /// @group button
-$kendo-button-border-radius: ( map-get( $spacing, 1 ) / 2 ) !default;
-$kendo-button-border-radius-sm: ( map-get( $spacing, 1 ) / 4 ) !default;
-$kendo-button-border-radius-md: ( map-get( $spacing, 1 ) / 2 ) !default;
-$kendo-button-border-radius-lg: map-get( $spacing, 1 ) !default;
+$kendo-button-border-radius: null !default;
 
 /// Horizontal padding of the button.
 /// @group button
 $kendo-button-padding-x: map-get( $spacing, 2 ) !default;
-$kendo-button-padding-x-sm: map-get( $spacing, 1 ) !default;
+$kendo-button-padding-x-sm: map-get( $spacing, 2 ) !default;
 $kendo-button-padding-x-md: map-get( $spacing, 2 ) !default;
-$kendo-button-padding-x-lg: map-get( $spacing, 3 ) !default;
+$kendo-button-padding-x-lg: map-get( $spacing, 2 ) !default;
 
 /// Vertical padding of the button.
 /// @group button
-$kendo-button-padding-y: $kendo-button-padding-x / 2 !default;
-$kendo-button-padding-y-sm: $kendo-button-padding-x-sm / 2 !default;
-$kendo-button-padding-y-md: $kendo-button-padding-x-md / 2 !default;
-$kendo-button-padding-y-lg: $kendo-button-padding-x-lg / 2 !default;
+$kendo-button-padding-y: map-get( $spacing, 1 ) !default;
+$kendo-button-padding-y-sm: map-get( $spacing, 1 ) - map-get( $spacing, thin ) !default;
+$kendo-button-padding-y-md: map-get( $spacing, 1 ) !default;
+$kendo-button-padding-y-lg: map-get( $spacing, 1 ) + map-get( $spacing, thin ) !default;
 
 /// Font family of the button.
 /// @group button
@@ -31,17 +28,17 @@ $kendo-button-font-family: $font-family !default;
 
 /// Font sizes of the button.
 /// @group button
-$kendo-button-font-size: $font-size !default;
-$kendo-button-font-size-sm: $font-size-sm !default;
-$kendo-button-font-size-md: $font-size !default;
-$kendo-button-font-size-lg: $font-size-lg !default;
+$kendo-button-font-size: $font-size-md !default;
+$kendo-button-font-size-sm: $font-size-md !default;
+$kendo-button-font-size-md: $font-size-md !default;
+$kendo-button-font-size-lg: $font-size-md !default;
 
 /// Line heights used along with $font-size.
 /// @group button
-$kendo-button-line-height: $line-height !default;
-$kendo-button-line-height-sm: $line-height-lg !default;
-$kendo-button-line-height-md: $line-height !default;
-$kendo-button-line-height-lg: $line-height-lg !default;
+$kendo-button-line-height: $line-height-md !default;
+$kendo-button-line-height-sm: $line-height-md !default;
+$kendo-button-line-height-md: $line-height-md !default;
+$kendo-button-line-height-lg: $line-height-md !default;
 
 /// Calculated height of the button.
 /// @group button
@@ -51,9 +48,15 @@ $kendo-button-calc-size: calc( #{$kendo-button-line-height * 1em} + #{$kendo-but
 /// @group button
 $kendo-button-inner-calc-size: calc( #{$kendo-button-line-height * 1em} + #{$kendo-button-padding-y * 2} ) !default;
 
+$kendo-button-arrow-padding-x: $kendo-button-padding-y !default;
+$kendo-button-arrow-padding-y: $kendo-button-padding-y !default;
+
 /// Theme colors map for the button.
 /// @group button
-$kendo-button-theme-colors: map-merge((base: $base-bg), $theme-colors ) !default;
+$kendo-button-theme-colors: map-merge(
+    $theme-colors,
+    ( "base": $base-bg )
+) !default;
 
 /// The base background of the button.
 /// @group button
@@ -79,7 +82,7 @@ $kendo-button-hover-bg: try-shade( $kendo-button-bg, 1 ) !default;
 $kendo-button-hover-text: null !default;
 /// The base border color of hovered button.
 /// @group button
-$kendo-button-hover-border: try-shade( $kendo-button-hover-bg, 2 ) !default;
+$kendo-button-hover-border: try-shade( $kendo-button-bg, 3 ) !default;
 /// The base background gradient of hovered button.
 /// @group button
 $kendo-button-hover-gradient: null !default;
@@ -95,7 +98,7 @@ $kendo-button-active-bg: try-shade( $kendo-button-bg, 2 ) !default;
 $kendo-button-active-text: null !default;
 /// The base border color of active button.
 /// @group button
-$kendo-button-active-border: try-shade( $kendo-button-active-bg, 2 ) !default;
+$kendo-button-active-border: try-shade( $kendo-button-bg, 4 ) !default;
 /// The base background gradient of active button.
 /// @group button
 $kendo-button-active-gradient: null !default;
@@ -105,14 +108,14 @@ $kendo-button-active-shadow: null !default;
 
 /// The base background color of selected button.
 /// @group button
-$kendo-button-selected-bg: $kendo-button-active-bg !default;
-/// The base text color of selected button.
+$kendo-button-selected-bg: $primary !default;
+/// The text color of selected buttons.
 /// @group button
-$kendo-button-selected-text: $kendo-button-active-text !default;
-/// The base border color of selected button.
+$kendo-button-selected-text: contrast-wcag( $kendo-button-selected-bg ) !default;
+/// The border color of selected buttons.
 /// @group button
-$kendo-button-selected-border: $kendo-button-active-border !default;
-/// The base background gradient of selected button.
+$kendo-button-selected-border: $kendo-button-selected-bg !default;
+/// The background gradient of selected buttons.
 /// @group button
 $kendo-button-selected-gradient: $kendo-button-active-gradient !default;
 /// The base shadow of selected button.
@@ -151,6 +154,35 @@ $kendo-button-disabled-gradient: null !default;
 /// @group button
 $kendo-button-disabled-shadow: null !default;
 
+// Solid button
+$kendo-solid-button-gradient: $base-gradient !default;
+$kendo-solid-button-shade-function: "try-shade";
+$kendo-solid-button-shade-text-amount: 0 !default;
+$kendo-solid-button-shade-bg-amount: 0 !default;
+$kendo-solid-button-shade-border-amount: 2 !default;
+$kendo-solid-button-hover-shade-text-amount: null !default;
+$kendo-solid-button-hover-shade-bg-amount: 1 !default;
+$kendo-solid-button-hover-shade-border-amount: 3 !default;
+$kendo-solid-button-active-shade-text-amount: null !default;
+$kendo-solid-button-active-shade-bg-amount: 2 !default;
+$kendo-solid-button-active-shade-border-amount: 4 !default;
+$kendo-solid-button-shadow: true !default;
+$kendo-solid-button-shadow-blur: 4px !default;
+$kendo-solid-button-shadow-spread: 0px !default;
+$kendo-solid-button-shadow-opacity: .75 !default;
+
+// Outline button
+$kendo-outline-button-shadow: true !default;
+$kendo-outline-button-shadow-blur: 4px !default;
+$kendo-outline-button-shadow-spread: 0px !default;
+$kendo-outline-button-shadow-opacity: .75 !default;
+
+// Link button
+$kendo-link-button-shadow: true !default;
+$kendo-link-button-shadow-blur: 4px !default;
+$kendo-link-button-shadow-spread: 0px !default;
+$kendo-link-button-shadow-opacity: .75 !default;
+
 /// The overlay opacity of hovered flat button. Used to create background for the flat button.
 /// @group button
 $kendo-flat-button-hover-opacity: .08 !default;
@@ -166,8 +198,4 @@ $kendo-flat-button-selected-opacity: .2 !default;
 
 /// The color transition of the flat button.
 /// @group button
-$kendo-button-color-transition: color .2s ease-in-out !default;
-
-/// The base shadow of focused button group.
-/// @group button
-$kendo-button-group-focus-shadow: null !default;
+$kendo-button-transition: color .2s ease-in-out !default;

package/scss/card/_variables.scss

@@ -38,15 +38,15 @@ $card-footer-text: $header-text !default;
 $card-footer-border: $header-border !default;
 
 $card-title-margin-bottom: map-get( $spacing, sm ) !default;
-$card-title-font-size: $font-size-md !default;
-$card-title-font-family: inherit !default;
-$card-title-line-height: normal !default;
+$card-title-font-size: $h5-font-size !default;
+$card-title-font-family: null !default;
+$card-title-line-height: 1.25 !default;
 $card-title-font-weight: $font-weight-normal !default;
 $card-title-letter-spacing: null !default;
 
 $card-subtitle-margin-bottom: map-get( $spacing, sm ) !default;
 $card-subtitle-font-size: $font-size-sm !default;
-$card-subtitle-font-family: inherit !default;
+$card-subtitle-font-family: null !default;
 $card-subtitle-line-height: normal !default;
 $card-subtitle-font-weight: $font-weight-normal !default;
 $card-subtitle-letter-spacing: null !default;

package/scss/chat/_variables.scss

@@ -70,10 +70,3 @@ $chat-quick-reply-border: $primary !default;
 $chat-quick-reply-hover-bg: $primary !default;
 $chat-quick-reply-hover-text: $primary-contrast !default;
 $chat-quick-reply-hover-border: $primary !default;
-
-$chat-message-box-bg: $kendo-input-bg !default;
-$chat-message-box-text: $kendo-input-text !default;
-$chat-message-box-border: inherit !default;
-$chat-message-box-focus-shadow: 0 0 40px rgba( $kendo-input-text, .1 ) !default;
-
-$chat-toolbar-box-scroll-button-shadow: 0 0 20px 5px $chat-bg !default;

package/scss/checkbox/_index.scss

@@ -2,9 +2,10 @@
 
 
 // Dependencies
-@import "../common/_index.scss";
+@import "../typography/_variables.scss";
 @import "../list/_variables.scss";
 
+
 // Component
 @import "_variables.scss";
 @import "_layout.scss";

package/scss/checkbox/_variables.scss

@@ -1,126 +1,134 @@
 // Checkbox
 
-/// The sizes of checkbox.
+/// Border width of checkbox.
 /// @group checkbox
+$kendo-checkbox-border-width: 1px !default;
+
+// Checkbox sizes
 $kendo-checkbox-sizes: (
-    sm: map-get( $spacing, 3 ),
-    md: map-get( $spacing, 4 ),
-    lg: map-get( $spacing, 6 )
+    sm: (
+        size: map-get( $spacing, 3 ),
+        glyph-size: ( map-get( $spacing, 3 ) - map-get( $spacing, thin ) ),
+        ripple-size: map-get( $spacing, 3 ) * 3
+    ),
+    md: (
+        size: map-get( $spacing, 4 ),
+        glyph-size: ( map-get( $spacing, 4 ) - map-get( $spacing, thin ) ),
+        ripple-size: map-get( $spacing, 4 ) * 3
+    ),
+    lg: (
+        size: map-get( $spacing, 5 ),
+        glyph-size: ( map-get( $spacing, 5 ) - map-get( $spacing, thin ) ),
+        ripple-size: map-get( $spacing, 5 ) * 3
+    )
 ) !default;
 
-/// The  border width of checkbox.
-/// @group checkbox
-$kendo-checkbox-border-width: 1px !default;
-/// The line height of checkbox.
-/// @group checkbox
-$kendo-checkbox-line-height: calc( #{map-get( $kendo-checkbox-sizes, "md" )} + #{$kendo-checkbox-border-width} ) !default;
-
-/// The background of checkbox.
+/// Background color of checkbox.
 /// @group checkbox
-$kendo-checkbox-bg: $white !default;
-/// The background of checkbox.
+$kendo-checkbox-bg: $component-bg !default;
+/// Color of checkbox.
 /// @group checkbox
-$kendo-checkbox-text: transparent !default;
-/// The border of checkbox.
+$kendo-checkbox-text: null !default;
+/// Border color of checkbox.
 /// @group checkbox
-$kendo-checkbox-border: $base-border !default;
+$kendo-checkbox-border: $component-border !default;
 
-/// The background of hovered checkbox.
+/// Background color of hovered checkbox.
 /// @group checkbox
 $kendo-checkbox-hover-bg: null !default;
-/// The text of hovered checkbox.
+/// Color of hovered checkbox.
 /// @group checkbox
 $kendo-checkbox-hover-text: null !default;
-/// The border of hovered checkbox.
+/// Border color of hovered checkbox.
 /// @group checkbox
 $kendo-checkbox-hover-border: null !default;
 
-/// The background of checked checkbox.
+/// Background color of checked checkbox.
 /// @group checkbox
 $kendo-checkbox-checked-bg: $primary !default;
-/// The text of checked checkbox.
+/// Color of checked checkbox.
 /// @group checkbox
 $kendo-checkbox-checked-text: contrast-wcag( $kendo-checkbox-checked-bg ) !default;
-/// The border of checked checkbox.
+/// Border color of checked checkbox.
 /// @group checkbox
 $kendo-checkbox-checked-border: $kendo-checkbox-checked-bg !default;
 
-/// The background of indeterminate checkbox.
+/// Background color of indeterminate checkbox.
 /// @group checkbox
 $kendo-checkbox-indeterminate-bg: $kendo-checkbox-bg !default;
-/// The text of indeterminate checkbox.
+/// Color of indeterminate checkbox.
 /// @group checkbox
 $kendo-checkbox-indeterminate-text: $kendo-checkbox-checked-bg !default;
-/// The border of indeterminate checkbox.
+/// Border color of indeterminate checkbox.
 /// @group checkbox
 $kendo-checkbox-indeterminate-border: $kendo-checkbox-border !default;
 
-/// The border of focused checkbox.
+/// Border color of focused checkbox.
 /// @group checkbox
 $kendo-checkbox-focus-border: null !default;
-/// The shadow of focused checkbox.
+/// Box shadow of focused checkbox.
 /// @group checkbox
-$kendo-checkbox-focus-shadow: 0 0 0 2px rgba( 0, 0, 0, .06 ) !default;
-/// The border of focused and checked checkbox.
+$kendo-checkbox-focus-shadow: 0 0 0 2px rgba(0, 0, 0, .06) !default;
+/// Border color of focused and checked checkbox.
 /// @group checkbox
 $kendo-checkbox-focus-checked-border: null !default;
-/// The shadow of focused and checked checkbox.
+/// Box shadow of focused and checked checkbox.
 /// @group checkbox
 $kendo-checkbox-focus-checked-shadow: 0 0 0 2px rgba( $primary, .3 ) !default;
 
-/// The background of disabled checkbox.
+/// Background color of disabled checkbox.
 /// @group checkbox
 $kendo-checkbox-disabled-bg: null !default;
-/// The text of disabled checkbox.
+/// Color of disabled checkbox.
 /// @group checkbox
 $kendo-checkbox-disabled-text: null !default;
-/// The border of disabled checkbox.
+/// Border color of disabled checkbox.
 /// @group checkbox
 $kendo-checkbox-disabled-border: null !default;
 
-/// The background of disabled and checked checkbox.
+/// Background color of disabled and checked checkbox.
 /// @group checkbox
 $kendo-checkbox-disabled-checked-bg: null !default;
-/// The text of disabled and checked checkbox.
+/// Color of disabled and checked checkbox.
 /// @group checkbox
 $kendo-checkbox-disabled-checked-text: null !default;
-/// The border of disabled and checked checkbox.
+/// Border color of disabled and checked checkbox.
 /// @group checkbox
 $kendo-checkbox-disabled-checked-border: null !default;
 
-/// The background of invalid checkbox.
+/// Background color of invalid checkbox.
 /// @group checkbox
 $kendo-checkbox-invalid-bg: null !default;
-/// The text of invalid checkbox.
+/// Color of invalid checkbox.
 /// @group checkbox
 $kendo-checkbox-invalid-text: $invalid-text !default;
-/// The border of invalid checkbox.
+/// Border color of invalid checkbox.
 /// @group checkbox
 $kendo-checkbox-invalid-border: $invalid-border !default;
 
 
 // Checkbox indicator
 
-/// The icon type of checked checkbox.
+/// Type of checkbox indicator.
 /// @group checkbox
-$kendo-checkbox-icon-type: glyph !default;
+$kendo-checkbox-indicator-type: image !default;
 
-/// The glyph font family of checkbox.
+/// Glyph font family of checkbox indicator.
 /// @group checkbox
 $kendo-checkbox-glyph-font-family: "WebComponentsIcons", monospace !default;
-/// The glyph of checked checkbox.
+/// Glyph of checkbox indicator.
 /// @group checkbox
 $kendo-checkbox-checked-glyph: "\e118" !default;
-/// The glyph of indeterminate checkbox.
+/// Glyph of indeterminate checkbox indicator.
 /// @group checkbox
 $kendo-checkbox-indeterminate-glyph: "\e121" !default;
 
-/// The image of checked checkbox.
+/// Image of checked checkbox indicator.
 /// @group checkbox
-$kendo-checkbox-checked-image: null !default;
-/// The image of indeterminate checkbox.
+$kendo-checkbox-checked-image: escape-svg( url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='none' stroke='#{$kendo-checkbox-checked-text}' stroke-linecap='square' stroke-linejoin='square' stroke-width='2' d='M3,8 l3,3 l7-7'/></svg>") ) !default;
+/// Image image of checked checkbox indicator.
 /// @group checkbox
-$kendo-checkbox-indeterminate-image: null !default;
+$kendo-checkbox-indeterminate-image: escape-svg( url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='none' stroke='#{$kendo-checkbox-indeterminate-text}' stroke-linecap='square' stroke-linejoin='square' stroke-width='2' d='M4,8 h8'/></svg>") ) !default;
 
 
 // Checkbox label
@@ -132,39 +140,22 @@ $kendo-checkbox-label-margin-x: map-get( $spacing, 1 ) !default;
 
 // Checkbox list
 
-/// The list margin checkbox.
+/// Spacing between items of horizontal checkbox list.
 /// @group checkbox
-$kendo-checkbox-list-margin: 0px !default;
-/// The list padding checkbox.
-/// @group checkbox
-$kendo-checkbox-list-padding: 0px !default;
-/// The horizontal list item padding of checkbox.
+$kendo-checkbox-list-spacing: map-get( $spacing, 4 ) !default;
+/// Horizontal padding of checkbox list items.
 /// @group checkbox
 $kendo-checkbox-list-item-padding-x: 0px !default;
-/// The vertical list item padding of checkbox.
+/// Vertical padding of checkbox list items.
 /// @group checkbox
 $kendo-checkbox-list-item-padding-y: $kendo-list-item-padding-y-md !default;
-/// The horizontal margin of list item of checkbox.
-/// @group checkbox
-$kendo-checkbox-list-horizontal-item-margin-x: 32px !default;
 
 
 // Checkbox ripple
 
-/// The ripple size of checkbox.
+/// Background color of checkbox ripple.
 /// @group checkbox
-$kendo-checkbox-ripple-size: (
-    sm: (map-get( $kendo-checkbox-sizes, "sm" ) * 3),
-    md: (map-get( $kendo-checkbox-sizes, "md" ) * 3),
-    lg: (map-get( $kendo-checkbox-sizes, "lg" ) * 3)
-) !default;
-/// The ripple margin of checkbox.
-/// @group checkbox
-$kendo-checkbox-ripple-margin: (
-    sm: calc(-1 * (#{map-get( $kendo-checkbox-sizes, "sm" )} + 2 * #{$kendo-checkbox-border-width})),
-    md: calc(-1 * (#{map-get( $kendo-checkbox-sizes, "md" )} + 2 * #{$kendo-checkbox-border-width})),
-    lg: calc(-1 * (#{map-get( $kendo-checkbox-sizes, "lg" )} + 2 * #{$kendo-checkbox-border-width}))
-) !default;
-/// The ripple opacity of checkbox.
+$kendo-checkbox-ripple-bg: $kendo-checkbox-checked-bg !default;
+/// Opacity of checkbox ripple.
 /// @group checkbox
-$kendo-checkbox-ripple-opacity: .3 !default;
+$kendo-checkbox-ripple-opacity: .25 !default;

package/scss/chip/_index.scss

@@ -3,6 +3,7 @@
 
 // Dependencies
 @import "../icons/_index.scss";
+@import "../button/_variables.scss";
 
 
 // Component

package/scss/chip/_variables.scss

@@ -43,50 +43,50 @@ $kendo-chip-sizes: (
     lg: ( font-size: $kendo-chip-font-size-lg, line-height: $kendo-chip-line-height-lg, padding: $kendo-chip-padding-x-lg )
 ) !default;
 
+/// The base background of the chip.
+/// @group chip
+$kendo-chip-base-bg: if( $dark-theme, contrast-wcag($kendo-button-text), $kendo-button-text ) !default;
+
 /// Theme colors map for the chip.
 /// @group chip
 $kendo-chip-theme-colors: (
-    "base": $component-text,
+    "base": $kendo-chip-base-bg,
     "error": map-get( $theme-colors, "error" ),
     "info": map-get( $theme-colors, "info" ),
     "warning": map-get( $theme-colors, "warning" ),
     "success": map-get( $theme-colors, "success" )
 ) !default;
 
-/// The base background of the chip.
-/// @group chip
-$kendo-chip-base-bg: $component-text !default;
-
 /// The base background color of solid chip.
 /// @group chip
-$kendo-chip-solid-bg: rgba( $kendo-chip-base-bg, .08 ) !default;
+$kendo-chip-solid-bg: try-tint( $kendo-chip-base-bg, 92% ) !default;
 /// The base text color of solid chip.
 /// @group chip
 $kendo-chip-solid-text: $kendo-chip-base-bg !default;
 /// The base border color of solid chip.
 /// @group chip
-$kendo-chip-solid-border: rgba( $kendo-chip-solid-bg, .3 ) !default;
+$kendo-chip-solid-border: try-tint( $kendo-chip-base-bg, 70% ) !default;
 /// The base shadow of solid chip.
 /// @group chip
-$kendo-chip-solid-shadow: 0 0 0 2px rgba( $kendo-chip-solid-bg, .16 ) !default;
+$kendo-chip-solid-shadow: 0 0 0 2px rgba( $kendo-chip-base-bg, .16 ) !default;
 
 /// The base background color of focused solid chip.
 /// @group chip
-$kendo-chip-solid-focus-bg: rgba( $kendo-chip-solid-bg, .08 ) !default;
+$kendo-chip-solid-focus-bg: try-tint( $kendo-chip-base-bg, 92% ) !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: rgba( $kendo-chip-solid-bg, .16 ) !default;
+$kendo-chip-solid-hover-bg: try-tint( $kendo-chip-base-bg, 84% ) !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: rgba( $kendo-chip-solid-bg, .24 ) !default;
+$kendo-chip-solid-selected-bg: try-tint( $kendo-chip-base-bg, 76% ) !default;
 /// The base text color of selected solid chip.
 /// @group chip
 $kendo-chip-solid-selected-text: null !default;
@@ -121,7 +121,7 @@ $kendo-chip-outline-selected-text: $kendo-chip-outline-hover-text !default;
 // Chip List
 
 /// The sizes of the chip list.
-/// @group chip-list
+/// @group chip
 $kendo-chip-list-sizes: (
     sm: map-get( $spacing, 1 ),
     md: map-get( $spacing, 2 ),

package/scss/color-preview/_variables.scss

@@ -11,3 +11,4 @@ $color-preview-no-color-text: $error !default;
 $color-preview-no-color-border: null !default;
 
 $color-preview-no-color-image: escape-svg( url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='20' height='20' version='1.1'><line x1='0' x2='20' y1='0' y2='20' stroke='#{$color-preview-no-color-text}' stroke-width='1'/></svg>") ) !default;
+$color-preview-transparent-color-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAuSURBVHgBxYyxDQAwDMJIL+YT+DjtzFRliUfLcklqBCRT4eCTxbD6kdL2/LgYXqpvCbs3kBv/AAAAAElFTkSuQmCC") !default;

package/scss/coloreditor/_variables.scss

@@ -18,9 +18,9 @@ $coloreditor-header-padding-y: $coloreditor-spacer !default;
 $coloreditor-header-padding-x: $coloreditor-header-padding-y !default;
 $coloreditor-header-actions-gap: ( $coloreditor-spacer / 1.5 ) !default;
 
-$coloreditor-preview-gap: ( $coloreditor-spacer / 4 ) !default;
-$coloreditor-color-preview-width: 34px !default;
-$coloreditor-color-preview-height: 14px !default;
+$coloreditor-preview-gap: map-get( $spacing, 1 ) !default;
+$coloreditor-color-preview-width: 32px !default;
+$coloreditor-color-preview-height: 12px !default;
 
 $coloreditor-views-padding-y: $coloreditor-spacer !default;
 $coloreditor-views-padding-x: $coloreditor-views-padding-y !default;

package/scss/colorpicker/_index.scss

@@ -2,8 +2,7 @@
 
 
 // Dependencies
-@import "../common/_index.scss";
-@import "../utils/_flex.scss";
+@import "../input/_index.scss";
 @import "../button/_index.scss";
 @import "../colorpalette/_index.scss";
 @import "../colorgradient/_index.scss";

package/scss/colorpicker/_variables.scss

@@ -1,20 +1 @@
-// Colorpicker
-$colorpicker-font-family: $font-family !default;
-$colorpicker-font-size: $font-size !default;
-$colorpicker-line-height: $line-height !default;
-
-$colorpicker-bg: $kendo-button-bg !default;
-$colorpicker-text: $kendo-button-text !default;
-$colorpicker-border: $kendo-button-border !default;
-$colorpicker-gradient: $kendo-button-gradient !default;
-
-$colorpicker-hovered-bg: $kendo-button-hover-bg !default;
-$colorpicker-hovered-text: $kendo-button-hover-text !default;
-$colorpicker-hovered-border: $kendo-button-hover-border !default;
-$colorpicker-hovered-gradient: $kendo-button-hover-gradient !default;
-
-$colorpicker-focused-bg: null !default;
-$colorpicker-focused-text: null !default;
-$colorpicker-focused-border: null !default;
-$colorpicker-focused-gradient: null !default;
-$colorpicker-focused-shadow: $kendo-button-focus-shadow !default;
+// Color picker