@progress/kendo-theme-classic 4.41.3-dev.0 → 4.42.0-dev.0

package/modules/@progress/kendo-theme-default/scss/utils/_index.scss

@@ -20,6 +20,7 @@
 @import "_spacer.scss";
 @import "_table-layout.scss";
 @import "_text.scss";
+@import "_theme-colors.scss";
 @import "_touch-action.scss";
 @import "_transform.scss";
 @import "_user-select.scss";

package/modules/@progress/kendo-theme-default/scss/utils/_position.scss

@@ -110,7 +110,7 @@
     /// @name k-pos-middle-center
     /// @description This is equivalent to `top: 50%; left: 50%; transform: translate(-50%, -50%);`.
     /// @group position
-    .k-middle-center ,
+    .k-middle-center,
     .k-pos-middle-center {
         top: 50%;
         left: 50%;
@@ -120,7 +120,7 @@
     /// @name k-pos-middle-end
     /// @description This is equivalent to `top: 50%; right: 0; transform: translateY(-50%);`.
     /// @group position
-    .k-middle-end ,
+    .k-middle-end,
     .k-pos-middle-end {
         top: 50%;
         right: 0;

package/modules/@progress/kendo-theme-default/scss/utils/_spacing.scss

@@ -111,4 +111,28 @@
         }
     }
 
+    // @name k-gap-VALUE
+    // @description This is equivalent to `gap: VALUE;`. Gap area between both rows and columns in grid and flexbox layouts.
+    // @group spacing
+
+    // @name k-gap-x-VALUE
+    // @description This is equivalent to `column-gap: VALUE;`. Gap area between columns in grid and flexbox layouts.
+    // @group spacing
+
+    // @name k-gap-y-VALUE
+    // @description This is equivalent to `row-gap: VALUE;`. Gap area between rows in grid and flexbox layouts.
+    // @group spacing
+
+    // Gap
+    .k-no-gap { gap: 0 !important; }
+
+    @each $size, $val in $spacing {
+        .k-gap-#{$size}     { gap: $val; }
+        .k-gap-x-#{$size}   { column-gap: $val; }
+        .k-gap-y-#{$size}   { row-gap: $val; }
+
+        .\!k-gap-#{$size}   { gap: $val !important; }
+        .\!k-gap-x-#{$size} { column-gap: $val !important; }
+        .\!k-gap-y-#{$size} { row-gap: $val !important; }
+    }
 }

package/modules/@progress/kendo-theme-default/scss/utils/_table-layout.scss

@@ -1,6 +1,7 @@
 @include exports( "utils/table-layout" ) {
 
     // sass-lint:disable-block no-important
+    // stylelint-disable block-opening-brace-space-before
 
     // Table-layout documentation sourced from https://developer.mozilla.org/en-US/docs/Web/CSS/table-layout.
 

package/modules/@progress/kendo-theme-default/scss/utils/_text.scss

@@ -1,5 +1,7 @@
 @include exports( "utils/text" ) {
 
+    // stylelint-disable block-opening-brace-space-before
+
     // White-space documentation sourced from https://developer.mozilla.org/en-US/docs/Web/CSS/white-space.
     // Text-align documentation sourced from https://developer.mozilla.org/en-US/docs/Web/CSS/text-align.
     // Text-transform documentation sourced from https://developer.mozilla.org/en-US/docs/Web/CSS/text-transform.

package/modules/@progress/kendo-theme-default/scss/{common/_decoration.scss → utils/_theme-colors.scss}

@@ -1,16 +1,14 @@
 @include exports( "common/decoration/color" ) {
 
     // sass-lint:disable-block no-important
+    // stylelint-disable block-opening-brace-space-before
 
-    .k-text-primary     { color: $primary !important; }
-    .k-text-info        { color: $info !important; }
-    .k-text-success     { color: $success !important; }
-    .k-text-warning     { color: $warning !important; }
-    .k-text-error       { color: $error !important; }
-
-    .k-text-base        { color: $base-text; }
+    .k-text-base,
+    .k-color-base {
+        color: $base-text;
+    }
 
-    .k-color-inherit    { color: inherit; }
+    .k-color-inherit { color: inherit; }
 
     @each $name, $color in $theme-colors {
         .k-text-#{$name},
@@ -26,11 +24,11 @@
 
     // sass-lint:disable-block no-important
 
-    .k-bg-primary       { background-color: $primary !important; }
-    .k-bg-info          { background-color: $info !important; }
-    .k-bg-success       { background-color: $success !important; }
-    .k-bg-warning       { background-color: $warning !important; }
-    .k-bg-error         { background-color: $error !important; }
+    @each $name, $bg-color in $theme-colors {
+        .k-bg-#{$name} {
+            background-color: $bg-color !important;
+        }
+    }
 
 }
 
@@ -43,12 +41,11 @@
 
 @include exports( "common/decoration/variant" ) {
 
-    .k-state-primary    { @include variant( $primary ); }
-    .k-state-info       { @include variant( $info ); }
-    .k-state-success    { @include variant( $success ); }
-    .k-state-warning    { @include variant( $warning ); }
-    .k-state-error      { @include variant( $error ); }
-
+    @each $name, $variant in $theme-colors {
+        .k-state-#{$name} {
+            @include variant( $variant );
+        }
+    }
 }
 
 

package/modules/@progress/kendo-theme-default/scss/utils/_transform.scss

@@ -1,5 +1,7 @@
 @include exports( "utils/transform" ) {
 
+    // stylelint-disable block-opening-brace-space-before
+
     // Flip
 
     /// @name k-flip-h

package/modules/@progress/kendo-theme-default/scss/window/_layout.scss

@@ -18,10 +18,10 @@
         -webkit-tap-highlight-color: $rgba-transparent;
 
         // overlay during dragging
-        //.k-overlay {
+        // .k-overlay {
         //    position: absolute;
         //    opacity: 0;
-        //}
+        // }
     }
     .k-window.k-window-maximized {
         max-width: 100vw;
@@ -64,8 +64,7 @@
         cursor: default;
         flex: 1;
         display: flex;
-        flex-direction: row;
-        flex-wrap: nowrap;
+        flex-flow: row nowrap;
 
         &::before {
             content: "\200b";

package/modules/@progress/kendo-theme-default/scss/window/_variables.scss

@@ -37,9 +37,8 @@ $window-titlebar-gradient: null !default;
 $window-shadow: 0 3px 3px 0 rgba(0, 0, 0, .06) !default;
 $window-focused-shadow: 1px 1px 7px 1px rgba(0, 0, 0, .3) !default;
 
-$window-sizes: () !default;
-$window-sizes: map-merge((
-        sm: 300px,
-        md: 800px,
-        lg: 1200px
-), $window-sizes);
+$window-sizes: (
+    sm: 300px,
+    md: 800px,
+    lg: 1200px
+) !default;

package/modules/@progress/kendo-theme-default/scss/wizard/_layout.scss

@@ -96,9 +96,7 @@
         }
 
         .k-wizard-content {
-            flex-grow: 1;
-            flex-shrink: 1;
-            flex-basis: auto;
+            flex: 1 1 0%;
         }
 
         .k-wizard-steps {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@progress/kendo-theme-classic",
   "description": "Sass port of less based themes for Kendo UI theme",
-  "version": "4.41.3-dev.0",
+  "version": "4.42.0-dev.0",
   "author": "Progress",
   "license": "Apache-2.0",
   "keywords": [
@@ -50,7 +50,7 @@
     "postpublish": "rm -rf modules && git checkout scss"
   },
   "dependencies": {
-    "@progress/kendo-theme-default": "^4.41.3-dev.0"
+    "@progress/kendo-theme-default": "^4.42.0-dev.0"
   },
-  "gitHead": "4c5f70ca87b87ff582d9b0968b78fd01eddbc07a"
+  "gitHead": "cb64d8c6520246fd2807ec4cd455555d5fac8d82"
 }

package/scss/_variables.scss

@@ -187,9 +187,7 @@ $light: #ebebeb !default;
 $inverse: if( $dark-theme, $light, $dark ) !default;
 
 
-$theme-colors: () !default;
-// sass-lint:disable indentation
-$theme-colors: map-merge((
+$theme-colors: (
     "primary": $primary,
     "secondary": $secondary,
     "tertiary": $tertiary,
@@ -200,8 +198,7 @@ $theme-colors: map-merge((
     "dark": $dark,
     "light": $light,
     "inverse": $inverse
-), $theme-colors);
-// sass-lint:enable indentation
+) !default;
 
 // Cursor utility classes
 $cursors: ( auto, default, none, context-menu, help, pointer, progress, wait, cell, crosshair, text,
@@ -211,14 +208,14 @@ $cursors: ( auto, default, none, context-menu, help, pointer, progress, wait, ce
 
 
 // Color constants
-$rgba-transparent: rgba( 0, 0, 0, 0 );
+$rgba-transparent: rgba( 0, 0, 0, 0 ); // stylelint-disable-line
 
-$gradient-transparent-to-black: rgba( black, 0), black;
-$gradient-transparent-to-white: rgba( white, 0), white;
-$gradient-black-to-transparent: black, rgba( black, 0);
-$gradient-white-to-transparent: white, rgba( white, 0);
+$gradient-transparent-to-black: rgba( black, 0), black; // stylelint-disable-line
+$gradient-transparent-to-white: rgba( white, 0), white; // stylelint-disable-line
+$gradient-black-to-transparent: black, rgba( black, 0); // stylelint-disable-line
+$gradient-white-to-transparent: white, rgba( white, 0); // stylelint-disable-line
 
-$gradient-rainbow: #ff0000, #ffff00, #00ff00, #00ffff, #0000ff, #ff00ff, #ff0000;
+$gradient-rainbow: #ff0000, #ffff00, #00ff00, #00ffff, #0000ff, #ff00ff, #ff0000; // stylelint-disable-line
 
 // Root styles
 $body-bg: $white !default;
@@ -417,10 +414,7 @@ $grid-gap: 10px !default;
 
 
 // Disabled Styling maps
-$disabled-styling: () !default;
-// sass-lint:disable indentation
-$disabled-styling: map-merge((
+$disabled-styling: (
     opacity: $disabled-opacity,
     filter: $disabled-filter
-), $disabled-styling);
-// sass-lint:enable indentation
+) !default;

package/scss/all.scss

@@ -49,6 +49,10 @@
 
 // Inputs
 @import "autocomplete/_index.scss";
+@import "color-preview/_index.scss";
+@import "colorpalette/_index.scss";
+@import "colorgradient/_index.scss";
+@import "coloreditor/_index.scss";
 @import "colorpicker/_index.scss";
 @import "combobox/_index.scss";
 @import "datetime/_index.scss";

package/scss/appbar/_variables.scss

@@ -18,5 +18,5 @@ $appbar-light-text: contrast-wcag( $light ) !default;
 $appbar-dark-bg: $dark !default;
 $appbar-dark-text: contrast-wcag( $dark ) !default;
 
-$appbar-box-shadow: 0px 1px 1px rgba(0, 0, 0, .16);
-$appbar-bottom-box-shadow:  0px -1px 1px rgba(0, 0, 0, .16);
+$appbar-box-shadow: 0px 1px 1px rgba(0, 0, 0, .16) !default;
+$appbar-bottom-box-shadow: 0px -1px 1px rgba(0, 0, 0, .16) !default;

package/scss/avatar/_variables.scss

@@ -7,15 +7,11 @@ $avatar-font-size: $font-size !default;
 $avatar-line-height: $line-height !default;
 
 
-$avatar-sizes: () !default;
-// sass-lint:disable indentation
-$avatar-sizes: map-merge((
+$avatar-sizes: (
     sm: map-get( $spacing, 4 ),
     md: map-get( $spacing, 8 ),
     lg: map-get( $spacing, 16 )
-), $avatar-sizes);
-// sass-lint:enable indentation
+) !default;
 
 
-$avatar-theme-colors: () !default;
-$avatar-theme-colors: map-merge( $avatar-theme-colors, $theme-colors );
+$avatar-theme-colors: $theme-colors !default;

package/scss/badge/_variables.scss

@@ -22,15 +22,15 @@ $badge-line-height-lg: 1 !default;
 
 $badge-fixed-size: 20px !default;
 $badge-calc-size: calc( #{$badge-line-height * 1em} + #{$badge-padding-y * 2} + #{$badge-border-width * 2} ) !default;
-$badge-size: if( $use-calc-badge-size, $badge-calc-size, $badge-fixed-size );
-$badge-dot-size: 10px;
+$badge-size: if( $use-calc-badge-size, $badge-calc-size, $badge-fixed-size ) !default;
+$badge-dot-size: 10px !default;
 
 $badge-fixed-size-sm: 16px !default;
 $badge-calc-size-sm: calc( #{$badge-line-height-sm * 1em} + #{$badge-padding-y-sm * 2} + #{$badge-border-width-sm * 2} ) !default;
-$badge-size-sm: if( $use-calc-badge-size, $badge-calc-size-sm, $badge-fixed-size-sm );
-$badge-dot-size-sm: 6px;
+$badge-size-sm: if( $use-calc-badge-size, $badge-calc-size-sm, $badge-fixed-size-sm ) !default;
+$badge-dot-size-sm: 6px !default;
 
 $badge-fixed-size-lg: 26px !default;
 $badge-calc-size-lg: calc( #{$badge-line-height-lg * 1em} + #{$badge-padding-y-lg * 2} + #{$badge-border-width-lg * 2} ) !default;
-$badge-size-lg: if( $use-calc-badge-size, $badge-calc-size-lg, $badge-fixed-size-lg );
-$badge-dot-size-lg: 12px;
+$badge-size-lg: if( $use-calc-badge-size, $badge-calc-size-lg, $badge-fixed-size-lg ) !default;
+$badge-dot-size-lg: 12px !default;

package/scss/button/_index.scss

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

package/scss/captcha/_index.scss

@@ -6,7 +6,9 @@
 @import "../common/_index.scss";
 @import "../icons/_index.scss";
 @import "../input/_index.scss";
+@import "../button/_index.scss";
 @import "../textbox/_index.scss";
+@import "../slider/_index.scss";
 
 
 // Component

package/scss/captcha/_variables.scss

@@ -8,7 +8,7 @@ $captcha-line-height: $line-height !default;
 $captcha-gap: $captcha-spacer !default;
 $captcha-bg: $component-bg !default;
 $captcha-text: $component-bg !default;
-$captcha-border: $component-bg  !default;
+$captcha-border: $component-bg !default;
 
 $captcha-image-wrap-gap: $captcha-spacer !default;
 

package/scss/card/_variables.scss

@@ -54,7 +54,7 @@ $card-subtitle-text: $subtle-text !default;
 
 $card-img-max-width: 100px !default;
 $card-avatar-size: 45px !default;
-$card-avatar-spacing:  $card-header-padding-x !default;
+$card-avatar-spacing: $card-header-padding-x !default;
 
 $card-actions-padding-x: map-get( $spacing, 2 ) !default;
 $card-actions-padding-y: map-get( $spacing, 2 ) !default;

package/scss/chip/_variables.scss

@@ -21,74 +21,165 @@ $chip-remove-icon-font-size: 14px !default;
 
 $chip-avatar-size: 16px !default;
 
-$chip-filled-bg: #ebebeb !default;
-$chip-filled-text: $body-text !default;
-$chip-filled-border: rgba(0, 0, 0, .15) !default;
+$chip-base-bg: $body-text !default;
 
-$chip-filled-hovered-bg: #e0e0e0 !default;
-$chip-filled-hovered-border: rgba(0, 0, 0, .2) !default;
+$chip-solid-bg: rgba( $chip-base-bg, .08 ) !default;
+$chip-solid-text: $chip-base-bg !default;
+$chip-solid-border: rgba( $chip-base-bg, .15 ) !default;
 
-$chip-filled-focused-bg: $chip-filled-bg !default;
-$chip-filled-focused-shadow: 0 0 0 2px rgba(0, 0, 0, .08) !default;
+$chip-solid-hover-bg: rgba( $chip-base-bg, .16 ) !default;
+$chip-solid-hover-text: null !default;
+$chip-solid-hover-border: null !default;
 
-$chip-filled-selected-bg: #d6d6d6 !default;
-$chip-filled-selected-border: rgba(0, 0, 0, .3) !default;
+$chip-solid-focus-bg: $chip-solid-bg !default;
+$chip-solid-focus-shadow: 0 0 0 2px rgba( $chip-solid-bg, .08 ) !default;
 
-$chip-filled-success-bg: rgba($success, .12) !default;
-$chip-filled-success-text: $success !default;
-$chip-filled-success-border: rgba($success, .3) !default;
+$chip-solid-selected-bg: rgba( $chip-base-bg, .24 ) !default;
+$chip-solid-selected-border: null !default;
 
-$chip-filled-warning-bg: rgba($warning, .12) !default;
-$chip-filled-warning-text: $warning !default;
-$chip-filled-warning-border: rgba($warning, .3) !default;
+$chip-solid-success-bg: rgba($success, .08) !default;
+$chip-solid-success-text: $success !default;
+$chip-solid-success-border: rgba( $success, .3 ) !default;
 
-$chip-filled-error-bg: rgba($error, .12) !default;
-$chip-filled-error-text: $error !default;
-$chip-filled-error-border: rgba($error, .3) !default;
+$chip-solid-success-hover-bg: rgba( $success, .16 ) !default;
+$chip-solid-success-hover-text: null !default;
+$chip-solid-success-hover-border: null !default;
 
-$chip-filled-info-bg: rgba($info, .12) !default;
-$chip-filled-info-text: $info !default;
-$chip-filled-info-border: rgba($info, .3) !default;
+$chip-solid-success-focus-bg: null !default;
+$chip-solid-success-focus-text: null !default;
+$chip-solid-success-focus-border: null !default;
 
-$chip-outline-bg: transparent !default;
-$chip-outline-text: #6c757d !default;
-$chip-outline-border: $body-text !default;
+$chip-solid-success-selected-bg: rgba( $success, .24 ) !default;
+$chip-solid-success-selected-text: null !default;
+$chip-solid-success-selected-border: null !default;
 
-$chip-outline-hovered-bg: $body-text !default;
-$chip-outline-hovered-text: #ffffff !default;
-$chip-outline-hovered-border: rgba(0, 0, 0, .2) !default;
+$chip-solid-warning-bg: rgba( $warning, .08 ) !default;
+$chip-solid-warning-text: $warning !default;
+$chip-solid-warning-border: rgba( $warning, .3 ) !default;
 
-$chip-outline-focused-bg: $chip-outline-bg !default;
-$chip-outline-focused-text: $chip-outline-text !default;
-$chip-outline-focused-border: $chip-outline-border !default;
-$chip-outline-focused-shadow: 0 0 0 2px rgba(0, 0, 0, .08) !default;
+$chip-solid-warning-hover-bg: rgba( $warning, .16 ) !default;
+$chip-solid-warning-hover-text: null !default;
+$chip-solid-warning-hover-border: null !default;
 
-$chip-outline-selected-bg: $body-text !default;
-$chip-outline-selected-text: #ffffff !default;
+$chip-solid-warning-focus-bg: null !default;
+$chip-solid-warning-focus-text: null !default;
+$chip-solid-warning-focus-border: null !default;
 
-$chip-outline-success-bg: transparent !default;
+$chip-solid-warning-selected-bg: rgba( $warning, .24 ) !default;
+$chip-solid-warning-selected-text: null !default;
+$chip-solid-warning-selected-border: null !default;
+
+$chip-solid-error-bg: rgba( $error, .08 ) !default;
+$chip-solid-error-text: $error !default;
+$chip-solid-error-border: rgba( $error, .3 ) !default;
+
+$chip-solid-error-hover-bg: rgba( $error, .16 ) !default;
+$chip-solid-error-hover-text: null !default;
+$chip-solid-error-hover-border: null !default;
+
+$chip-solid-error-focus-bg: null !default;
+$chip-solid-error-focus-text: null !default;
+$chip-solid-error-focus-border: null !default;
+
+$chip-solid-error-selected-bg: rgba( $error, .24 ) !default;
+$chip-solid-error-selected-text: null !default;
+$chip-solid-error-selected-border: null !default;
+
+$chip-solid-info-bg: rgba( $info, .08 ) !default;
+$chip-solid-info-text: $info !default;
+$chip-solid-info-border: rgba( $info, .3 ) !default;
+
+$chip-solid-info-hover-bg: rgba( $info, .16 ) !default;
+$chip-solid-info-hover-text: null !default;
+$chip-solid-info-hover-border: null !default;
+
+$chip-solid-info-focus-bg: null !default;
+$chip-solid-info-focus-text: null !default;
+$chip-solid-info-focus-border: null !default;
+
+$chip-solid-info-selected-bg: rgba( $info, .24 ) !default;
+$chip-solid-info-selected-text: null !default;
+$chip-solid-info-selected-border: null !default;
+
+$chip-outline-bg: $body-bg !default;
+$chip-outline-text: $chip-base-bg !default;
+$chip-outline-border: $chip-base-bg !default;
+
+$chip-outline-hover-bg: $chip-base-bg !default;
+$chip-outline-hover-text: contrast-wcag( $chip-outline-hover-bg ) !default;
+$chip-outline-hover-border: null !default;
+
+$chip-outline-focus-bg: null !default;
+$chip-outline-focus-text: null !default;
+$chip-outline-focus-border: null !default;
+$chip-outline-focus-shadow: 0 0 0 2px rgba(0, 0, 0, .08) !default;
+
+$chip-outline-selected-bg: $chip-outline-hover-bg !default;
+$chip-outline-selected-text: $chip-outline-hover-text !default;
+
+$chip-outline-success-bg: null !default;
 $chip-outline-success-text: $success !default;
-$chip-outline-success-border: rgba($success, .54) !default;
+$chip-outline-success-border: $success !default;
+
+$chip-outline-success-hover-bg: $success !default;
+$chip-outline-success-hover-text: contrast-wcag( $chip-outline-success-hover-bg ) !default;
+$chip-outline-success-hover-border: null !default;
+
+$chip-outline-success-focus-bg: null !default;
+$chip-outline-success-focus-text: null !default;
+$chip-outline-success-focus-border: null !default;
 
-$chip-outline-warning-bg: transparent !default;
+$chip-outline-success-selected-bg: $chip-outline-success-hover-bg !default;
+$chip-outline-success-selected-text: $chip-outline-success-hover-text !default;
+$chip-outline-success-selected-border: null !default;
+
+$chip-outline-warning-bg: null !default;
 $chip-outline-warning-text: $warning !default;
-$chip-outline-warning-border: rgba($warning, .54) !default;
+$chip-outline-warning-border: $warning !default;
+
+$chip-outline-warning-hover-bg: $warning !default;
+$chip-outline-warning-hover-text: contrast-wcag( $chip-outline-warning-hover-bg ) !default;
+$chip-outline-warning-hover-border: null !default;
+
+$chip-outline-warning-focus-bg: null !default;
+$chip-outline-warning-focus-text: null !default;
+$chip-outline-warning-focus-border: null !default;
 
-$chip-outline-error-bg: transparent !default;
+$chip-outline-warning-selected-bg: $chip-outline-warning-hover-bg !default;
+$chip-outline-warning-selected-text: $chip-outline-warning-hover-text !default;
+$chip-outline-warning-selected-border: null !default;
+
+$chip-outline-error-bg: null !default;
 $chip-outline-error-text: $error !default;
-$chip-outline-error-border: rgba($error, .54) !default;
+$chip-outline-error-border: $error !default;
+
+$chip-outline-error-hover-bg: $error !default;
+$chip-outline-error-hover-text: contrast-wcag( $chip-outline-error-hover-bg ) !default;
+$chip-outline-error-hover-border: null !default;
+
+$chip-outline-error-focus-bg: null !default;
+$chip-outline-error-focus-text: null !default;
+$chip-outline-error-focus-border: null !default;
 
-$chip-outline-info-bg: transparent !default;
+$chip-outline-error-selected-bg: $chip-outline-error-hover-bg !default;
+$chip-outline-error-selected-text: $chip-outline-error-hover-text !default;
+$chip-outline-error-selected-border: null !default;
+
+$chip-outline-info-bg: null !default;
 $chip-outline-info-text: $info !default;
-$chip-outline-info-border: rgba($info, .54) !default;
+$chip-outline-info-border: $info !default;
+
+$chip-outline-info-hover-bg: $info !default;
+$chip-outline-info-hover-text: contrast-wcag( $chip-outline-info-hover-bg ) !default;
+$chip-outline-info-hover-border: null !default;
 
-$chip-filled-single-selected-bg: rgba($primary, .08) !default;
-$chip-filled-single-selected-text: $primary !default;
-$chip-filled-single-selected-border: rgba($primary, .2) !default;
+$chip-outline-info-focus-bg: null !default;
+$chip-outline-info-focus-text: null !default;
+$chip-outline-info-focus-border: null !default;
 
-$chip-outline-single-selected-bg: transparent !default;
-$chip-outline-single-selected-text: $primary !default;
-$chip-outline-single-selected-border: rgba($primary, .2) !default;
+$chip-outline-info-selected-bg: $chip-outline-info-hover-bg !default;
+$chip-outline-info-selected-text: $chip-outline-info-hover-text !default;
+$chip-outline-info-selected-border: null !default;
 
 $chip-multiple-selected-icon-bg: rgba(0, 0, 0, .36) !default;
 $chip-multiple-selected-icon-text: #ffffff !default;

package/scss/color-preview/_index.scss

@@ -0,0 +1,11 @@
+@import "../core/_index.scss";
+
+
+// Dependencies
+
+
+// Component
+@import "../colorgradient/images/alpha-slider-bgr.scss";
+@import "_variables.scss";
+@import "_layout.scss";
+@import "_theme.scss";

package/scss/color-preview/_layout.scss

@@ -0,0 +1 @@
+@import "../../modules/@progress/kendo-theme-default/scss/color-preview/_layout.scss";

package/scss/color-preview/_theme.scss

@@ -0,0 +1 @@
+@import "../../modules/@progress/kendo-theme-default/scss/color-preview/_theme.scss";

package/scss/color-preview/_variables.scss

@@ -0,0 +1,13 @@
+// Color Preview
+$color-preview-border-radius: $border-radius !default;
+$color-preview-border-width: 1px !default;
+$color-preview-bg: null !default;
+$color-preview-text: null !default;
+$color-preview-border: $component-border !default;
+$color-preview-hover-border: $hovered-border !default;
+
+$color-preview-no-color-bg: $white !default;
+$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;

package/scss/coloreditor/_index.scss

@@ -0,0 +1,15 @@
+@import "../core/_index.scss";
+
+
+// Dependencies
+@import "../common/_index.scss";
+@import "../action-buttons/_index.scss";
+@import "../color-preview/_index.scss";
+@import "../colorpalette/_index.scss";
+@import "../colorgradient/_index.scss";
+
+
+// Component
+@import "_variables.scss";
+@import "_layout.scss";
+@import "_theme.scss";

package/scss/coloreditor/_layout.scss

@@ -0,0 +1 @@
+@import "../../modules/@progress/kendo-theme-default/scss/coloreditor/_layout.scss";

package/scss/coloreditor/_theme.scss

@@ -0,0 +1 @@
+@import "../../modules/@progress/kendo-theme-default/scss/coloreditor/_theme.scss";