@progress/kendo-theme-material 6.2.1-dev.1 → 6.2.1-dev.44

package/scss/checkbox/_variables.scss

@@ -1,166 +1,196 @@
 @import "../list/_variables.scss";
 
 
-// Checkbox
+// CheckBox
 
-/// Border width of checkbox.
+/// The border width of the CheckBox.
 /// @group checkbox
 $kendo-checkbox-border-width: 2px !default;
 
-// Checkbox sizes
+/// The size of a small CheckBox.
+/// @group checkbox
+$kendo-checkbox-sm-size: k-map-get( $kendo-spacing, 3 ) !default;
+/// The size of a medium CheckBox.
+/// @group checkbox
+$kendo-checkbox-md-size: k-map-get( $kendo-spacing, 4 ) !default;
+/// The size of a large CheckBox.
+/// @group checkbox
+$kendo-checkbox-lg-size: k-map-get( $kendo-spacing, 5 ) !default;
+
+/// The glyph size of a small CheckBox.
+/// @group checkbox
+$kendo-checkbox-sm-glyph-size: k-map-get( $kendo-spacing, 2.5 ) !default;
+/// The glyph size of a medium CheckBox.
+/// @group checkbox
+$kendo-checkbox-md-glyph-size: k-map-get( $kendo-spacing, 3.5 ) !default;
+/// The glyph size of a large CheckBox.
+/// @group checkbox
+$kendo-checkbox-lg-glyph-size: k-map-get( $kendo-spacing, 4.5 ) !default;
+
+/// The ripple size of a small CheckBox.
+/// @group checkbox
+$kendo-checkbox-sm-ripple-size: 300% !default;
+/// The ripple size of a medium CheckBox.
+/// @group checkbox
+$kendo-checkbox-md-ripple-size: 300% !default;
+/// The ripple size of a large CheckBox.
+/// @group checkbox
+$kendo-checkbox-lg-ripple-size: 300% !default;
+
+// A map with the different CheckBox sizes.
 $kendo-checkbox-sizes: (
     sm: (
-        size: k-map-get( $kendo-spacing, 3 ),
-        glyph-size: k-map-get( $kendo-spacing, 2.5 ),
-        ripple-size: 300%
+        size: $kendo-checkbox-sm-size,
+        glyph-size: $kendo-checkbox-sm-glyph-size,
+        ripple-size: $kendo-checkbox-sm-ripple-size
     ),
     md: (
-        size: k-map-get( $kendo-spacing, 4 ),
-        glyph-size: k-map-get( $kendo-spacing, 3.5 ),
-        ripple-size: 300%
+        size: $kendo-checkbox-md-size,
+        glyph-size: $kendo-checkbox-md-glyph-size,
+        ripple-size: $kendo-checkbox-md-ripple-size
     ),
     lg: (
-        size: k-map-get( $kendo-spacing, 5 ),
-        glyph-size: k-map-get( $kendo-spacing, 4.5 ),
-        ripple-size: 300%
+        size: $kendo-checkbox-lg-size,
+        glyph-size: $kendo-checkbox-lg-glyph-size,
+        ripple-size: $kendo-checkbox-lg-ripple-size
     )
 ) !default;
 
-/// Background color of checkbox.
+/// The background color of the CheckBox.
 /// @group checkbox
 $kendo-checkbox-bg: null !default;
-/// Color of checkbox.
+/// The text color of the CheckBox.
 /// @group checkbox
 $kendo-checkbox-text: null !default;
-/// Border color of checkbox.
+/// The border color of the CheckBox.
 /// @group checkbox
 $kendo-checkbox-border: rgba( if( $kendo-is-dark-theme, $kendo-color-white, $kendo-color-black ), .54 ) !default;
 
-/// Background color of hovered checkbox.
+/// The background color of the hovered CheckBox.
 /// @group checkbox
 $kendo-checkbox-hover-bg: null !default;
-/// Color of hovered checkbox.
+/// The text color of the hovered CheckBox.
 /// @group checkbox
 $kendo-checkbox-hover-text: null !default;
-/// Border color of hovered checkbox.
+/// The border color of the hovered CheckBox.
 /// @group checkbox
 $kendo-checkbox-hover-border: null !default;
 
-/// Background color of checked checkbox.
+/// The background color of the checked CheckBox.
 /// @group checkbox
 $kendo-checkbox-checked-bg: $kendo-color-primary !default;
-/// Color of checked checkbox.
+/// The text color of the checked CheckBox.
 /// @group checkbox
 $kendo-checkbox-checked-text: k-contrast-color( $kendo-checkbox-checked-bg ) !default;
-/// Border color of checked checkbox.
+/// The border color of the checked CheckBox.
 /// @group checkbox
 $kendo-checkbox-checked-border: $kendo-checkbox-checked-bg !default;
 
-/// Background color of indeterminate checkbox.
+/// The background color of the indeterminate CheckBox.
 /// @group checkbox
 $kendo-checkbox-indeterminate-bg: $kendo-checkbox-checked-bg !default;
-/// Color of indeterminate checkbox.
+/// The text color of the indeterminate CheckBox.
 /// @group checkbox
 $kendo-checkbox-indeterminate-text: $kendo-checkbox-checked-text !default;
-/// Border color of indeterminate checkbox.
+/// The border color of the indeterminate CheckBox.
 /// @group checkbox
 $kendo-checkbox-indeterminate-border: $kendo-checkbox-checked-border !default;
 
-/// Border color of focused checkbox.
+/// The border color of the focused CheckBox.
 /// @group checkbox
 $kendo-checkbox-focus-border: null !default;
-/// Box shadow of focused checkbox.
+/// The box shadow of the focused CheckBox.
 /// @group checkbox
 $kendo-checkbox-focus-shadow: null !default;
-/// Border color of focused and checked checkbox.
+/// The border color of the focused and checked CheckBox.
 /// @group checkbox
 $kendo-checkbox-focus-checked-border: null !default;
-/// Box shadow of focused and checked checkbox.
+/// The box shadow of the focused and checked CheckBox.
 /// @group checkbox
 $kendo-checkbox-focus-checked-shadow: null !default;
 
-/// Background color of disabled checkbox.
+/// The background color of the disabled CheckBox.
 /// @group checkbox
 $kendo-checkbox-disabled-bg: null !default;
-/// Color of disabled checkbox.
+/// The text color of the disabled CheckBox.
 /// @group checkbox
 $kendo-checkbox-disabled-text: null !default;
-/// Border color of disabled checkbox.
+/// The border color of the disabled CheckBox.
 /// @group checkbox
 $kendo-checkbox-disabled-border: k-try-shade( $kendo-component-bg, 4 ) !default;
 
 
-/// Background color of disabled and checked checkbox.
+/// The background color of the disabled and checked CheckBox.
 /// @group checkbox
 $kendo-checkbox-disabled-checked-bg: $kendo-checkbox-disabled-border !default;
-/// Color of disabled and checked checkbox.
+/// The text color of the disabled and checked CheckBox.
 /// @group checkbox
 $kendo-checkbox-disabled-checked-text: k-contrast-color( $kendo-checkbox-disabled-checked-bg ) !default;
-/// Border color of disabled and checked checkbox.
+/// The border color of the disabled and checked CheckBox.
 /// @group checkbox
 $kendo-checkbox-disabled-checked-border: $kendo-checkbox-disabled-checked-bg !default;
 
-/// Background color of invalid checkbox.
+/// The background color of an invalid CheckBox.
 /// @group checkbox
 $kendo-checkbox-invalid-bg: null !default;
-/// Color of invalid checkbox.
+/// The text color of an invalid CheckBox.
 /// @group checkbox
 $kendo-checkbox-invalid-text: $kendo-invalid-text !default;
-/// Border color of invalid checkbox.
+/// The border color of an invalid CheckBox.
 /// @group checkbox
 $kendo-checkbox-invalid-border: $kendo-invalid-border !default;
 
 
-// Checkbox indicator
+// CheckBox indicator
 
-/// Type of checkbox indicator.
+/// The type of the CheckBox indicator.
 /// @group checkbox
 $kendo-checkbox-indicator-type: image !default;
 
-/// Glyph font family of checkbox indicator.
+/// The font family of the CheckBox indicator glyph.
 /// @group checkbox
 $kendo-checkbox-glyph-font-family: "WebComponentsIcons", monospace !default;
 $kendo-checkbox-glyph-size: 10px !default;
-/// Glyph of checkbox indicator.
+/// The glyph of the CheckBox indicator.
 /// @group checkbox
 $kendo-checkbox-checked-glyph: "\e118" !default;
-/// Glyph of indeterminate checkbox indicator.
+/// The glyph of the indeterminate CheckBox indicator.
 /// @group checkbox
 $kendo-checkbox-indeterminate-glyph: "\e121" !default;
 
-/// Image of checked checkbox indicator.
+/// The image for a checked CheckBox indicator.
 /// @group checkbox
 $kendo-checkbox-checked-image: k-escape-svg( url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='none' stroke='#{$kendo-checkbox-checked-text}' stroke-width='3' d='M4.1,12.7 9,17.6 20.3,6.3'/></svg>") ) !default;
-/// Image of checked checkbox indicator.
+/// The image for a indeterminate CheckBox indicator.
 /// @group checkbox
 $kendo-checkbox-indeterminate-image: k-escape-svg( url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><path fill='none' stroke='#{$kendo-checkbox-indeterminate-text}' stroke-width='3' d='M4 10h12'/></svg>") ) !default;
 
 
-// Checkbox label
+// CheckBox label
 
-/// The horizontal margin of the checkbox inside a label.
+/// The horizontal margin of the CheckBox inside a label.
 /// @group checkbox
 $kendo-checkbox-label-margin-x: k-map-get( $kendo-spacing, 1 ) !default;
 
 
-// Checkbox list
+// CheckBox list
 
-/// Spacing between items of horizontal checkbox list.
+/// The spacing between the items in a horizontal CheckBox list.
 /// @group checkbox
 $kendo-checkbox-list-spacing: k-map-get( $kendo-spacing, 4 ) !default;
-/// Horizontal padding of checkbox list items.
+/// The horizontal padding of the CheckBox list items.
 /// @group checkbox
 $kendo-checkbox-list-item-padding-x: 0px !default;
-/// Vertical padding of checkbox list items.
+/// The vertical padding of the CheckBox list items.
 /// @group checkbox
 $kendo-checkbox-list-item-padding-y: $kendo-list-md-item-padding-y !default;
 
 
-// Checkbox ripple
+// CheckBox ripple
 
-/// Background color of checkbox ripple.
+/// The background color of the CheckBox' ripple.
 /// @group checkbox
 $kendo-checkbox-ripple-bg: $kendo-color-primary !default;
-/// Opacity of checkbox ripple.
+/// The opacity of the CheckBox' ripple.
 /// @group checkbox
 $kendo-checkbox-ripple-opacity: .2 !default;

package/scss/chip/_index.scss

@@ -20,3 +20,21 @@ $_kendo-module-meta: (
 @import "./_variables.scss";
 @import "./_layout.scss";
 @import "./_theme.scss";
+
+
+// Register
+@import "../core/module-system/index.import.scss";
+@include module-register( $_kendo-module-meta... );
+
+
+// Expose
+@mixin kendo-chip--styles() {
+    @include module-render( "chip" ) {
+        @include kendo-chip--layout();
+        @include kendo-chip--theme();
+    }
+}
+
+@if $kendo-auto-bootstrap {
+    @include kendo-chip--styles();
+}

package/scss/chip/_layout.scss

@@ -1 +1,6 @@
 @import "@progress/kendo-theme-default/scss/chip/_layout.scss";
+
+
+@mixin kendo-chip--layout() {
+    @include kendo-chip--layout-base();
+}

package/scss/chip/_theme.scss

@@ -1,6 +1,9 @@
 @import "@progress/kendo-theme-default/scss/chip/_theme.scss";
 
-@include exports( "chip/theme/material" ) {
+
+@mixin kendo-chip--theme() {
+
+    @include kendo-chip--theme-base();
 
     // Solid
     .k-chip-solid {

package/scss/chip/_variables.scss

@@ -3,47 +3,71 @@
 
 // Chip
 
-/// Width of the border around the button.
+/// The width of the border around the Chip.
 /// @group chip
 $kendo-chip-border-width: 1px !default;
-/// The spacing between the text and the icons of the chip.
+/// The spacing between the text and the icons of the Chip.
 /// @group chip
 $kendo-chip-spacing: k-map-get( $kendo-spacing, 1 ) !default;
 
-/// Horizontal padding of the chip.
+/// The horizontal padding of the Chip.
 /// @group chip
 $kendo-chip-padding-x: k-map-get( $kendo-spacing, 1 ) !default;
+/// The horizontal padding of the small Chip.
+/// @group chip
 $kendo-chip-sm-padding-x: k-map-get( $kendo-spacing, 1 ) !default;
+/// The horizontal padding of the medium Chip.
+/// @group chip
 $kendo-chip-md-padding-x: k-map-get( $kendo-spacing, 1 ) !default;
+/// The horizontal padding of the large Chip.
+/// @group chip
 $kendo-chip-lg-padding-x: k-map-get( $kendo-spacing, 1 ) !default;
 
-/// Vertical padding of the chip.
+/// The vertical padding of the Chip.
 /// @group chip
 $kendo-chip-padding-y: k-map-get( $kendo-spacing, 1 ) !default;
+/// The vertical padding of the small Chip.
+/// @group chip
 $kendo-chip-sm-padding-y: k-map-get( $kendo-spacing, 0.5 ) !default; // sass-lint:disable-line leading-zero
+/// The vertical padding of the medium Chip.
+/// @group chip
 $kendo-chip-md-padding-y: k-map-get( $kendo-spacing, 1 ) !default;
+/// The vertical padding of the large Chip.
+/// @group chip
 $kendo-chip-lg-padding-y: k-map-get( $kendo-spacing, 1.5 ) !default;
 
-/// Font sizes of the chip.
+/// The font size of the Chip.
 /// @group chip
 $kendo-chip-font-size: $kendo-font-size-md !default;
+/// The font size of the small Chip.
+/// @group chip
 $kendo-chip-sm-font-size: $kendo-font-size-md !default;
+/// The font size of the medium Chip.
+/// @group chip
 $kendo-chip-md-font-size: $kendo-font-size-md !default;
+/// The font size of the large Chip.
+/// @group chip
 $kendo-chip-lg-font-size: $kendo-font-size-md !default;
 
-/// Line heights of the chip that are connected to the $kendo-font-size.
+/// The Chip's line height that is related to the $kendo-font-size.
 /// @group chip
 $kendo-chip-line-height: k-math-div( 18, 14 ) !default;
+/// The small Chip's line height that is related to the $kendo-font-size.
+/// @group chip
 $kendo-chip-sm-line-height: $kendo-chip-line-height !default;
+/// The medium Chip's line height that is related to the $kendo-font-size.
+/// @group chip
 $kendo-chip-md-line-height: $kendo-chip-line-height !default;
+/// The large Chip's line height that is related to the $kendo-font-size.
+/// @group chip
 $kendo-chip-lg-line-height: $kendo-chip-line-height !default;
 
-/// Calculated height of the chip.
+/// The calculated height of the Chip.
 /// @group chip
 $kendo-chip-calc-size: calc( #{$kendo-chip-line-height * 1em} + #{$kendo-chip-padding-y * 2} + #{$kendo-chip-border-width * 2} ) !default;
 $kendo-chip-sm-calc-size: calc( #{$kendo-chip-sm-line-height * 1em} + #{$kendo-chip-sm-padding-y * 2} + #{$kendo-chip-border-width * 2} ) !default;
 
-/// Sizes map for the chip.
+/// The map with the sizes of the Chip.
 /// @group chip
 $kendo-chip-sizes: (
     sm: (
@@ -66,11 +90,11 @@ $kendo-chip-sizes: (
     )
 ) !default;
 
-/// The base background of the chip.
+/// The base background of the Chip.
 /// @group chip
 $kendo-chip-base-bg: if( $kendo-is-dark-theme, $kendo-color-white, $kendo-color-black) !default;
 
-/// Theme colors map for the chip.
+/// The theme colors map for the Chip.
 /// @group chip
 $kendo-chip-theme-colors: (
     "base": $kendo-chip-base-bg,
@@ -80,73 +104,73 @@ $kendo-chip-theme-colors: (
     "success": k-map-get( $kendo-theme-colors, "success" )
 ) !default;
 
-/// The base background color of solid chip.
+/// The base background color of the solid Chip.
 /// @group chip
 $kendo-chip-solid-bg: if( $kendo-is-dark-theme, $kendo-button-bg, k-try-tint( $kendo-chip-base-bg, 92% )) !default;
-/// The base text color of solid chip.
+/// The base text color of the solid Chip.
 /// @group chip
 $kendo-chip-solid-text: $kendo-button-text !default;
-/// The base border color of solid chip.
+/// The base border color of the solid Chip.
 /// @group chip
 $kendo-chip-solid-border: $kendo-chip-solid-bg !default;
-/// The base shadow of solid chip.
+/// The base shadow of the solid Chip.
 /// @group chip
 $kendo-chip-solid-shadow: null !default;
-/// The base gradient of solid chip.
+/// The base gradient of the solid Chip.
 /// @group chip
 $kendo-chip-solid-gradient: $kendo-button-gradient !default;
 
-/// The base background color of focused solid chip.
+/// The base background color of the focused solid Chip.
 /// @group chip
 $kendo-chip-solid-focus-bg: k-try-tint( $kendo-chip-base-bg, 80% ) !default;
-/// The base text color of focused solid chip.
+/// The base text color of the focused solid Chip.
 /// @group chip
 $kendo-chip-solid-focus-text: null !default;
 
-/// The base background color of hovered solid chip.
+/// The base background color of the hovered solid Chip.
 /// @group chip
 $kendo-chip-solid-hover-bg: k-try-tint( $kendo-chip-base-bg, 84% ) !default;
-/// The base text color of hovered solid chip.
+/// The base text color of the hovered solid Chip.
 /// @group chip
 $kendo-chip-solid-hover-text: null !default;
 
-/// The base background color of selected solid chip.
+/// The base background color of the selected solid Chip.
 /// @group chip
 $kendo-chip-solid-selected-bg: k-try-tint( $kendo-chip-base-bg, 76% ) !default;
-/// The base text color of selected solid chip.
+/// The base text color of the selected solid Chip.
 /// @group chip
 $kendo-chip-solid-selected-text: null !default;
 
-/// The base background color of outline chip.
+/// The base background color of the outline Chip.
 /// @group chip
 $kendo-chip-outline-bg: $kendo-component-bg !default;
-/// The base text color of outline chip.
+/// The base text color of the outline Chip.
 /// @group chip
 $kendo-chip-outline-text: $kendo-chip-solid-text !default;
-/// The base border color of outline chip.
+/// The base border color of the outline Chip.
 /// @group chip
 $kendo-chip-outline-border: $kendo-chip-outline-text !default;
-/// The base shadow of outline chip.
+/// The base shadow of the outline Chip.
 /// @group chip
 $kendo-chip-outline-shadow: null !default;
 
-/// The base background color of hovered outline chip.
+/// The base background color of the hovered outline Chip.
 /// @group chip
 $kendo-chip-outline-hover-bg: k-try-tint( $kendo-chip-base-bg, 92% ) !default;
-/// The base text color of hovered outline chip.
+/// The base text color of the hovered outline Chip.
 /// @group chip
 $kendo-chip-outline-hover-text: k-contrast-color( $kendo-chip-outline-hover-bg ) !default;
 
-/// The base background color of selected outline chip.
+/// The base background color of the selected outline Chip.
 /// @group chip
 $kendo-chip-outline-selected-bg: k-try-tint( $kendo-chip-base-bg, 84% ) !default;
-/// The base text color of selected outline chip.
+/// The base text color of the selected outline Chip.
 /// @group chip
 $kendo-chip-outline-selected-text: $kendo-chip-outline-hover-text !default;
 
 // Chip List
 
-/// The sizes of the chip list.
+/// The sizes of the Chip list.
 /// @group chip
 $kendo-chip-list-sizes: (
     sm: k-map-get( $kendo-spacing, 1 ),

package/scss/color-preview/_index.scss

@@ -9,8 +9,6 @@ $_kendo-module-meta: (
 );
 
 
-
-
 // Dependencies
 
 
@@ -19,3 +17,21 @@ $_kendo-module-meta: (
 @import "./_variables.scss";
 @import "./_layout.scss";
 @import "./_theme.scss";
+
+
+// Register
+@import "../core/module-system/index.import.scss";
+@include module-register( $_kendo-module-meta... );
+
+
+// Expose
+@mixin kendo-color-preview--styles() {
+    @include module-render( "color-preview" ) {
+        @include kendo-color-preview--layout();
+        @include kendo-color-preview--theme();
+    }
+}
+
+@if $kendo-auto-bootstrap {
+    @include kendo-color-preview--styles();
+}

package/scss/color-preview/_layout.scss

@@ -1 +1,6 @@
 @import "@progress/kendo-theme-default/scss/color-preview/_layout.scss";
+
+
+@mixin kendo-color-preview--layout() {
+    @include kendo-color-preview--layout-base();
+}

package/scss/color-preview/_theme.scss

@@ -1 +1,6 @@
 @import "@progress/kendo-theme-default/scss/color-preview/_theme.scss";
+
+
+@mixin kendo-color-preview--theme() {
+    @include kendo-color-preview--theme-base();
+}

package/scss/coloreditor/_index.scss

@@ -26,3 +26,21 @@ $_kendo-module-meta: (
 @import "./_variables.scss";
 @import "./_layout.scss";
 @import "./_theme.scss";
+
+
+// Register
+@import "../core/module-system/index.import.scss";
+@include module-register( $_kendo-module-meta... );
+
+
+// Expose
+@mixin kendo-color-editor--styles() {
+    @include module-render( "color-editor" ) {
+        @include kendo-color-editor--layout();
+        @include kendo-color-editor--theme();
+    }
+}
+
+@if $kendo-auto-bootstrap {
+    @include kendo-color-editor--styles();
+}

package/scss/coloreditor/_layout.scss

@@ -1 +1,6 @@
 @import "@progress/kendo-theme-default/scss/coloreditor/_layout.scss";
+
+
+@mixin kendo-color-editor--layout() {
+    @include kendo-color-editor--layout-base();
+}

package/scss/coloreditor/_theme.scss

@@ -1 +1,6 @@
 @import "@progress/kendo-theme-default/scss/coloreditor/_theme.scss";
+
+
+@mixin kendo-color-editor--theme() {
+    @include kendo-color-editor--theme-base();
+}

package/scss/colorgradient/_index.scss

@@ -28,7 +28,24 @@ $_kendo-module-meta: (
 
 
 // Component
-@import "./images/alpha-slider-bgr.scss";
 @import "./_variables.scss";
 @import "./_layout.scss";
 @import "./_theme.scss";
+
+
+// Register
+@import "../core/module-system/index.import.scss";
+@include module-register( $_kendo-module-meta... );
+
+
+// Expose
+@mixin kendo-color-gradient--styles() {
+    @include module-render( "color-gradient" ) {
+        @include kendo-color-gradient--layout();
+        @include kendo-color-gradient--theme();
+    }
+}
+
+@if $kendo-auto-bootstrap {
+    @include kendo-color-gradient--styles();
+}

package/scss/colorgradient/_layout.scss

@@ -1 +1,6 @@
 @import "@progress/kendo-theme-default/scss/colorgradient/_layout.scss";
+
+
+@mixin kendo-color-gradient--layout() {
+    @include kendo-color-gradient--layout-base();
+}

package/scss/colorgradient/_theme.scss

@@ -1 +1,6 @@
 @import "@progress/kendo-theme-default/scss/colorgradient/_theme.scss";
+
+
+@mixin kendo-color-gradient--theme() {
+    @include kendo-color-gradient--theme-base();
+}

package/scss/colorgradient/_variables.scss

@@ -1,3 +1,6 @@
+@import "./images/alpha-slider-bgr.scss";
+
+
 // ColorGradient
 $kendo-color-gradient-spacer: k-map-get( $kendo-spacing, 3 ) !default;
 

package/scss/colorpalette/_index.scss

@@ -20,3 +20,21 @@ $_kendo-module-meta: (
 @import "./_variables.scss";
 @import "./_layout.scss";
 @import "./_theme.scss";
+
+
+// Register
+@import "../core/module-system/index.import.scss";
+@include module-register( $_kendo-module-meta... );
+
+
+// Expose
+@mixin kendo-color-palette--styles() {
+    @include module-render( "color-palette" ) {
+        @include kendo-color-palette--layout();
+        @include kendo-color-palette--theme();
+    }
+}
+
+@if $kendo-auto-bootstrap {
+    @include kendo-color-palette--styles();
+}

package/scss/colorpalette/_layout.scss

@@ -1 +1,6 @@
 @import "@progress/kendo-theme-default/scss/colorpalette/_layout.scss";
+
+
+@mixin kendo-color-palette--layout() {
+    @include kendo-color-palette--layout-base();
+}

package/scss/colorpalette/_theme.scss

@@ -1 +1,6 @@
 @import "@progress/kendo-theme-default/scss/colorpalette/_theme.scss";
+
+
+@mixin kendo-color-palette--theme() {
+    @include kendo-color-palette--theme-base();
+}