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

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

@@ -75,6 +75,8 @@
         .k-button {
             margin: 0;
             padding: 0;
+            width: auto;
+            height: auto;
             border-radius: 100%;
             line-height: 1;
             box-shadow: none;

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

@@ -17,11 +17,6 @@
             border-width: 0;
         }
 
-        &.k-colorpicker-popup {
-            display: flex;
-            align-items: center;
-        }
-
         .k-item {
             outline: none;
         }

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

@@ -126,6 +126,9 @@
             }
         }
 
+        &.k-scheduler-timeline-view .k-scheduler-body .k-scheduler-cell {
+            flex-basis: auto;
+        }
 
 
         .k-more-events {

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

@@ -2,4 +2,4 @@
 
 
 // Dependencies
-@import "../common/_decoration.scss";
+@import "../utils/_theme-colors.scss";

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

@@ -33,12 +33,21 @@
         top: ( border-top-left-radius, border-top-right-radius ),
         right: ( border-top-right-radius, border-bottom-right-radius ),
         bottom: ( border-bottom-left-radius, border-bottom-right-radius ),
-        left: ( border-bottom-left-radius, border-top-left-radius )
+        left: ( border-bottom-left-radius, border-top-left-radius ),
+        top-left: border-top-left-radius,
+        top-right: border-top-right-radius,
+        bottom-left: border-bottom-left-radius,
+        bottom-right: border-bottom-right-radius
     ) !default;
 
     $utils-border-radius: (
         default: map-get( $spacing, 1 ),
-        0: 0
+        0: 0,
+        sm: ( map-get( $spacing, 1 ) / 4 ),
+        md: ( map-get( $spacing, 1 ) / 2 ),
+        lg: map-get( $spacing, 1 ),
+        circle: 50%,
+        pill: 9999px
     ) !default;
 
 

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/_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/{common/_decoration.scss → utils/_theme-colors.scss}

@@ -3,15 +3,12 @@
     // 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},
@@ -27,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;
+        }
+    }
 
 }
 
@@ -44,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/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.1",
+  "version": "4.42.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.1"
+    "@progress/kendo-theme-default": "^4.42.0"
   },
-  "gitHead": "17e8e18bbe2c47b1f86efebea9b2b2d3f4cd55ce"
+  "gitHead": "9ec24b9a743862f1443d2f4acffb203dbbe90215"
 }

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/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/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";

package/scss/coloreditor/_variables.scss

@@ -0,0 +1,27 @@
+// Coloreditor/FlatColorPicker
+$coloreditor-spacer: map-get( $spacing, 3 ) !default;
+
+$coloreditor-min-width: 272px !default;
+$coloreditor-border-width: 1px !default;
+$coloreditor-border-radius: $border-radius !default;
+$coloreditor-font-family: $font-family !default;
+$coloreditor-font-size: $font-size !default;
+$coloreditor-line-height: $line-height !default;
+$coloreditor-bg: $component-bg !default;
+$coloreditor-text: $component-text !default;
+$coloreditor-border: $component-border !default;
+
+$coloreditor-focus-border: null !default;
+$coloreditor-focus-shadow: 1px 1px 7px 1px rgba(0, 0, 0, .3) !default;
+
+$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-views-padding-y: $coloreditor-spacer !default;
+$coloreditor-views-padding-x: $coloreditor-views-padding-y !default;
+$coloreditor-views-gap: $coloreditor-spacer !default;

package/scss/colorgradient/_index.scss

@@ -0,0 +1,19 @@
+@import "../core/_index.scss";
+
+
+// Dependencies
+@import "../common/_index.scss";
+@import "../utils/_flex.scss";
+@import "../utils/_spacer.scss";
+@import "../icons/_index.scss";
+@import "../button/_index.scss";
+@import "../slider/_index.scss";
+@import "../textbox/_index.scss";
+@import "../numerictextbox/_index.scss";
+
+
+// Component
+@import "images/alpha-slider-bgr.scss";
+@import "_variables.scss";
+@import "_layout.scss";
+@import "_theme.scss";

package/scss/colorgradient/_layout.scss

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

package/scss/colorgradient/_theme.scss

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

package/scss/colorgradient/_variables.scss

@@ -0,0 +1,52 @@
+// ColorGradient
+$colorgradient-spacer: map-get( $spacing, 3 ) !default;
+
+$colorgradient-width: 272px !default;
+$colorgradient-border-width: 1px !default;
+$colorgradient-border-radius: $border-radius !default;
+$colorgradient-padding-y: $colorgradient-spacer !default;
+$colorgradient-padding-x: $colorgradient-padding-y !default;
+$colorgradient-gap: $colorgradient-spacer !default;
+$colorgradient-font-family: $font-family !default;
+$colorgradient-font-size: $font-size !default;
+$colorgradient-line-height: $line-height !default;
+$colorgradient-bg: $component-bg !default;
+$colorgradient-text: $component-text !default;
+$colorgradient-border: $component-border !default;
+
+$colorgradient-focus-border: null !default;
+$colorgradient-focus-shadow: 1px 1px 7px 1px rgba(0, 0, 0, .3) !default;
+
+
+$colorgradient-canvas-border-radius: $border-radius !default;
+$colorgradient-canvas-gap: $colorgradient-spacer !default;
+$colorgradient-canvas-rectangle-height: 180px !default;
+
+$colorgradient-slider-track-size: 10px !default;
+$colorgradient-slider-border-radius: 10px !default;
+$colorgradient-slider-draghandle-border-width: 3px !default;
+
+$colorgradient-slider-vertical-size: 180px !default;
+$colorgradient-slider-horizontal-size: 100% !default;
+
+$colorgradient-draghandle-width: 14px !default;
+$colorgradient-draghandle-height: 14px !default;
+$colorgradient-draghandle-border-width: 1px !default;
+$colorgradient-draghandle-border-radius: 50% !default;
+$colorgradient-draghandle-bg: transparent !default;
+$colorgradient-draghandle-text: null !default;
+$colorgradient-draghandle-border: rgba( $white, .8) !default;
+$colorgradient-draghandle-shadow: 0 1px 4px rgba(0, 0, 0, .5) !default;
+$colorgradient-draghandle-focus-shadow: 0 1px 4px black !default;
+$colorgradient-draghandle-hover-shadow: $colorgradient-draghandle-focus-shadow !default;
+
+$colorgradient-canvas-draghandle-margin-y: -( $colorgradient-draghandle-height / 2 ) !default;
+$colorgradient-canvas-draghandle-margin-x: -( $colorgradient-draghandle-width / 2 ) !default;
+
+$colorgradient-input-width: 46px !default;
+$colorgradient-input-gap: ( $colorgradient-spacer / 1.5 ) !default;
+$colorgradient-input-label-gap: ( $colorgradient-spacer / 3 ) !default;
+$colorgradient-input-label-text: $disabled-text !default;
+
+$colorgradient-contrast-ratio-font-weight: $font-weight-bold !default;
+$colorgradient-contrast-spacer: ( $colorgradient-spacer / 1.5 ) !default;

package/scss/colorgradient/images/alpha-slider-bgr.scss

@@ -0,0 +1,3 @@
+@include exports("alpha-slider-bgr.png") {
+    @include register-data-uri("alpha-slider-bgr.png", "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAuSURBVHgBxYyxDQAwDMJIL+YT+DjtzFRliUfLcklqBCRT4eCTxbD6kdL2/LgYXqpvCbs3kBv/AAAAAElFTkSuQmCC");
+}

package/scss/colorpalette/_index.scss

@@ -0,0 +1,12 @@
+@import "../core/_index.scss";
+
+
+// Dependencies
+@import "../common/_index.scss";
+@import "../utils/_flex.scss";
+
+
+// Component
+@import "_variables.scss";
+@import "_layout.scss";
+@import "_theme.scss";

package/scss/colorpalette/_layout.scss

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

package/scss/colorpalette/_theme.scss

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

package/scss/colorpalette/_variables.scss

@@ -0,0 +1,10 @@
+// Colorpalette
+$colorpalette-font-family: $font-family !default;
+$colorpalette-font-size: $font-size !default;
+$colorpalette-line-height: 0 !default;
+
+$colorpalette-tile-width: map-get( $spacing, 6 ) !default;
+$colorpalette-tile-height: $colorpalette-tile-width !default;
+$colorpalette-tile-focus-shadow: 0 0 3px 1px rgba( black, .3 ), inset 0 0 0 1px rgba( white, .5 ) !default;
+$colorpalette-tile-hover-shadow: 0 0 3px 1px rgba( black, .3 ), inset 0 0 0 1px rgba( white, .8 ) !default;
+$colorpalette-tile-selected-shadow: 0 1px 3px 1px rgba( black, .3 ), inset 0 0 0 1px rgba( white, 1 ) !default;

package/scss/colorpicker/_index.scss

@@ -5,15 +5,13 @@
 @import "../common/_index.scss";
 @import "../utils/_flex.scss";
 @import "../button/_index.scss";
-@import "../numerictextbox/_index.scss";
-@import "../slider/_index.scss";
+@import "../colorpalette/_index.scss";
+@import "../colorgradient/_index.scss";
 @import "../popup/_index.scss";
 @import "../icons/_index.scss";
 
 
 // Component
 @import "_variables.scss";
-@import "images/alpha-slider-bgr.scss";
-@import "images/alpha-slider-bgr-reversed.scss";
 @import "_layout.scss";
 @import "_theme.scss";